/* TODO: ...
    - Header menu's background not appearing when linked via anchor tag. Requires at least one scroll action atm.
    - Blue screen when loading home page - it's the background. Might not be a good fix (unless maybe some JS trick)
    - Consolidate .about and .home stuff
    - make sure text doesn't fully disappear somehow, when resize viewport and when over a video section, in exAbout.html
 
    Aesthetics:
    - fix font-weights
    - Animate "EXE.RCISE | ESICR.EXE" as Exercise expanding right then reflection words. Animate like, a bar scan, for example. Then make pop and scale larger
    - black box background behind brand/logo across website to pop. Make clickable on some.
        - appear/disappear
 
 
    More:
    - can't click logo - competing w/ header-right's z-index
    - ^ couldn't a solution be just put some transparent clickable thing over it?
 */

/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

/* Global variables */
:root {
    --foreground-color: #fff;
    --background-color: #2696E9;
    
/*    --text-background-color: rgba(50, 168, 58, 0.2);*/
    --text-background-color: rgba(252, 186, 3, 0.2);
    --text-hover-color: rgba(1, 1, 1, 0.2);

    /* Same as --text-background-color but different transparancy*/
/*    --active-left-nav-color: rgba(252, 186, 3, 0.67);*/
    --active-left-nav-color-light: rgba(252, 186, 3, 0.67);
    --active-left-nav-color-dark: rgba(252, 186, 3, 1);

/*    --active-left-nav-color: rgba(255,255,0,0.67);*/
    
    /*--light-red: rgba(233,236,27,0.5);*/
    /*--light-red: rgba(241,21,21,0.5);*/
    
    --layer-11: 999;
    --layer-10: 998;
    --layer-9: 997;
    --layer-8: 888;
    --layer-7: 777;
    --layer-0: 000;
        
    --slow-transition: 1.0s;
    --med-transition: 0.5s;
    --fast-transition: 0.3s;
    
    /* Specific values */
    --logo-animation-time: 2.5s;
    
    /* Metrics */
    --section-fade-height: 30px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* TODO: ? */
    font-family: "Poppins", sans-serif;
}

/* From Boostrap:*/
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
/* <<<<< END Boostrap-like stuff*/





html {
    scroll-behavior: smooth;
}









section {
    padding: 100px 200px;
}

.about section {
    padding: 10px 200px;
}

/* Text over video overlays */
section .content h1,
section .content h2,
section .content p {
    position: relative;
    z-index: var(--layer-8);
}

ul {
    padding: 0px 15px;
    margin-bottom: 65px
}



















.left-panel-nav {
    overflow-y: scroll;
    z-index: var(--layer-9);
    position: fixed;
/*    margin: 70px 0 0 10px;*/
    display: flex;
    justify-content: space-evenly;
    flex-direction: column; /* stack items vertically */
    /*    height: 100%;*/
    /*    overflow-y: auto;*/
        /* ^ Doesn't work*/
/*    gap: 10px;*/
    
    
    gap: 2vh;
/*    height: 100%;*/
/*    height: 80vh;*/
/*    height: 80vh;*/
    top: 70px;
/*    margin-top: 50px;*/
/*    margin-bottom: 20vh;*/
/*    min-height: 100px;*/

    padding: 0 0 0 10px;
}

.left-panel-nav a {
    padding: 2px 2px 2px 3px;
    position: relative;
    color: var(--foreground-color);
    font-size: 0.95em;
    width: 190px; /* N.B.: in order to not overlap on the left indent in header's & section's left padding */
    text-decoration: none;
}

/* highlight text darker color when active; gradient background */
nav.left-panel-nav a.active {
    color: var(--active-left-nav-color-dark);
    background: linear-gradient(to right, var(--text-hover-color), transparent);
}

/* highlight color when hover */
nav.left-panel-nav a:not(.active):hover {
    color: var(--active-left-nav-color-light);
}

/* underline when hover */
nav.left-panel-nav a:hover:before {
    width: 100%;
}

/* underline box */
nav.left-panel-nav a:before {
    content: '';
    position: absolute;
/*    background: linear-gradient(to right, var(--foreground-color), transparent);*/
    background: linear-gradient(to right, var(--active-left-nav-color-light), transparent);
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    transition: 0.3s ease;
}












/*.snap-scroll-container {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/
/**/
/*section {*/
/*    padding: 20px 100px;*/
/*}*/
/**/
/* Text over video overlays*/
/*section h1,*/
/*section h2,*/
/*section p {*/
/*    z-index: var(--layer-8);*/
/*}*/


.about {
    position: relative;
    width: 100%;
    height: 100%;
    /*    min-height: 100vh;*/
    display: flex;
    justify-content: space-evenly;
    flex-direction: column; /* stack items vertically */
    background: var(--background-color);
}
/*.about,*/
.home {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column; /* stack items vertically */
    background: var(--background-color);
}

/* Transparent colored screen */
.about:before,
.home:before {
    z-index: var(--layer-7);
    content: '';
    position: absolute;
    background: rgba(3, 96, 251, 0.3);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.about .content {
    position: relative;
    z-index: var(--layer-8);
    color: var(--foreground-color);
/*    width: 85%;*/
/* TODO: HERE where the sections' height is affected: */
/*    height: 100vh;*/
/*    display: none;*/
    
    display: flex;
    justify-content: center;
    flex-direction: column; /* stack items vertically */
}

/* :not(:last-child) not working...hence, we're it this way: */
#about-last-section {
    overflow-y: hidden; /* N.B. stop last section from scrolling, if overflow, so we can easily and swiftly (no stick) scroll back upwards */
    /*    color: green;*/
    margin-bottom: 50px; /* More space on bottom of page */
}

.about .content:not(.background-video-div) { /*:not(:last-child) {*/
    overflow-y: auto;
    /*color: red;*/
}

.home .content {
    z-index: var(--layer-8);
    color: var(--foreground-color);
    width: 85%;
/*    margin-top: 50px;*/
    display: none;
}


/*.about .content.active {*/
/*    display: block;*/
/*    position: relative;*/
/*}*/
/* Only display these contents when active (w/ video slider) */
.about .content.active,
.home .content.active {
    display: block;
    z-index: var(--layer-8);
    color: var(--foreground-color);
    display: flex;
    justify-content: center;
    flex-direction: column; /* stack items vertically */
}

.about .content h1 {
    position: relative;
    z-index: var(--layer-8);
    
    font-size: 6vw;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1vw;
    line-height: 6vw;/*6vw*/
    margin-bottom: 25px;
    
    color: var(--active-left-nav-color-dark);
}

.home .content h1 {
    font-size: 6vw;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1vw;
    line-height: 6vw;/*6vw*/
    margin-bottom: 25px;
}

.about .content h2 {
    margin-bottom: 25px;
    
    position: relative;
    z-index: var(--layer-8);
    color: var(--active-left-nav-color-dark);
}

.home .content h2 {
    margin-bottom: 25px;
}

.about .content h1 span,
.home .content h1 span {
    text-transform: none;
    font-size: 4vw;
    line-height:0vw;
    letter-spacing: 0.2vw;
}

.about .content p {
    margin-bottom: 35px;

    position: relative;
    z-index: var(--layer-8);
}

.home .content p {
    margin-bottom: 35px;
}

/*.home .content ul {*/
/*    position: relative;*/
/*    width: 100%;*/
/*}*/

/*.home .content ul li {*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    z-index: var(--layer-11);*/
/*    color: red;*/
/*}*/

/*.home .content section {*/
/*    position: relative;*/
/*    z-index: var(--layer-8);*/
/*}*/

/*.home .content.active ~ .home .content h1 {*/
/*    color: red;*/
/*}*/

/*.about .content {*/
/*    position: relative;*/
/*}*/








/* Shift everything down away from top menu */
#about-section-one {
/*    top: 60px;*/
/*    top: 400px;*/
    padding-top: 70px;
/*    padding: 70px 200px;*/
}

#about-section-1-text-div.active {
    display: block;
}

#about-section-1-text-div {
    display: none;
}

#about-div2 {
    max-height: 300px;
}

#about-div4 {
    max-height: 300px;
}

/*#about-div2:before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    background: linear-gradient(to top, var(--background-color), transparent);*/
/*    width: 100%;*/
/*    height: var(--section-fade-height);*/
/*    top: 0;*/
/*    left: 0;*/
/*}*/

.full-viewport {
    height: 100vh;
}

.background-video-div {
    /*TODO: not working:*/
/*    min-height: 500px;*/

    /* TODO: Not a solution: */
    overflow: hidden;
/*    height: 100vh;*/
    
    position: relative;
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    gap: 40px;*/
/*    background: #23252B;*/
/*    color: var(--foreground-color);*/
}

a.anchor:not(.first-anchor) {
    display: inline-block;
    /* So when we are directed to the anchor, the menu isn't over exactly where we want to go */
    margin: 0px 0px 42px 0px;
    
    /* hide*/
    color: rgba(0,0,0,0);
}

/*a.anchor:after {*/
/*    padding: 50px;*/
/*    margin: 50px;*/
/*}*/

.about .content a:not(.anchor),
.home .content a:not(.anchor) {
    background: var(--foreground-color);
    padding: 15px 35px;
    color: #1680AC;
    font-size: 1.1em;
    font-weight: 500;
    text-decoration: none;
    border-radius: 2px; /* rounded corner */
    margin: 0 auto 5px 0px;
}

.about .content a.register-btn,
.home .content a.register-btn {
    color: var(--foreground-color);
    background: blue;
    white-space: nowrap; /* don't wrap text when resizing window */
    margin-bottom: 0px;
}

.about .content a.inline-link,
.home .content a.inline-link {
    color: var(--foreground-color);
    background: none;
    padding: 5px 5px 5px 5px;
    font-size: 1.3em;
}

.about .content a.larger,
.home .content a.larger {
    font-size: 10vw;
    text-transform: uppercase;
    cursor: text;
}

.about .content h1.text-background,
.about .content h2.text-background,
.about .content p.text-background,
.about .content a.text-background,

.home .content h1.text-background,
.home .content h2.text-background,
.home .content p.text-background,
.home .content a.text-background {
    background: var(--text-hover-color);
/*    background: var(--text-background-color);*/
    border-radius: 2px; /* rounded corner */
    
    /* slight left & right padding when inside the background box */
    padding: 0 10px 0 10px;
}

.about .content h1:hover.text-background,
.about .content h2:hover.text-background,
.about .content p:hover.text-background,
.about .content a:hover.text-background
    
.home .content h1:hover.text-background,
.home .content h2:hover.text-background,
.home .content p:hover.text-background,
.home .content a:hover.text-background {
/*    background: var(--text-hover-color);*/
    background: var(--text-background-color);
}









.home .media-icons {
    z-index: var(--layer-8);
    position: absolute;
    right: 30px;
    display: flex;
    flex-direction: column;
    transition: 0.5s ease;
}

.home .media-icons a {
    color: var(--foreground-color);
    font-size: 1.6em;
    transition: 0.3s ease; /* transition w/ hover enlarge */
}

/* Media icons - vertical spacing */
.home .media-icons a:not(:last-child) {
    margin-bottom: 20px;
}

/* Enlarge media icons when hovering */
.home .media-icons a:hover {
    transform: scale(1.3);
}

.about video,
.home video {
    z-index: var(--layer-0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* use larger of two screen dimensions to enlarge to entire screen */
}

/* Shift page contents down, below the Menu (60px tall) */
/*.vertically-shift-for-menu {*/
/*    padding-top: 60px;*/
/*}*/



/* Lighten the color of the text, to make more visible over all the background color */
.footer-div.lighten-color .copyright p,
.footer-div.lighten-color .footer-text p,
.footer-div.lighten-color .list-inline a {
    color: rgba(255, 255, 255, 0.85);/*#fff;*/
}





































/* Slider Nav */
.slider-navigation {
    z-index: var(--layer-8);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -30px 0px 0px 0px; /* move into view */
}

/* white clickable dots for video background slider */
.slider-navigation .nav-btn {
    width: 12px;
    height: 12px;
    background: var(--foreground-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    transition: 0.3s ease;
}

/* Change color when clicked/active */
.slider-navigation .nav-btn.active {
    background: var(--background-color);
}

/* Horiz spacing */
.slider-navigation .nav-btn:not(:last-child) {
    margin-right: 20px;
}

/* Enlarge when hovering */
.slider-navigation .nav-btn:hover {
    transform: scale(1.2);
}



.video-clip-path {
    clip-path: circle(0% at 0 0%);
}

/* Videos */
.video-slide {
    z-index: var(--layer-0);
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0%;
/*    max-height: 90vh;*/
/*    max-width: 90vw;*/
}

.video-slide.section-video {
    height: 100vh;
    width: 100vw;
}

.video-slide.active {
    clip-path: circle(150% at 0 50%);
    opacity: 100%;
    transition: 2s ease;
    transition-property: clip-path, opacity;
/*    transition-property: opacity;*/
}












/*.small-viewport-only-visible {*/
/*    display: none;*/
/*}*/













/* React */

/* React: Small height settings */
@media (max-height: 260px) {
    .left-panel-nav {
        /* Remove from vision */
        top: 100vh;
    }
}

/* React: Medium height settings */
@media (max-height: 460px) {
    .left-panel-nav {
        /* N.B.: Really tried to get scroll working, but the element gets moved up out of view as viewport height is reduced. Alternative: reduce text size: */
        /*    overflow-y: scroll;*/
        /*    height: 100vh;*/
        
        font-size: 3.4vh;
    }
}

/* Middle width settings */
@media (max-width: 1075px) {    
    .about .content,
    .home .content {
        width: 100%;
    }
    
    .about .content h1,
    .home .content h1 {
/*        font-size: 7vw;*/
/*        font-weight: 900;*/
/*        text-transform: uppercase;*/
/*        letter-spacing: 1vw;*/
/*        line-height: 8vw;*/
/*        margin-bottom: 40px;*/
        font-size: 5vw;
        line-height: 6vw;
        margin-bottom: 30px;
    }

    .about .content h1 span,
    .home .content h1 span {
/*        font-size: 5vw;*/
        font-size: 3vw;
        line-height: 3vw;
    }
}

/* Phone width settings */
/*@media (max-width: 850px) {*/
@media (max-width: 750px) {
    .home .content {
        width: 80%;
    }
    
    .left-panel-nav {
        display: none;
    }
    
    section {
        padding: 100px 20px;
    }
    
    .about .media-icons,
    .home .media-icons {
        right: 15px;
    }
    
    .about section {
        padding: 10px 20px;
    }
}