/************************************************
This is the styling page for the YSDN Teaser
@font-face {
    font-family: "parabole";
    src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");
}
font-family: 'Parabole Regular', sans-serif;
font-family: 'Helvetica Neue Lt Std', sans-serif;
Ratio is 0.98 to 1

For Parabole
Font-size: #

For Helvetica
Font-size: calc(# * 0.98);

Instructional Notes
    This project will mainly use flexbox as centering is great in flexbox. Keep in mind that these display types will only effect direct children, although you can apply a flexbox again
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Main code for flex centering
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    
    However, for the patterns and the grids in the background, we will use CSS Grids. The main problem with CSS grids is that it doesnt work too well with content larger than the parent. Each individual grid block can contain a flex centering component for easier coding
    https://css-tricks.com/snippets/css/complete-guide-grid/

*************************************************/
/* Typography Initialization */
@font-face {
    font-family: "Parabole Regular";
    src: url("../fnts/Parabole-Regular.woff");
    src: url("../fnts/Parabole-Regular.woff2");
    src: url("../fnts/Parabole-Regular.otf");
}
@font-face {
    font-family: "Helvetica URL";
    
    
    src: local("HelveticaNeue.ttc");
    src: local("Helvetica.ttc");
    src: local("HelveticaNeue-light.ttc");
    src: url("../fnts/helvetica_edit/helvetica_light.svg");
    src: url("../fnts/helvetica_edit/helvetica_light.woff");
    src: url("../fnts/helvetica_edit/helvetica_light.woff2");
}
@import url('https://fonts.googleapis.com/css?family=Roboto:300&display=swap');
/* Main Layout and init resizing */
body {
    cursor: none;
}
html {
    margin: 0px;
    padding: 0px;
    --scrollbarBG: #00000000;
    --thumbBG: #fff;
    scroll-behavior: smooth;
}

body {
    margin: 0px;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: "Helvetica URL", "Helvetica Neue", "Helvetica Neue Light", "HelveticaNeue-Light", Helvetica, "open sans", sans-serif;
    font-weight: 300;
    font-size: 2em;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #fff #00000000;
}
/* Custom Scroll bar */

::-webkit-scrollbar {
    width: 10px;
    cursor: pointer;
}
::-webkit-scrollbar-track {
    background: #00000000;
}
::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 0px;
    border: none;
}

/* Main Typography */
/* I will figure out some logic that will alternate or randomize the parabole and helvetica font faces */
h1 { 
    text-transform: uppercase;
    font-size: 1.7em;
    font-weight: 300;
    letter-spacing: 5px;
}
h2 {
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 300;
}
p { 
    font-size: 14pt;
    font-weight: 300;
    text-transform: uppercase;
}
a {
    color: #fff;
    text-decoration: underline;
    font-size: 14pt;
    font-weight: 300;
    cursor: none;
    text-transform: uppercase;
}
/******************************************** Navigation
This is just the module
Most of these tags would be the same as the final page
*********************************************/
/* Positioning */
nav {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 100;
}
/* Pop Up Button */
.arrow {
    position: relative;
    margin: 30px;
    width: 80px;
    height: 80px;
    border-right: 10px solid #fff;
    border-top: 10px solid #fff;
    box-sizing: border-box;
    transition: transform .5s;
    pointer-events: all;
}
.arrow:hover {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
.arrow:before {
    content:'';
    position:absolute;
    width:100px;
    height:10px;
    background-color:white;
    top:-7px;
    right:0px;
    transform-origin: top right;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}
/* Module */
.module {
    background: #000;
    position: fixed;
    width: 450px;
    max-width: 100vw;
    padding: 40px;
    height: 100vH;
    border-left: 1px solid #fff;
    box-sizing: border-box;
    display: grid;
    justify-items: start;
    align-items: start;
    grid-template-rows: [top] 4fr [date] 1fr [mail] 1fr [bottom]1fr [compliance] 1fr;
    grid-template-columns: 1fr;
    z-index: 101;
    right: -450px;
    transition: right .6s ease-in-out  ;
}

/* Close Button */
.close {
    width: 40px;
    height: 40px;
    position: relative;
    flex: none;
    transition: transform .5s;
}

.close:hover {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
.close:before,.close:after{
    content:'';
    position:absolute;
    width:36px;
    height:2px;
    background-color:white;
    top:16px;
}
.close:before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    left:2px;
}
.close:after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg); 
    right:2px;
}
/* Title */
.title {
    display: flex;
    flex-direction: row;
    justify-content:space-between ;
    align-items: flex-start;
}
.title h2 {
    margin: 0;
    flex-grow: 1;
    margin-bottom: 30px;
}
/* date */
.module .date {
    width: 100%;
}
.date {
    padding-bottom: 40px;
    border-bottom: 1px solid #fff;
}
.date p {
    margin: 0;
    padding: 0;
}
.date > p:first-child {
    margin-bottom: 30px;
}
.module .compliant {
    align-self: end;
    margin: 0;
    padding: 0;
}
/* Social in module */
.social, .mail {
    display: inline-block;
    font-size: 14pt;
    margin-bottom: 5px;
    margin-right: 30px;
}
img.compliance {
    width: 100px;
    margin-right: 30px;
    display: inline-block;
}
.compliant {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    grid-row: compliance;
    
}

/* JS functions */
/* Opening pop up module */
.visible-grid {
    right: 0;
}

/*************************************
This is the end of the Navigation edits 
************************************/

/******************************************* Main Section Layout 
This is the controls for each Section.
********************************************/
.section {
    display: flex;
    visibility: hidden;
    height: 220vW;
    min-height: 200vW;
    max-width: 100%;
    pointer-events: none;
    padding: 0;
    margin: 0;
}
/* This is for the content inside each section */
.tagline {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vW; /* I don't really trust parents so 100% isn't the best option */
    height: 100vH;
    box-sizing: border-box; /* This is to make sure padding doesn't fuck shit up */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.tagline h1 {
    text-align: center;
    vertical-align: middle;
}
.scroll {
    position: absolute;
    display:flex;
    align-items: center;
    margin-top: 25vH;
    opacity: 1;
    transition: opacity 1s;
}
.scroll:after {
    content: "";
    margin:auto;
    left: 0;
    right: 0;
    bottom: 0px;
    top: 0;
    position:absolute;
    width: 100px;

    height: 100px;
    border:solid 1px #fff;
    border-radius: 50%;
    -webkit-animation: affordance 1.5s linear 0s 4 forwards ;
    animation: affordance 1.5s linear 0s 4 forwards ;
}
.no-opacity {
    opacity: 0;
}
.pattern {
    top: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Section One */
.pat-one .comp {
    position:absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:center;
    margin-top: 100vH;
}
.pat-one .comp h1 {
    font-size: 55vw;
    writing-mode: vertical-lr;
    text-orientation: upright;
    -webkit-writing-mode: vertical-lr;
    -webkit-text-orientation: upright;
    margin: 0;
    padding: 0;
    -webkit-text-stroke: .5px #fff;
    color: #ffffff00;
    font-weight: 300;
    /* letter-spacing: -7vW;
    -webkit-letter-spacing: -7vw; */
}
.pat-one .variable span {
    margin: -7vw ; 
}

/* Section Two */
.pat-two {
    position: fixed;
    width: 100vw;
    height: 100vh;
}
.pat-two .comp {
    position: absolute;
    width: 100%;
    height: 30vh;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
}
.pat-two .comp h1 {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 35vw;
    font-family: 'Parabole Regular', sans-serif;
    text-align: center;
    animation: motionX 20s linear 0s infinite forwards ;
    -webkit-animation: motionX 20s linear 0s infinite forwards ;
    -webkit-text-stroke: .5px #fff;
}
.pat-two .com-top {
    top:0;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}
.pat-two .com-top h1 {
    bottom: -20%;
}
.pat-two .com-bot {
    bottom: 0;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}
.pat-two .com-bot h1 {
    top: -20%;
}
.pat-two .com-mid {
    justify-content: center;
    height: 100%;
    color: #ffffff00;
    -webkit-text-stroke: .5px #fff;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}
/* Pattern Three */
.sec-three {
    position: relative;
}
.pat-three {
    position: absolute;
    display: flex;
    flex-direction: row;
    width: 100vW;
}
.pat-three .comp {
    display: flex;
    width: 25%;
    height: 100%;
    flex-direction: column;
    justify-content: start;
    align-items:center;
    overflow: visible;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}
.pat-three .comp h1 {
    font-size: 35vw;
    writing-mode: vertical-lr;
    text-orientation: upright; 
    -webkit-writing-mode: vertical-lr;
    -webkit-text-orientation: upright;
    text-align: center;
    overflow: visible;
    margin: 0;
    padding: 0;
    -webkit-text-stroke: .5px #fff;
    color: #ffffff00;
    animation: motionY 20s linear 0s infinite forwards ;
    -webkit-animation: motionY 20s linear 0s infinite forwards ;
}
.pat-three .com-left h1, .pat-three .com-right h1 {
    -webkit-text-stroke: none;
    color: #ffffff;
}
.pat-three .com-mleft, .pat-three .com-right {
    transform-origin: top center;
    transform: translateY(0) rotate(180deg);
    -webkit-transform: translateY(0) rotate(180deg);
    -moz-transform: translateY(0) rotate(180deg);
    -ms-transform: translateY(0) rotate(180deg);
    -o-transform: translateY(0) rotate(180deg);
}
.pat-three .variable span {
    margin:  -5vw ;
}

/* JS functions */
/* Opening each pattern */
.visible-show {
    visibility: visible !important;
    pointer-events: all !important;
}
/* Final Page Output */
.sec-final {
    width: 100%;
    display: flex;
    justify-content: center;
}
.pat-four {
    box-sizing: border-box;
    width: auto;
    padding: 40px;
    display: grid;
    justify-items: start;
    align-items: start;
    grid-template-rows: [date] 1fr [mid] 1fr [bottom] 1fr;
    grid-template-columns: [left] 1fr [right] 1fr;
    pointer-events: all !important;
    position: fixed;
    align-items:center;
    height: 100vH;
    clip-path: url(#mask);
}
.pat-four .social-content {
    grid-row: bottom;
    grid-column: left;
    justify-self: start;
    align-self: start;
}
.pat-four .social2 {
    grid-row: bottom;
    grid-column: right;
    justify-self: end;
    align-self: start;
    text-align: right;
}
.pat-four .social2 a.social {
    margin-right: 0;
}
.pat-four .social {
    display: inline-block;
}
.pat-four .college {
    grid-row: date;
    grid-column: left;
    align-self: end;
}
.pat-four .college p {
    margin-right: 0;
    align-self: end;
    margin-bottom: 0;
}
.pat-four .date {
    border-bottom: none;
    grid-row: date;
    padding-bottom: 0;
    grid-column: right;
    justify-self: end;
    align-self: end;
    text-align: right;
    
}
.pat-four .date p {
    padding: 0;
    display: inline-block;
    margin-left: 30px;
}
.pat-four .com-center {
    font-size: 9vw;
    grid-column: span 2;
    grid-row-start: mid;

    /* color: #ffffff00; */
    transform: translateX(0);
    margin: 0;
    z-index: -10;

}
.pat-four .location p {
    margin-right: 30px;
    display: inline-block;
}
.pat-four .location {
    align-self: start;
}
.pat-four .social-content p {
    display: inline-block;
}
.com-center h1 {
    margin: 0;  
    padding: 0;
    -webkit-text-stroke: .5px #fff;
    /* pointer-events: none; */
}
.com-center h1 span {
    display: inline-block; 
    transition: color .3s, transform .3s;
}
.com-center h1 span:hover {
    color: #000;
    transition: color 1s, transform 1s;
    transform: scale(.9) rotate(53deg);
}
/* .pat-four .comp h1{

    animation: motionX 20s linear 0s infinite forwards ;
    -webkit-animation: motionX 20s linear 0s infinite forwards ;
} */

/* Hover effects */
/* Gonna add some hover effects for the sick duds */
.pat-three .variable span, .pat-one .variable span {
    display: inline-block;
    transition: transform .4s;
}
.pat-three .variable span:hover {
    transform: scale(.9) rotate(3deg);
}
.pat-one .variable span:hover {
    transform: scale(.8) rotate(0deg);
}
.pat-two .com-mid .variable span {
    transition: color .5s ;
}
.pat-two .com-mid .variable span:hover {
    color: #fff;
}
.pat-two .com-top .variable span, .pat-two .com-bot .variable span {
    transition: color .5s ;
}
.pat-two .com-top .variable span:hover, .pat-two .com-bot .variable span:hover {
    color: #000;
}

/* back to top button  */
.tag-four {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    z-index: 100;
    opacity: 0;
    transition: opacity .3s;
}

/* Back to top button */
.tag-four .arrow2 {
    position: relative;
    margin: 30px;
    width: 80px;
    height: 80px;
    border-right: 10px solid #fff;
    border-top: 10px solid #fff;
    box-sizing: border-box;
    transition: transform .5s;
    pointer-events: all;
    transform: rotate(-45deg) scale(.5);
    -webkit-transform: rotate(-45deg) scale(.5);
    -moz-transform: rotate(-45deg) scale(.5);
    -ms-transform: rotate(-45deg) scale(.5);
    -o-transform: rotate(-45deg) scale(.5);
}
.tag-four .arrow2:hover {
    transform: rotate(-45deg) scale(1);
    -webkit-transform: rotate(-45deg) scale(1);
    -moz-transform: rotate(-45deg) scale(1);
    -ms-transform: rotate(-45deg) scale(1);
    -o-transform: rotate(-45deg) scale(1);
}
.arrow2:before {
    content:'';
    position:absolute;
    width:100px;
    height:10px;
    background-color:white;
    top:-7px;
    right:0px;
    transform-origin: top right;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}
/* Cursor testing */
.cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cursor--small {
    width: 90px;
    height: 90px;
    left: -45px;
    top: -45px;
    border-radius: 50%;
    z-index: 11000;
    background: #fff;
    mix-blend-mode: difference;
    transition: width .3s, height .3s, left .3s, top .3s;
    border: 1px solid #000;
}
p.cursor-text {
    position: absolute;
    font-size: .6em;
    color: #fff;
    mix-blend-mode: difference;
    /* top: 22.5px; */
    vertical-align: middle;
    margin: 0;
    padding: 0;
    transition: opacity .5s, font-size .5s;
}

/* This inverts the color of the screen */
.invert {
    position: fixed;
    width: 100vW;
    height:100vH;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    pointer-events: none;
    z-index: 200;
    mix-blend-mode: difference;
}
@-webkit-keyframes motionX {
    from {
        transform: translateX(-200px);
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        }
    to {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);
    }
}

  /* Standard syntax */
@keyframes motionX {
    from {
        transform: translateX(-200px);
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);        
    }
    to {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);
    }
}
@-webkit-keyframes motionY {
    from {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);        
    }
    to {
        transform: translateX(-200px);
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);   
    }
}

  /* Standard syntax */
@keyframes motionY {
    from {
        transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -moz-transform: translateY(200px);
        -ms-transform: translateY(200px);
        -o-transform: translateY(200px);  
    }
    to {
        transform: translateY(-200px);
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        -o-transform: translateY(-200px);  
    }
}
@-webkit-keyframes affordance {
    from {
        width: 0;
        height: 0;
        opacity: 1;
        }
    to {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

  /* Standard syntax */
@keyframes affordance {
    from {
        width: 0;
        height: 0;
        opacity: 1;
        }
    to {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}
@media only screen and (max-width: 500px) {
    p {
        font-size: 15pt;
    }
    a {
        font-size: 15pt;
    }
    /* Section 4 */
    .pat-four {
        box-sizing: border-box;
        width: auto;
        padding: 20px;
        display: grid;
        justify-items: start;
        align-items: start;
        grid-template-rows: [addtop] .5fr [date] .5fr [mid] 1fr [bottom] .5fr [addbottom] .5fr; 
        grid-template-columns: [left] 1fr [right] 1fr;
        pointer-events: all !important;
        position: fixed;
        align-items:center;
        height: 100vH;
        clip-path: url(#mask);
    }
    .pat-four .com-center h1 {
        font-size: 8vw;
    }
    .pat-four .social2 {
        grid-row: addbottom;
        grid-column: left;
        justify-self: start;
        align-self: start;
    }
    .pat-four .college {
        grid-row: addtop;
        grid-column: left;
        align-self: end;
    }
    .pat-four .date {
        border-bottom: none;
        grid-row: date;
        padding-bottom: 0;
        grid-column: left;
        justify-self: start;
        align-self: end;
    }
}


/* Decreases font size on screens smaller than 360px */
@media only screen and (max-width: 360px) {

        h1 {
            font-size: 1.2em;
        }     

    }