/* I don't think this var works on IE. */
:root {
    --ContentsButtonSpacing: calc(50px + 10vw);
}

body{
    margin: 0;
    font-family: Tahoma, Geneva, sans-serif;
    background-color: black;
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
}

button:focus{
    outline: none;
    }

/* .dufusdiv{
    contain: none;
} */

#getit{
    position: fixed;
    top: 5px;
    right: 5px;
    background-color: #8a8a8a;
    color: rgb(68, 68, 68);
    font-size: 16px;
    padding: 10px 15px;
    border: #494949;
    cursor: pointer;
    text-align: center;
    transition: opacity 3s;
    /* bug fix for chrome hiding fixed element at top of page */
    -webkit-transform: translateZ(0);
    /* transform: translateZ(0);
    -webkit-backface-visibility: hidden; */
    z-index: 100;
}

#getit:hover{
    background-color: black;
    color: white;
    transition: .3s;
}

/* Hides the title text that loads faster than the background images, based on a time delay. Fades out */
#loadinghideysquare{
    background-color: black;
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height:100%;
    transition:opacity 5s;
}

.LineHider{
    background-color: black;
    height: 6px;
    width: 100%;
    margin-top: -2px;
    margin-bottom: -2px;
}

#scrollarrow{
    position:absolute;
    display: block;
    width: 100%;
    left: auto;
    right: auto;
    top:0;
    z-index: 1;
    text-align: center;
    /* left: 50%; */
    color:rgb(170, 170, 170);
    font-family: roboto;
    transition: opacity 2s;
    font-size: calc(8px + .4vw);
}

/* Container for the clone of the background image that omits the sky. It sits on top of the top two
title text lines, so that they can appear from behind it and into the sky */
.sanrafMtn_Container{
    position: absolute;
    bottom: 0;
    left:0;
}

.sanraf{
    width: 100%;
    position: relative;
}

#colorsky-portrait{
    display: none;
    overflow: hidden;
    position: absolute;
    height: auto;
    top: 0;
    width: 100%;
    right: 0;
}

/* This holds everything except for the Contents popout */
.CoverPage{
    position: relative;
}

/* Big container for the stuff that isn't the top mountains images and title text */
.BottomText{
    position: relative;
    overflow: visible;
    transition: opacity 3s;
}

/* Text boxes */
.WhatisitTextBox, .WhatisitText, .WhyitmattersTextBox, .WhyitmattersText{
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 33px;
    padding-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0;
    margin-bottom: 16px;
    border-radius: 5px;
    font-size: 16px;
}

/* Empty divs with a background color for the text, so a gradient can sit in front of it */
.WhatisitTextBox, .WhyitmattersTextBox{
    position: absolute;
    background-color: rgb(29, 29, 29);
    top:0;
    left:0;
    right:0;
    /* I honestly have no idea why the bottom needs to be 20px to make the text boxes the same size as the elements
    with the actual text in them. The bottom margin is 16px on both, so I really don't know where that extra 4 px is coming
    from. But it works somehow.*/
    bottom:20px;
}

/* These contain the actual text for each section. They have no background so the background divs + the gradient images form
their background*/
.WhatisitText, .WhyitmattersText{
    position: relative;
    background-color: transparent;
    font-family: "Inter", sans-serif;
    color: white;
}

/* Adds a diagonal gradient effect to the text boxes using a custom PNG black gradient */
.blackgradient{
    position: absolute;
    left:0;
    top:0;
    bottom: 30px;
    width:100%;
    height:100%;
}

/* Textbox headers */
.WhatHeader, .WhyHeader{
    position: relative;
    top: 0;
    color: white;
    background-color: black;
    background-image: url(media/Blackgradientyo.png);
    font-family: "Archivo Black", sans-serif;
    font-size: 20px;
    padding-left: 26px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 0px;
    margin: 0;
    margin-right:15px;
}

/* Give the top header a little extra space from the top background image, and extend its background all the way to the 
edge so that no elements peek out on the side */
.WhatHeader{padding-top: 20px; margin-right: 0; }

/* Borders for the headers */
.crazybordertop{
    position: absolute;
    top: -3px;
    left: 0;
    width: 220px;
    height: 32px;
    padding-left: 14px;
}
.crazyborderbottom{
    position: absolute;
    top: -3px;
    left: 0;
    width: 220px;
    height: auto;
    padding-left: 14px;
}

.CharityLink{color:rgb(95, 210, 255)}

.counted_Container{
    position: absolute;
    top: calc(.4 * 75vw);
}
#counted{
    width:70%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    opacity: 0;
    transition: opacity 2s;
}

.INTHE_Container{
    position: absolute;
    top:calc(.65 * 75vw);
    width: 100%;
}
#INTHE_text{
    font-family: Roboto;
    display: block;
    text-align: center;
    font-size: 6vw;
    color: white;
}

.Thousands_Container{
    position: absolute;
    top: calc(1.13 * 75vw);
}
#thousands{
    width:90%;
    display: block;
    margin-left:auto;
    margin-right:auto;
    transition: opacity 3s;
}

.contentsbutton{
    background-color: #858585;
    color: rgb(48, 48, 48);
    font-size: 16px;
    padding: 10px 15px;
    border: #494949;
    cursor: pointer;
    text-align: center;
    display: block;
    position: absolute;
    margin-top: var(--ContentsButtonSpacing);
    left: 50%;
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0);
    height: 55px;
}

.contentsbutton:hover{
    background-color: black;
    color: white;
    transition: .3s;
}
 
/* This top of this thing is supposed to sit near the middle of the top text box. The bottom should grow based on the viewport width, to
better display the background image. So both top and bottom are responsive and were figured out through a lot of trial and error */
#bottombckgdContainer{
    position: absolute;
    top: calc(79vw);
    bottom:calc(-150px - 20vw);
    overflow: visible;
    width: 100%;
    background-image: url(media/Jan9.JPG);
    background-size: cover;
    background-position: center;
    transition: opacity 2s;
}


/* Footer1 is below the bottom background image, footer2 is below the Contents popout */
.footer1{
    position: absolute;
    top: 100%;
    background-color:  rgb(167, 167, 167);
    width:100%;
    padding-bottom: 25px;
    height: 36px;
    background-image: url(media/footer-logo.png);
    background-size: 305px, 200%;
    background-position: right 5px;
    background-repeat: no-repeat;
}

/* The footer button classes are shared by both footer1 and footer2 */
/* Copyright date */
.Copyright_button{
    position: relative;
    float: right;
    background-color: transparent;
    border:none;
    color: rgb(146, 146, 146);
    font-size: 14px;
    padding: 10px 15px;
    cursor: default;
    text-align: center;
    margin: 0; 
}
/* The background for the Copyright date on footer2 is different, so add another class to
change the text color of the copyright date to be used in footer2 */
.Copyright_buttonC{color: rgb(100, 100, 100);}

/* Contact button */
.Contact_button, .Donate_button{
    position: relative;
    float:left;
    background-color: rgba(109, 109, 109, 0.4);
    border: none;
    color: rgb(78, 78, 78);
    font-size: 15px;
    padding-top: 9px;
    padding-bottom: 11px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: pointer;
    text-align: center;
    margin: 0;
}
.Donate_button{
    border-style: none none none solid;
    border-width: 2px;
    /* border-color: rgba(119, 119, 119, 0.5); */
    border-color: rgba(160, 248, 248, 0.5);
}

.Contact_button:hover, .Donate_button:hover{
    background-color: black;
    color: white;
    transition: .3s;
}

/* ContactBreakout1 is for footer1. Footer1 is below the bottom background image, footer2 is below the 
Contents popout */
#ContactBreakout1, #ContactBreakout2{
    position: absolute;
    left:0;
    bottom:100%;
    font-size:14px;
    background-color: rgb(117, 117, 117);
    color: rgb(58, 58, 58);
    background-image: url(media/breakoutbackground405.png);
    background-size: auto 100%;
    background-position: right bottom;
}

/* Both footers share these classes */
.emailbreakout{
    padding: 10px;
    padding-bottom: 0;
    padding-top: 0;
    margin:0;
    text-decoration: none;
    color: rgb(58, 58, 58);
}
.IGbreakout{
    padding: 10px;
    padding-bottom: 13px;
    padding-top: 0;
    margin:0;
    text-decoration: none;
    color: rgb(58, 58, 58);
}

/* Email icon*/
.ContactIcon1{
    position: relative;
    width: 30px;
    height:auto;
    top: 7px;
}
/* IG icon */
.ContactIcon2{
    position: relative;
    width: 30px;
    height:auto;
    top: 10px;
}

/* This thing should sit right below the Contents button. Because the Contents button is positioned absolutely, we have to explicitly
define the top mergin based on the marging and size of the button. */
#ContentsContainer{
    position: absolute;
    overflow: visible;
    margin-top: calc(var(--ContentsButtonSpacing) + 55px);
    width: 100vw;
    font-size: 14px;
    background-color: rgb(187, 187, 187);
    padding-top: 10px;
    padding-bottom: 0;
    transition: opacity 2s;
}

.footer2{
    position: relative;
    float: left;
    background-color: #8a8a8a;
    width:100%;
    padding-bottom: 5px;
    height: 37px;
}

ul{
    margin:0;
    padding:0;
    list-style-type: none;
}

.ContentsCol1, .ContentsCol2{
    position: relative;
    width: 50%;
    float: left;
    font-family: Tahoma, Geneva, sans-serif;
    padding-bottom: 20px;
}
.ContentsCol2{
    float: right;
}

.ContentsCol1 ul{
    padding-left: 5px;
}
.ContentsCol2 ul{
    padding-right: 5px;
}

/* All list items within Contents that are NOT chapters */
#ContentsContainer li:not(.chapter){
    padding-left: 20px;
}

/* Chapter list items within Contents */
.chapter{
    font-style: italic;
    font-weight: 900;
    font-size:16px;
    line-height: 1.9;
}

/* Background image behind Contents. Media queries change the style for two break points */
.treevector{
    position: absolute;
    bottom: 37px;
    right:0;
    width: auto;
    height: 85%;
    overflow: hidden;
    opacity: 1;
}

/* Used for elements that have not been activated (such as by their controlling buttons */
.notvisible{display: none;opacity:0;}

.visible{display: block;opacity:1;}

/* Use for elements that need to be hidden at some point */
.HideMe, .HideMeBottom{opacity:0;}



/* Responsive stuff */


/* The background image in the Contents box will overlap the text around 1000px screen width. Lower its
opacity near this breakpoint so that the text is still readable*/
@media screen and (max-width: 985px) {
    .treevector{
        opacity:.2;
    }
}

/* Change styles below 601 px screen width */
@media screen and (max-width: 600px) {
    /* Change the size of the GET IT button to be responsive, so it is not obnoxiously large on small screens */
    #getit{
        font-size: calc(10px + .8vw);
        padding: 1.5vw 1.6vw;
    }

    #scrollarrow{
        color:rgb(133, 133, 133);
    }

    /* Shift the title text so it fits portrait style screens better*/
    .counted_Container{top: calc(.9 * 75vw);}
    .INTHE_Container{top: calc(1.25 * 75vw);}
    .Thousands_Container{top: calc(1.8 * 75vw);}

    /* Use a different bottom background image so that the figure is centered better*/
    #bottombckgdContainer{
        background-image: url(media/Jan9-bottomcrop.JPG);
        top: 40%;
        background-position: center bottom;
    }

    /* In the Contents box, the tree background image looks better centered (nearly) between the text columns
    when the text columns are close together. Shift it*/
    .treevector{
        left:40%;
        -ms-transform: translate(-50%, 0%);
        transform: translate(-50%, 0);
    }

    #colorsky-portrait{
        display: block;
    }
}

/*Below 320 px screen width, the figure in the background image is cut off on the left. To display it better, shift it */
@media screen and (max-width: 350px) {
    #bottombckgdContainer{
        background-position: 48% bottom;
    }
}