:root,
        [data-selected-theme="buttermilkbear"] {
            color-scheme: light dark;
            --main-color: #84e8ed;
            --wii-color: #34BEED;
            --secondary-color:#2ea0a6;
            --text-color: #797979;
            --border-color: #505050;
            --button-color: #bdbdbd;
            --highlightext-color: #33c6cd;
            --header-image: url('/images/header.gif');
            --aside-icon: url('/images/asideicon.jpg');
            --transwhite: rgba(255, 255, 255, 0);
            --white: rgb(255, 255, 255, 1);
            --mainbg: url('/images/mainbg.png');
            --diary-icon: url('/images/diary/diaryicon.jpg');
            --diary-doll: url('/images/diary/diarydoll.gif');

}

@font-face {
    font-family: 'DISKOPIA';
    src: url('/fonts/DISKOPIA2.0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

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

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

* {
    box-sizing: border-box;
    scrollbar-color: var(--secondary-color ) var(--main-color);
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

body {
    font-family:'Ms Ui Gothic';
    color:var(--text-color);
    display: flex;
    width: 80vw;
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: center/25% var(--mainbg);
    animation: barberpole 120s linear infinite;
}

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

.grid-container {
    display: grid;
    grid-template-columns: 15% 1fr 1fr;
    grid-template-areas:
        " aside header header "
        " aside time time "
        " aside nav nav "
        " aside main main "
        " footer footer footer ";
    grid-gap: 10px;
}

/* TESTING !! SHOULD BE DELETED BY END OF SITE */
header, main, .time, footer, aside {
    border: thick double var(--border-color);
    box-shadow: 3px 3px var(--border-color);
    padding:10px;
}

main, .time, footer, aside {
    background:var(--white);
}

main h1, main h2, main h3, main h4, main h5, main h6  {
    background: linear-gradient(to right,  var(--main-color) 0%,var(--transwhite) 100%);
    color:var(--secondary-color);
    font-family:'angels';
    margin-left:-10px;
    padding:3px;
    text-align:start;
}

aside h1, aside h2,
aside h3, aside h4, aside h5, aside h6 {
    background: linear-gradient(to right,  var(--main-color) 0%,var(--transwhite) 100%);
    color:var(--secondary-color);
    font-family:'moonpie';
    margin-left:-10px;
    padding:3px;
    text-align:start;
}

header {
    grid-area:header;
    background: var(--white) no-repeat center/100% var(--header-image);
    height:30vh;
}

aside {
    grid-area:aside;
    overflow:scroll;
    text-align:center;
    justify-content:center;
    height:120vh;
    background-image: linear-gradient(125deg, #e6e6e6 7.14%, #ffffff 7.14%, #ffffff 50%, #e6e6e6 50%, #e6e6e6 57.14%, #ffffff 57.14%, #ffffff 100%);
    background-size: 8.55px 12.20px;
}

.asideicon {
    background: no-repeat center/100% var(--aside-icon);
    height:8em;
    width:8em;
    margin-left:auto;
    margin-right:auto;
}

.asidebox {
    background:var(--white);
    padding:10px;
    border: thick double var(--border-color);
    box-shadow: 3px 3px var(--border-color);
}

main {
    grid-area:main;
    display:flex;
    height:70vh;
    overflow:scroll;
}

#guestbook {
    width:400vh;
}

footer {
    grid-area:footer;
    text-align:center;
    line-height:20px;
}

nav {
    grid-area:nav;
    padding:10px;
    text-align:center;
    height:max-content;
}

.time {
    grid-area:time;
    display:flex;
    height:max-content;
}

#statuscafe {
    padding: .5em;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

.hoverimg {
    transition:transform .5s;
}

.hoverimg:hover {
transform:scale(1.5);
}

/* HTML: <div class="tooltip">This is a Tooltip with a border and without border radius. Border and background have a solid coloration </div> */
.tooltip {
  color: var(--text-color);
  font-size: 0.75em;
  max-width: 28ch;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
}
.tooltip {
  /* triangle dimension */
  --a: 90deg; /* angle */
  --h: .75em; /* height */

  --p: 50%; /* triangle position (0%:left 100%:right) */
  --b: 2px; /* border width */

  padding: .125em;
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 0,
    var(--p) calc(-1*var(--h)),
    max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)) 0);
  border-image: fill 0//var(--h) 0
    conic-gradient(var(--border-color) 0 0); /* the border color */
  position: relative;
}
.tooltip:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--b) 0;
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) 0,
    var(--p) calc(-1*var(--h) - var(--b)*(1 - 1/sin(var(--a)/2))),
    max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) 0);
  border-image: fill 0/0 var(--b)/var(--h) 0
    conic-gradient(var(--white) 0 0); /* the background color */
}

.navlink {
color:var(--text-color);
font-family:'DISKOPIA';
background: linear-gradient(to bottom,  rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%);
border: thick double var(--border-color);
box-shadow: 3px 3px var(--border-color);
padding: 5px 20px;
font-size:.9em;
transition: font-size .5s;
}

.navlink:hover {
color:var(--highlightext-color);
background: linear-gradient(to bottom,  rgb(132, 232, 237) 0%,rgb(125,225,230) 50%,rgb(105,215,220) 51%,rgb(254,254,254) 100%);
border:thick double var(--secondary-color);
box-shadow: 0.125rem 0.125rem var(--secondary-color);
font-style:italic;
font-size:1.2em;
}

.navlink:active {
box-shadow:
    inset 5px 5px 6px var(--secondary-color),
    inset -5px -5px 6px var(--white);
}

audio {
    border-color: var(--secondary-color);
    background-color:var(--main-color);
    border-radius: 10px;
    mix-blend-mode:hard-light;
    width:15ch;
    margin:2px;
}

/*MARQUEE STUFF*/
/* This is what causes the actual smooth scrolling */
@keyframes scroll-r2l {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* Change the '10s' in this to change how fast it scrolls! */
.scroll-r2l {
  animation: scroll-r2l 10s linear infinite;
}

/* Left-to-Right */
@keyframes scroll-l2r {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

.scroll-l2r {
  animation: scroll-l2r 10s linear infinite;
}

/* 'Display: Flex' is extremely important to use here so all the items inside the marquee line up correctly, and the duplicated container lines up properly with the original */
.marquee {
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  box-sizing: unset;
  
  /*  You dont need a border or a set width on yours, but it makes the effect look better if the marquee width is smaller than the number of items in your marquee  */
}

.marquee-items {
  display: flex;
  flex-shrink: 0;
  height: 100%;
  font-size:2em;
  font-family:'DISKOPIA';
  color:var(--main-color);
  text-shadow: 3px 3px var(--secondary-color);
  min-width: 100%;
  position: relative;
}

/* Changes to this class will only affect the children
of the marquee-items, and not all of their descendants.
Make changes here if you want spaces in-between the
marquee items or other effects and styles!*/
.marquee-items > * {
  margin: 0;
}

.paused {
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused;
  animation-play-state:paused;
}


/*MAREUQQ END*/


@media only screen and (max-width: 900px) {
    .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        " header " 
        " time " 
        " nav " 
        " main " 
        " aside " 
        " footer " ;
}

body {
    width:90%;
    background: center/75% var(--mainbg);
}

aside {
    height:100%;
}

main {
    height:inherit;
    text-align:initial;
    justify-content: initial;
}

header {
    width:initial;
    height:10vh;
}

#guestbook {
    display:none;
}

.navlink {
    display:block;
}

audio {
    display:none;
}

.marquee {
    width:80vw;
}
   }