* {
  -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 {
background-image: url('./mats-assets/cooldither.jpg');
height: 100%;
overflow-y: hidden;
cursor: url('./mats-cursor.cur');
background-size: cover;
}

body {
margin: 0 0;
height: 100%;
background-color: transparent;
background-size: contain;
color: dimgray;
font-family: "Work Sans", sans-serif;
font-weight: 400;
font-style: normal;
text-align: left;
cursor: url('./mats-cursor.cur'), auto;
}

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

}


.butterfly {

position: absolute;
bottom: 10%;
left: 5%;
width: 220px;
height: 300px;
filter: brightness(140%) grayscale(66%);
}

.notes-leaflet {

position: absolute;
right: 3%;
bottom: 10%;
filter: grayscale(50%);
opacity: 100%;
transform: rotate(3deg);
width: 30%;
border-radius: 0px; 
height: 75%; 
margin: auto; 
border: 1px solid #190019; 
cursor: url('./mats-cursor.cur'), auto;
}


/* COPY OVER TO MAIN STYLESHEET */








@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;
    }
}




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: 25%;
right: 9%;


}

.byline {

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


}

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


.slide {

animation: slideOutLeft 1.5s ease-in forwards 1;
background-color: whitesmoke;
}

.one {
animation-delay: -0.5s;
}

.two {
animation-delay: 0s;
}

.three {
animation-delay: 0.5s;
}

.four {
animation-delay: 1s;
}

.five {
animation-delay: 1.5s;
}

.topbar {
display: block;
padding: 11px;
position: fixed;
width: 100vw;
height: 5%;
top: 0%;
left: 0%;
border: 0.5px solid white;
outline: 0.5px solid black;
background-image: linear-gradient(whitesmoke, rgba(220, 220, 220, 0.5));
box-shadow: 0px 0px 30px inset white;
color: dimgray;
z-index: 3;
}

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



.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: 8%;
right: 3%;
opacity: 60%;
filter: url("#purplefilter");
border-radius: 10px;
padding: 1%;
border: 0.5px solid white;
outline: 0.5px solid black;
background-image: linear-gradient(lavender, rgba(220, 220, 220, 0.5));
box-shadow: 0px 0px 30px inset lavender;
}

.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;
right: 1%;
top: 1%;
}

.stars {
width: 444px;
height: 444px;
position: fixed;
left: 1%;
bottom: 4%;
}



.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;
}

/*

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");

background-image: radial-gradient(ghostwhite, lavenderblush);

background-image: url('./mats-assets/lilac3.png');
background-image: linear-gradient(lavender, rgba(220, 220, 220, 0.5), white);
*/