/*reset page to 0,0*/
 @import url('https://fonts.googleapis.com/css2?family=Raleway:ital@0;1&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,100..900,0..100,0..1&display=block");
 @import url('https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=block');

 @font-face {
     font-family: 'movementregular';
     src: url(https://explorevari.com/fontKit/movementv-webfont.woff) format('woff');
     src: url(https://explorevari.com/fontKit/movementv-webfont.woff2) format('woff2');
     src: url(https://explorevari.com/fontKit/movementv-webfont.ttf) format('ttf');
     font-weight: normal;
 }
 @font-face {
    font-family: 'Recursive';
    font-style: normal;
    font-weight: 300 900;
}

 *{
    margin:0;
    padding:0;
}

:root{
    --text-weight: 100;
    --weightAxis: 100;
    --widthAxis: 75;
    --italicAxis: 0;
    --slantAxis: -15;
    --opszAxis: 9;
    --cstmAxis: 0;
}
/*getting base font sizes*/
html{
    font-size: 16px;
}
@media screen and (min-width: 25em){
    html { font-size: calc( 16px * (100vw - 400px) / (400) ); }
}
/* Safari <8 and IE <11 */
@media screen and (min-width: 50em){
    html { font-size: calc( 16px * (100vw - 400px) / (400) ); }
}
body{
    font-family: 'Recursive', monospace;
    font-weight: lighter;
    cursor: url("../assets/grayscaleCursor.png") 12 12,  auto;
    background-color: black;
    color:white;
}
a, button, .range-slider_range{
    cursor: url("../assets/hoverCursor.png") 12 12, auto;
}
/*nav stuff*/
.about a, .learn a, .portfolio a, .explore a{
    text-decoration:none;
    color:white;
}
.about{
    position: absolute;
    top: 0;
    left: 0;
    margin: 20px 0 20px 30px;
    z-index:1;
}
.learn{
    position: absolute;
    top: 0;
    left: 75px;
    margin: 20px 0 20px 30px;
    z-index:1;
}
.explore{
    position: absolute;
    top: 0;
    right: 115px;
    margin: 20px 30px 20px 0;
    z-index:1;
}
.portfolio{
    position: absolute;
    top: 0;
    right: 0;
    margin: 20px 30px 20px 0;
    z-index:1;
}
h1{
    font-family: 'Recursive', serif;
    font-variation-settings: 'wght' 100, 'CRSV' 1;
}
/*bottom nav to scroll through slides*/
#my-nav{
    position:absolute;
    font-style: normal;
    font-weight: 400;
    bottom: 125px;
    right:125px;
    z-index: 1;
    font-size: 1em;
    list-style: none;
}
 #my-nav li a{
     text-decoration:none;
     color: white;
 }

/*intro slider*/
.container {
    margin: -5% auto 0 auto;
    max-width: 90rem;
}

.varDemo {
    font-size: 10em;
    font-weight: var(--text-weight);
    font-variation-settings: "wght" var(--text-weight), "CASL" 1;
    text-align:center;
}
/*slide 3*/
.wghtDemo{
    font-size: 10em;
    font-weight: var(--weightAxis);
    font-variation-settings: "wght" var(--weightAxis);
    text-align:center;
}
/*slide 4*/
.wdthDemo{
    font-family: 'Trispace', serif;
    font-weight: lighter;
    font-size: 10em;
    font-variation-settings: "wdth" var(--widthAxis);
    text-align:center;
}
/*slide 5*/
#italSwitch{
    font-family: 'Playfair Display', sans-serif;
    font-size: 10em;
    /*font-variation-settings: "ital" var(--italicAxis);*/
    text-align:center;
}
 /* The switch - the box around the slider */
 .switch {
     position: relative;
     display: inline-block;
     left:80%;
     width: 60px;
     height: 34px;
 }

 /* Hide default HTML checkbox */
 .switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 /* The slider */
 .sliderItal {
     position: absolute;
     cursor: url("../assets/hoverCursor.png") 12 12, auto;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to right, gray 0%, black 100%);
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 34px;
 }

 .sliderItal:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 50%;
 }

 input:checked + .sliderItal {
     font-style: italic;
 }

 input:checked + .sliderItal:before {
     -webkit-transform: translateX(26px);
     -ms-transform: translateX(26px);
     transform: translateX(26px);
 }
 .on
 {
     display: none;
     color: white;
     position: absolute;
     transform: translate(-50%,-50%);
     top: 50%;
     left: 25%;
     font-size: 10px;
     font-family: 'Recursive', monospace;
 }
 .off
 {
     color: white;
     position: absolute;
     transform: translate(-50%,-50%);
     top: 50%;
     left: 75%;
     font-size: 10px;
     font-family: 'Recursive', monospace;
 }

 input:checked+ .sliderItal .on
 {display: block;}

 input:checked + .sliderItal .off
 {display: none;}
/*slide 6*/
.slntDemo{
    font-family: 'Recursive', sans-serif;
    font-size: 10em;
    font-variation-settings: "slnt" var(--slantAxis);
    text-align:center;
}
/*slide 7*/
.opszDemo{
    font-family: 'Fraunces', serif;
    font-size: 10em;
    font-weight:100;
    font-variation-settings: "opsz" var(--opszAxis);
    text-align:center;
}
/*slide 8*/
.cstmDemo{
    font-family: 'Fraunces', serif;
    font-size: 10em;
    font-variation-settings: "SOFT" var(--cstmAxis);
    text-align:center;
}
.beyondAxes{
    font-size: 10em;
    text-align:center;
}
#varPara, #wghtPara, #wdthPara, #italPara, #slntPara, #opszPara, #cstmPara, #beyondPara{
    position:relative;
    display:inline-block;
    text-align:left;
    width:26%;
    padding-left:9em;
}

#beyondPara{
    margin-top: 100px;
    width: 25%;
    padding-left: 22%;
}

.output{
    display:none;
}

/*slider stuff that's working perfectly below*/
.range-slider, .wghtSlider, .wdthSlider, .italSlider, .slntSlider, .opszSlider, .cstmSlider {
    position:relative;
    margin-top: 40px;
}
.range-slider__range, .wghtSlider_range, .wdthSlider_range, .italSlider_range, .slntSlider_range, .opszSlider_range, .cstmSlider_range {
    -webkit-appearance: none;
    width: 10rem;
    height: 20px;
    border-radius: 10px;
    background: #d7dcdf;
    background: linear-gradient(to right, gray 0%, black 60%, black 100%);
    outline: none;
    padding: 0;
    margin: 0 0 0 80%;
}
.range-slider__range::-webkit-slider-thumb, .wghtSlider_range::-webkit-slider-thumb, .wdthSlider_range::-webkit-slider-thumb,
.italSlider_range::-webkit-slider-thumb, .slntSlider_range::-webkit-slider-thumb, .opszSlider_range::-webkit-slider-thumb, .cstmSlider_range::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    -webkit-transition: background 0.15s ease-in-out;
    transition: background 0.15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover, .wghtSlider_range::-webkit-slider-thumb:hover, .wdthSlider_range::-webkit-slider-thumb:hover,
.italSlider_range::-webkit-slider-thumb:hover, .slntSlider_range::-webkit-slider-thumb:hover, .opszSlider_range::-webkit-slider-thumb:hover, .cstmSlider_range::-webkit-slider-thumb:hover{
    background: white;
}
.range-slider__range:active::-webkit-slider-thumb, .wghtSlider_range:active::-webkit-slider-thumb, .wdthSlider_range:active::-webkit-slider-thumb,
.italSlider_range:active::-webkit-slider-thumb, .slntSlider_range:active::-webkit-slider-thumb, .opszSlider_range:active::-webkit-slider-thumb, .cstmSlider_range:active::-webkit-slider-thumb {
    background: white;
}
.range-slider__range::-moz-range-thumb, .wghtSlider_range::-moz-range-thumb, .wdthSlider_range::-moz-range-thumb,
.italSlider_range::-moz-range-thumb, .slntSlider_range::-moz-range-thumb, .opszSlider_range::-moz-range-thumb, .cstmSlider_range::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 50%;
    background: gray;
    cursor: url("../assets/hoverCursor.png") 12 12, auto;
    -moz-transition: background 0.15s ease-in-out;
    transition: background 0.15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover, .wghtSlider_range::-moz-range-thumb:hover, .wdthSlider_range::-moz-range-thumb:hover,
.italSlider_range::-moz-range-thumb:hover, .slntSlider_range::-moz-range-thumb:hover, .opszSlider_range::-moz-range-thumb:hover, .cstmSlider_range::-moz-range-thumb:hover {
    background: white;
}
.range-slider__range:active::-moz-range-thumb, .wghtSlider_range:active::-moz-range-thumb, .wdthSlider_range:active::-moz-range-thumb,
.italSlider_range:active::-moz-range-thumb, .slntSlider_range:active::-moz-range-thumb, .opszSlider_range:active::-moz-range-thumb, .cstmSlider_range:active::-moz-range-thumb{
    background: white;
}
::-moz-range-track {
    background: #d7dcdf;
    background: linear-gradient(to right, gray 0%, black 60%, black 100%);
    border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
    border: 0;
}

/* axes slide */
.section2 img{
    max-width: 40vw;
    margin-left: 5vw;
}

#axesDiv{
    display: grid;
    align-items:start;
    grid-template-columns: repeat(auto-fit, minmax(425px, 1fr));
}
#axesDiv p{
    width: 55%;
    margin-top:6%;
    margin-left: 15%;
}

@media screen and (max-width: 1480px) {
    .varDemo, .wghtDemo, .wdthDemo, .italDemo, .slntDemo, .opszDemo, .cstmDemo, .beyondAxes{
        font-size: 8em;
    }
    #varPara, #wghtPara, #wdthPara, #italPara, #slntPara, #opszPara, #cstmPara, #beyondPara{
        padding-left: 14em;
    }
    .section2 img{
        max-width: 45vw;
    }
}
@media screen and (max-width: 1200px){
    .varDemo, .wghtDemo, .wdthDemo, .italDemo, .slntDemo, .opszDemo, .cstmDemo, .beyondAxes{
        font-size: 6em;
    }
    #varPara, #wghtPara, #wdthPara, #italPara, #slntPara, #opszPara, #cstmPara, #beyondPara{
        padding-left: 14em;
    }
    .range-slider__range, .wdthSlider_range, .wghtSlider_range, .italSlider_range, .slntSlider_range, .opszSlider_range, .cstmSlider_range {
        margin: 0 0 0 70%;
    }
}
@media screen and (max-width: 1000px){
    #varPara, #wghtPara, #wdthPara, #italPara, #slntPara, #opszPara, #cstmPara, #beyondPara{
        width: 35%;
        padding-left: 10em;
    }
    #axesDiv p{
        width: 65%;
        margin-top:6%;
    }
}
@media screen and (max-width: 850px){
    .varDemo, .wghtDemo, .wghtDemo, .italDemo, .slntDemo, .opszDemo, .cstmDemo, .beyondAxes{
        font-size: 5em;
    }
    #varPara, #wghtPara, #wdthPara, #italPara, #slntPara, #opszPara, #cstmPara, #beyondPara{
        width:45%;
        margin-top:50px;
        padding-left: 6em;
    }
    #my-nav{
        display:none;
    }
    #axesDiv img{
        margin-left: 27.5%;
    }
    #axesDiv p{
        width:75%;
        margin-left: 12.5%;
    }
}

@media screen and (max-width: 650px){
    .varDemo, .wghtDemo, .wdthDemo, .italDemo, .slntDemo, .opszDemo, .cstmDemo, .beyondAxes{
        font-size:4em;
    }
}

@media screen and (max-width: 400px){
    #varPara, #wghtPara, #wdthPara, #italPara, #slntPara, #opszPara, #cstmPara{
        margin-top:50px;
    }
}