/* IF I CAN HAVE AN IDENTITY CRISIS MY WEBSITE CAN DO THE SAME */

/* scrollbar */

::-webkit-scrollbar {
        width: 10px;
}

::-webkit-scrollbar-track {
    background: white; 
    box-shadow:inset 0 0 4px gray;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #FCC9FA, #C9EDFC);
    box-shadow:inset 0 0 4px white;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #E1C9FC, #FCF2C9);
}

/* fonts */

@font-face {
    font-family:'Pixel Operator';
    src:url(https://futurest4rter.neocities.org/fonts/PixelOperator.ttf);
}

/* animations */

@keyframes spin {
    0% {rotate:0deg;}
    100% {rotate:360deg;}
}
@keyframes loadingdots {
    0% {opacity:100%;}
    50% {opacity:0%;}
    100% {opacity:100%;}
}
@keyframes woobly {
    0% {bottom:-5px;}
    50% {bottom:0;}
    100% {bottom:-5px;}
}
@keyframes protosit {
    0% {scale:1 1;}
    50% {scale:1 0.98;}
    100% {scale:1 1;}
}
@keyframes marquee {
    0% {transform:translateX(100%);}
    100% {transform:translateX(-340%);}
}
@keyframes swinging {
    0% {rotate:-12deg;transform:translatex(10%);}
    50% {rotate:4deg;transform:translatex(-30%);}
    100% {rotate:-12deg;transform:translatex(10%);}
}

/* variables */

* {
    box-sizing:border-box;
}
:root {
--a-bg-color:white;
--a-text-color:#52002c;
--a-text-hover-color:#ca9fff;
--a-link-color:#207acf;
--a-link-hover-color:#68d5ff;
--global-border-radius:20px;
--drop-shadow-color:rgba(93, 98, 125, 0.39);
}

/* basic elements */

body {
    background-image:url(https://futurest4rter.neocities.org/images/backgrounds/protobg.gif); /*replace this at some point*/
    background-size:300px;
    margin:0;
}
p, h1, h2, h3, h4, h5, ul, li, a {
    font-family:"Pixel Operator";
    transition-duration:.1s;
    color:var(--a-text-color);
    margin:3px;
}
p {
    font-size:18px;
}
h5 {
    font-weight:500;
    font-size:14px;
}
a {
    color:var(--a-link-color);
    transition-duration:.1s;
}
a:hover {
    color:var(--a-link-hover-color);
    transition-duration:.1s;
}
.hovertext {
    transition-duration:.1s
}
.hovertext:hover {
    transition-duration:.1s;
    color:var(--a-text-hover-color);
}
hr {
    width:100%;
    height:0;
    border:none;
    border-bottom:3px dashed;
}
.dividerimg {
    text-align:center;
    width:100%;
    margin:auto;
    margin-top:10px;
    margin-bottom:10px;
}
.tinytext {
    font-size:12px;
    vertical-align:text-top;
}
.brightenhover {
    transition-duration:.1s;
}
.brightenhover:hover {
    filter:brightness(1.3);
    transition-duration:.1s;
}

/* structural elements */

.pagecontainera {
    background:linear-gradient(to top, transparent, white);
    height:100vh;
    width:100vw;
    display:flex;
    align-content:center;
    justify-content:center;
}
.pagecontainerb1 {
    position:relative;
    background:white;
    border-radius:205px 55px;
    margin:auto;
    display:flex;
    width:60vw;
    height:95vh;
    padding:5px;
    filter:drop-shadow(5px 5px 5px var(--drop-shadow-color));
}
.filler {
    width:11vw;
}
.pagecontainerb2 {
    height:100%;
    width:100%;
    padding:20px;
    margin:auto;
    display:flex;
    background: linear-gradient(to top, #FCC9FA, #C9EDFC, #E1C9FC, #FCF2C9);
    border-radius:200px 50px;
}
.pagecontainerc1 {
    background-image:url(https://futurest4rter.neocities.org/images/backgrounds/linez.png);
    background-size:400px;
    width:100%;
    height:100%;
    margin:auto;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border-radius:190px 40px;
    padding:10px;
}
.pagecontainerc2 {
    width:100%;
    height:100vh;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    background:none;
}
.pagecontainerd1 {
    border-radius:var(--global-border-radius);
    border:3px solid #C9EDFC;
    overflow-y:hidden;
    position:relative;
    display:block!important;
    margin-right:10px;
}
.pagecontainerd1, .pagecontainerd2, .pagecontainerd3 > p, h3 {
    margin-top:8px;
}
.pagecontainerd1, .pagecontainerd2, .pagecontainerd3 {
    height:98%;
    margin-top:0!important;
}
.pagecontainerd2 {
    border-radius:var(--global-border-radius);
    border:3px solid #FCC9FA;
    overflow-y:hidden;
}
.pagecontainerd3 {
    width:15%;
    display:flex;
    flex-direction:column;
    text-align:center;
}
.getinthere {
    width:100%;
    height:100%;
    padding:10px;
    overflow-y:auto;
}
.navareaa {
    position:absolute;
    top:210px;
    right:-160px;
    width:170px;
    height:270px;
    padding:5px;
    background:white;
    border-radius:60px 20px;
    filter:drop-shadow(2px 2px 6px var(--drop-shadow-color));
    z-index:200;
}
.navareab {
    background:linear-gradient(to top, #FCC9FA, #C9EDFC, #E1C9FC, #FCF2C9);
    width:100%;
    height:100%;
    padding:15px;
    border-radius:55px 15px;
}
.nav {
    width:100%;
    height:100%;
    border-radius:50px 10px;
    text-align:center;
    overflow-y:hidden;
    z-index:2000;
    background-clip:padding-box;
    background-image:url(https://futurest4rter.neocities.org/images/backgrounds/linez.png);
    background-size:400px;
}
.navnavnav {
    width:100%;
    height:100%;
    padding:5px;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
}
.navnavnav > p {
    font-size:18px;
    margin:1px;
}
.bigiframe {
    width:100%;
    height:100%;
    border-radius:10px 10px 180px 10px;
    border:none;
    margin-top:5px;
}
.colarea {
    display:flex;
    flex-direction:column;
    background-clip:padding-box;
    background-image:url(https://futurest4rter.neocities.org/images/backgrounds/linez.png);
    background-size:400px;
}
.miniareaa {
    position:absolute;
    background:white;
    border-radius:20px 60px;
    height:200px;
    width:170px;
    padding:5px;
    right:-7vw;
    bottom:0;
    text-align:center;
    filter:drop-shadow(-2px -2px 2px var(--drop-shadow-color));
    z-index:3000;
}
.miniareab {
    background: linear-gradient(to top, #FCC9FA, #C9EDFC, #E1C9FC, #FCF2C9);
    border-radius:18px 58px;
    height:100%;
    width:100%;
    padding:15px;
}
.miniareac {
    background-image:url(https://futurest4rter.neocities.org/images/backgrounds/linez.png);
    background-size:400px;
    border-radius:20px 40px;
    width:100%;
    height:100%;
    overflow-y:hidden;
    position:relative;
}
.miniaread {
    width:100%;
    height:100%;
    padding:10px;
    overflow-y:auto;
}
.banner {
    width:100%;
    height:150px;
    background-image:url(https://futurest4rter.neocities.org/images/graphics/pastelbanner1.jpg); /*probably replace this for a drawing at some point*/
    background-size:cover;
    background-position:bottom right;
    border-radius:220px 0 50px 0;
    position:relative;
    filter:drop-shadow(3px 3px 2px var(--drop-shadow-color));
    margin-bottom:10px;
    z-index:2;
    image-rendering:auto;
}
.graphicsmarquee {
    flex-direction:row;
    width:100%;
    height:28px;
    margin-bottom:0;
    z-index:1;
    border-radius:10px;
    overflow:hidden;
}
.innermarquee {
    display:flex;
    flex-direction:row;
    width:100%;
    height:20px;
    animation-name:marquee;
    animation-duration:40s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}
.innermarquee > img {
    height:20px;
    width:auto;
}
.innermarquee:hover {
    animation-play-state:paused;
}
.dotanimation {
    animation-name:loadingdots;
    animation-duration:1.5s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
}
.bannerheader {
    position:absolute;
    bottom:-5px;
    left:140px;
    font-size:50px;
    animation-name:woobly;
    animation-duration:5s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
}
.clockholder {
    width:auto;
    height:auto;
    position:absolute;
    top:5px;
    left:140px;
}
.webringarea {
    display:block;
    width:100%;
    height:100%;
    text-align:center;
    image-rendering:auto;
}
.linkbuttons {
    width:100%;
    height:25px;
    display:flex;
    align-content:center;
    justify-content:center;
    border:1px solid;
    border-radius:5px;
    padding-left:5px;
    padding-right:5px;
    margin-left:5px;
    margin-right:5px;
    font-size:18px;
}
.pink {
    background: #FCC9FA;
background: linear-gradient(0deg, rgba(252, 201, 250, 1) 0%, #ffadf3 49%, rgba(252, 201, 250, 1) 51%, rgba(255, 255, 255, 1) 100%);
border-color:#ffadf3;
}
.blue {
    background: #C9EDFC;
background: linear-gradient(0deg, rgba(201, 237, 252, 1) 0%, #8cd5ff 49%, rgba(201, 237, 252, 1) 51%, rgba(255, 255, 255, 1) 100%);
border-color:#8cd5ff;
}
.purple {
    background: #E1C9FC;
background: linear-gradient(0deg, rgba(225, 201, 252, 1) 0%, #b4a1ff 49%, rgba(225, 201, 252, 1) 51%, rgba(255, 255, 255, 1) 100%);
border-color:#b4a1ff;
}
.yellow {
    background: #FCF2C9;
background: linear-gradient(0deg, rgba(252, 242, 201, 1) 0%, rgba(255, 220, 145, 1) 49%, rgba(252, 242, 201, 1) 51%, rgba(255, 255, 255, 1) 100%);
border-color:#FFDC91;
}
.linkbuttons:hover {
    filter:brightness(1.05);
}
.linkbuttonsarea {
    width:100%;
    height:25px;
    display:flex;
    justify-content:space-around;
    margin-top:10px;
    margin-bottom:10px;
}
/* fun elements */

.webclap {
    transition-duration:.1s;
}
.webclap:hover {
    transform:scale(1.1);
    transition-duration:.1s;
}
.washitape1 {
    height:100px;
    width:auto;
    position:absolute;
    top:0;
    left:-100px;
    rotate:-50deg;
    z-index:4;
    image-rendering:auto;
}
.musicnote1 {
    height:25px;
    width:auto;
    position:absolute;
    bottom:60px;
    left:90px;
    image-rendering:pixelated;
    z-index:5;
}
.musicnote2 {
    height:25px;
    width:auto;
    position:absolute;
    bottom:72px;
    left:120px;
    image-rendering:pixelated;
    z-index:5;
}
.protosit {
    height:200px;
    width:auto;
    position:absolute;
    bottom:-40px;
    left:-10px;
    image-rendering:auto;
    filter:drop-shadow(2px 6px 4px var(--drop-shadow-color));
    z-index:143;
    animation-name:protosit;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-timing-function:step-end;
}
.stars3 {
    height:100px;
    width:auto;
    position:absolute;
    bottom:160px;
    left:-75px;
    rotate:-15deg;
    image-rendering:pixelated;
    filter:drop-shadow(2px 2px 4px var(--drop-shadow-color));
}
.stars4 {
    height:160px;
    width:auto;
    position:absolute;
    top:40px;
    right:-60px;
    rotate:45deg;
    image-rendering:pixelated;
    z-index:5;
    filter:drop-shadow(2px 2px 4px var(--drop-shadow-color));
}
.protoimg1 {
    height:230px;
    width:auto;
    position:absolute;
    bottom:0;
    left:-60px;
    image-rendering:pixelated;
    filter:drop-shadow(2px 2px 4px var(--drop-shadow-color));
    transition-duration:.1s;
}
.protoimg1:hover {
    filter:opacity(.4);
    transform:scale(0.9);
    transition-duration:.1s;
}
.mikudisc {
    height:120px;
    width:auto;
    position:absolute;
    top:0;
    right:0;
    animation-name:spin;
    animation-iteration-count:infinite;
    animation-duration:5s;
    animation-timing-function:linear;
    image-rendering:pixelated;
    z-index:5;
    filter:drop-shadow(2px 2px 4px var(--drop-shadow-color));
}
.sideborderleft {
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:auto;
    filter:drop-shadow(2px 2px 4px var(--drop-shadow-color));
    z-index:1000;
}
.sideborderright {
    position:fixed;
    right:0;
    top:0;
    height:100%;
    width:auto;
    transform:rotateY(180deg);
    filter:drop-shadow(2px 2px 4px var(--drop-shadow-color));
    z-index:1000;
}
.prototamagotchi {
    height:120px;
    width:auto;
    position:absolute;
    bottom:0;
    left:-6vw;
    image-rendering:auto;
    filter:drop-shadow(3px 3px 2px var(--drop-shadow-color));
}
.prototamagotchi:hover {
    transform:rotate(10deg);
}
.thoughtbubble {
    position:absolute;
    height:200px;
    width:250px;
    top:-10px;
    right:-270px;
    z-index:500;
    background-image:url(https://futurest4rter.neocities.org/images/graphics/ezgif-3092b34c37b8ee.gif);
    background-size:contain;
    padding:45px;
    overflow-y:clip;
}
.pastelstarstill {
    position:absolute;
    height:120px;
    bottom:100px;
    right:50px;
    rotate:-35deg;
    pointer-events:none;
}
.navimg {
    height:16px;
    width:auto;
    vertical-align:text-bottom;
}
.holostars {
    position:absolute;
    height:300px;
    width:auto;
    z-index:1;
    bottom:0;
    right:-240px;
}
.hostedtext {
    position:absolute;
    bottom:4px;
    left:95px;
}
.protopeak {
    height:100px;
    position:fixed;
    bottom:0;
    right:0;
    z-index:100000;
    transition-duration:.1s;
}
.protopeak:hover {
    bottom:-15px;
    transition-duration:.1s;
}
.keychain {
    position:absolute;
    width:50px;
    height:auto;
    bottom:60px;
    right:-160px;
    z-index:1;
    animation-name:swinging;
    animation-duration:5s;
    animation-iteration-count:infinite;
    animation-timing-function:cubic-bezier(0.455, 0.03, 0.515, 0.955);
    image-rendering:auto;
}
#statuscafe {
    font-family:'Pixel Operator';
    font-size:14px;
}