:root,
        [data-selected-theme="tomodachi"] {
            color-scheme:light dark;
            --main-color:#f79000;
            --secondary-color:#ffbf00;
            --mainfont: 'dreamlife';
            --namefont:'delicious';
            --headerfont: 'delicious';
            --personalityfont:'gomarice';
            --fontcolor:#252530;
            --white: #fefae6;
            --transgrey: #73c5ffa3;
            --lovesred: #fc6672;
            --lovesredtext:#9e121d;
            --spousetext:#ff3881;
            --spouse:#ffcfc7;
            --friend:#ffebb4;
            --friendtext: #ffc859;
            --sibling: #ffe7d0;
            --siblingtext: #f7cc88;
            --acquaintance:#b9ffcd;
            --acquaintancetext: #28d286;
            --considerate: #f2c235;
            --outgoing: #e73544;
            --reserved: #2aa54b;
            --ambitious: #2f7ce7;
            --charmer: #fcabc2;
            --sweetie: #ffe5ae;
            --buddy:#ffde7f;
            --cheerleader: #fef28e;
            --daydreamer: #fecc85;
            --go-getter: #ef6f74;
            --merrymaker:#ff988a;
            --dynamo:#ff8364;
            --strategist:#a1e957;
            --perfectionist:#09d5b3;
            --observer: #3aa79f;
            --thinker: #27bc6b;
            --achiever: #97e6f9;
            --visionary: #76b9f3;
            --rogue:#7d8bfb;
            --maverick: #a991fa;
        }

@font-face {
    font-family: 'billo';
    src: url('/media/fonts/BILLO___.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gomarice';
    src: url('/media/fonts/gomarice_round_pop.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'alba';
    src: url('/media/fonts/ALBA____.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'delicious';
    src: url('/media/fonts/Delicious.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fruity juice';
    src: url('/media/fonts/Fruity\ Juice.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dreamlife';
    src: url('/media/fonts/DreamLife-V1.0.0_by_MaxiGamer.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
* {
    box-sizing: border-box;
    scrollbar-color: var(--main-color ) var(--considerate);
    scrollbar-width: thin;
    scroll-behavior: smooth;
}
body {
    background-image: url(/media/images/tomodachilife/patternbg.png);
    animation: barberpole 300s linear infinite;
    font-family:var(--mainfont);
    display:flex;
    position: relative;
    width:100%;
    
    height:auto;
    margin-left: auto;
    margin-right: auto;
    color:var(--fontcolor);
}
.loadingScreen {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100vh;
  background:var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes barberpole {
  100% {
    background-position: -100% -100%;
}
}

.grid-container {
    display: grid;
    grid-template-areas:
        " header header header "
        " nav nav nav "
        " main main main "
        " footer footer footer ";
}
    
header {
    grid-area:header;
    border-bottom: 5px solid var(--main-color);
    background-color:var(--friend);
    width:100%;
    font-family:var(--mainfont);
    padding:0.5% 2% 0% 1%;
    margin-top:-12px;
    position:sticky;
    top:0;
    z-index:99;
    box-shadow: 0px 3px 5px var(--main-color);
    display:flex;
    justify-content: space-between;
}

header h1 {
    font-family:var(--headerfont);
    color:var(--main-color);
    text-shadow: -3px 3px var(--white);
}

.headerlogo {
    display:flex;
    align-items:center;
    gap:1em;
}
header a {
    text-decoration:none;
}
.logo {
    height:3em;
    width:auto;
    animation : rubberBand 1s both infinite;
}
@keyframes rubberBand {
    0% { transform: scale3d(1, 1, 1) }
    30% { transform: scale3d(1.25, .75, 1) }
    40% { transform: scale3d(0.75, 1.25, 1) }
    50% { transform: scale3d(1.15, .85, 1) }
    65% { transform: scale3d(.95, 1.05, 1) }
    75% { transform: scale3d(1.05, .95, 1) }
    100% { transform: scale3d(1, 1, 1)}
}

footer {
    grid-area:footer;
    border-top: 5px solid var(--main-color);
    background-color:var(--friend);
    box-shadow: 0px -3px 5px var(--main-color);
    margin-bottom:-12px;
    text-align:center;
    padding:15px;
    
}
.islandvibe {
    color:var(--ambitious);
}
nav {
    grid-area:nav;
    text-align:center;
    margin-top:20px;
}

.navlink {
    margin:5px;
    padding:10px 20px;
    background-color:var(--main-color);
    color:var(--white);
    border: 5px solid var(--secondary-color);
    border-radius:30px 30px 30px 30px;
    font-size:1.2em;
    transition: all .5s;
}

.navlink:hover {
color:var(--main-color);
background-color:var(--secondary-color);
border:5px solid var(--main-color);
box-shadow: 0.5rem 0.5rem var(--secondary-color);
font-style:italic;
font-size:1.4em;
}

.navlink:active {
box-shadow:
    inset 5px 5px 6px var(--white),
    inset -5px -5px 6px var(--main-color);
}
@media only screen and (max-width: 900px) {
    .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        " header "  
        " nav " 
        " main "
        " footer " ;
}

body {
    width:100%;
    background: url(/media/images/tomodachilife/patternbg.png);
    animation:none;
}
main {
    display:block;
}

article {
    width:95%;
    max-width:initial;
    display:inline-block;
    flex:none;
    height:fit-content;
}
article:hover {
    transform:none;
    box-shadow:none;
    animation:none;
}
.profilecard {
    width:100%;
}

.miipic {
    margin-left:initial;
    margin-top:10px;
}

.islandinfo {
    display:none;
}

}