* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

 scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 0px;
}

html {
height: 100%;
overflow-y: hidden;
cursor: url('./mats-cursor.cur');
background-image: url('./mats-assets/cooldither.jpg');
background-size: cover;
}

body {
margin: 0 0;
height: 100%;
backdrop-filter: blur(0px);
color: gainsboro;
font-family: "Work Sans", sans-serif;
font-weight: 400;
font-style: normal;
text-align: left;
cursor: url('./mats-cursor.cur'), auto;
box-shadow: 0px 0px 30px inset lavenderblush;
}

@font-face {
    font-family: "Neutronica";
    src: 
      url("./Neutronica/NEG_____.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    

}

@keyframes float {
            0% {
                transform: translateY(0);
              
            }

            50% {
                transform: translateY(-20px);
            }

            100% {
                transform: translateY(0);
            }
        }

@keyframes little {
  50% {font-size: 18px;}
  100% {font-size: 16px;}
}

@keyframes slide {


0% {opacity: 100%; transform: translateX(0%);}
100% {filter: brightness(300%) grayscale(100%);}
100% {filter: brightness(250%); opacity: 100%; transform: translateX(0%);}

}

@keyframes fadein {

0% {opacity: 0%;}
100% {opacity: 100%;}


}
@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
        
    }
    to {
        transform: translateX(100%);
        opacity: 0;
        
    }
}

#page {
display: none;


}


nav a {
color: #c4a7be;
background-color: #42203D;
}

nav a:hover {
background-color: #190019;
color: #c4a7be;
}

nav a:visited {

color: #c4a7be;
background-color: #42203D;

}



.tamanotchi {

position: absolute;
top: 19.5%;
right: 49%;
transform: rotate(0deg);

}

.bow {
display: none;

}

.bottombar {
display: block;
padding: 11px;
position: fixed;
width: 100vw;
height: 5%;
bottom: 0%;
left: 0%;
border-top: 0.1px solid mistyrose;
outline: 0.5px solid black;
color: #42203D;
z-index: 2;
text-align: left;
background-image: linear-gradient(whitesmoke, rgba(220, 220, 220, 0.5));
box-shadow: 0px 0px 30px inset white;

}

.pagetitle {
position: fixed;
font-size: 80px;
color: #42203D;
-webkit-text-stroke: 0px #42203D;
font-family: "Neutronica";
top: 10%;
right: 32%;
text-shadow: 3px 3px white;

}

.video {
margin: auto;
left: -4%;
bottom: -1%;
display: block;
z-index: 0;
animation-duration: 3s;
animation-fill-mode: forwards;
filter: grayscale(100%);
opacity: 20%;
}

.pod {
position: fixed;
bottom: 16%;
right: 3%;
opacity: 88%;
border-radius: 10px;
padding: 1%;
border: 0.5px solid white;
outline: 0.5px solid black;
box-shadow: 0px 0px 30px inset #834b7c;
z-index: 2;

}

.exploremywebsite {

color: #c4a7be; 
background-color: #42203D;

}


.portraitblur {
backdrop-filter: blur(100px);
position: absolute;
left: 5%;
bottom: 7.5%;
height: 343px;
width: 257px;
}

.stas-portrait {

height: 343px;
width: 257px;
filter: url("#purplefilter");
opacity: 77%;

}

.mats-logo {
position: absolute;
width: 250px;
height: 252px;
right: 5%;
top: 8%;
filter: grayscale(22%);
box-shadow: 2px 2px 4px dimgray;
transform: rotate(2.5deg);
}

.doll {
position: absolute;
height: 222px;
width: 130px;
top: 20%;
left: 0%;
filter: grayscale(0%) brightness(100%);
z-index: 4;
}

.info-home-one {
position: absolute;
top: 3%;
left: 2%;
height: 20vw;
width: 20vw;
border-radius: 1%;
padding: 1%;
border: 0.5px solid white;
outline: 0.5px solid black;
background-image: linear-gradient(lavender, thistle);
box-shadow: 0px 0px 30px inset lavender;
text-align: justify;
color: #190019;
font-weight: normal;
border: 1px solid;
}

.info-home-two {
position: absolute;
top: 23%;
left: 7%;
height: 13vw;
width: 20vw;
border-radius: 1%;
padding: 1%;
border: 0.5px solid white;
outline: 0.5px solid black;
background-image: linear-gradient(lavender, whitesmoke);
box-shadow: 0px 0px 30px inset lavender;
text-align: justify;
color: #190019;
font-weight: normal;
border: 1px solid;
}

.navigation-bar {

position: absolute;
display: block;
right: 44%;
bottom: 9%;
width: 300px;
height: 450px;
background-image: url("./mats-assets/navpink9.png");
background-size: cover;
font-family: 'Work Sans';
animation-delay: 0s;
opacity: 100%;
z-index: 2;
filter: grayscale(20%) brightness(110%);
transform: rotate(0deg);

}

.star {
width: 525px;
height: 478px;
position: fixed;
left: 30%;
top: 5%;
}

.stars {
position: fixed;
width: 111px;
height: 111px;
left: 3%;
bottom: 24%;
z-index: 3;
transform: rotate(50deg);
filter: brightness(138%);
}


.navlinks {
padding: 6%;
display: block;
position: absolute;
top: 91px;
left: 54px;
color: #c4a7be;
z-index: 1;
width: 74%;
height: 63.2%;
font-family: 'DotGothic16';
font-size: 19px;
font-weight: 300;
filter: grayscale(0%);
backdrop-filter: opacity(40%);
text-shadow: 2px 2px 5px black;
}

.turn {
animation-name: little;
animation-duration: 1.1s;
animation-iteration-count: infinite;
animation-delay: 1.5s;
display: inline;
position: absolute;
top: 3px;
}

.blinkie {
position: absolute;
top: 41%;
right: 3%;
filter: saturate(20%) brightness(120%);

}

.notes-leaflet {

display: none;
}


/*

PAST EPISODES PAGE 
*/

.pastepisodes {



}


.pastep-leaflet {
border-radius: 0px; 
position: absolute; 
right: 3%; 
top: 16%; 
height: 60%; 
width: 50%; 
margin: auto; 
border: 1px solid #E6E6FA; 
border-radius: 20px; 
cursor: url('./mats-cursor.cur'), auto;"

}

#pastep-copy {
padding-left: 10px;
width: 40%;
font-size: 30px;
color: #190019;
}

#aboutstas-copy {

padding-left: 10px;

width: 40%;
word-wrap: break-word;
font-size: 30px;
color: #190019;
}


.pe-backlink {
display: none;

}


.testimonials {

font-size: 30px;
width: 100vw;
height: 100%;
position: absolute;
padding: 1%;
border-left: 1px solid;
border-right: 1px solid;
color: #190019;
text-shadow: 0px 0px 5px white;

background-color: rgba(230, 230, 250, 0.3);
}


/*

LOADER LOADER LOADER


*/

.purple-loader {
  width: 50px;
  height: 50px;
  display: grid;
  border:4px solid #0000;
  border-radius: 50%;
  border-color:#E4E4ED #0000;
  animation: s6 1s infinite linear;
position: absolute;
top: 3%;
left: 3%;
}
.purple-loader::before,
.purple-loader::after {    
  content:"";
  grid-area: 1/1;
  margin:2px;
  border:inherit;
  border-radius: 50%;
}
.purple-loader::before {
  border-color:#42203D #0000;
  animation:inherit; 
  animation-duration: .5s;
  animation-direction: reverse;
}
.purple-loader::after {
  margin:8px;
}

@keyframes s6 { 
  100%{transform: rotate(1turn)}
}


/*

colors 

cool lilacs: 
rgb(223, 212, 240);
rgb(199,177,196);

from Anastasia: 

warm dark purple: 
#42203D;

middle purple:
#834b7c;

deep dark purple:
#190019

deep pink:
#c61459;

lilac:
#c4a7be

cream: 
#fef8f4

filter: url("#purplefilter");

box-shadow: 0px 0px 30px inset white;

background-image: linear-gradient(whitesmoke, rgba(220, 220, 220, 0.5));

floating nav: animation: float 3s ease-in-out infinite;

*/