body { /* defines everything in your page */
      background-color:#ffffff;
      background-image:url(); /* if you don't want a plain background, you can paste the image address of an image inside the parentheses. */
      color:#000000; /* text color */
        max-height: 100%;
    }
    
    #contain { /* holds everything on your page and organizes it into neat little rows and columns! the hash mark (or pound) means id, which can be used only once per page */
      display: grid;
      grid-template-areas: 
        "top top top"
        "left middle right"
        "bottom bottom bottom";
      grid-template-columns: 20% 1fr 25%;
      grid-template-rows: auto 1fr auto;
      height: 100%;
      padding:2px;
      margin-inline:auto; /* horizontally centers the container */
    }
    
   #clock {
   color: #941515;
	font-weight: bold;
    mix-blend-mode: screen;
	font-size: 0.9rem;
    display: flex;
    justify-content: center; /* centers horizontally */
    align-items: flex-start; /* change to 'center' if you want vertical center */
}

    #top, #left, #middle, #right, #bottom {
        padding:1px;
} /* you can style multiple elements at once */
    
    #top {
        background-image:url('/images/pics/aiko.jpeg');
        background-size: cover;
        background-position: center 100rem;
        height: 200px;
        border:1px solid white; 
        
}
    #top h1 {
     text-align: right;
    font-weight: 960;
    letter-spacing: 0.05rem;
	font-size: 5rem;
    color: #941515;
    padding: 2.4rem;
    background-color: rgba(0, 0, 0, 0);
    mix-blend-mode: multiply;
}
    
    #bottom {
      grid-area: bottom;
      text-align: center;
      padding: 0.5rem;
    }
    
    #left, #middle, #right {
        overflow:auto; /* overflow:auto means if the content goes past, say, 2fr, it'll just scroll instead of keep going off the page */
}
    
    #top {
        grid-area:top; /* this makes it correspond to the grid-template-areas we have above */
}
    
    #left {
      padding: 0.3rem;
      grid-area: left;
      overflow-y: auto;
      background: #fff;
      border-right: 1px solid #000000; /* notice how all styles end with semicolons? */
}
    
    #middle {
        padding: 0.5rem;
        grid-area:middle; 
        border:1px solid #000000;
}
    
    #right {
      grid-area: right;
      padding: 0.3rem;
      overflow-y: auto;
      border-left: 1px solid #000000;
}
    #sitemap ul {
       padding: 0;
        margin-left: 1.2rem;
}

    .leftsidebar {
      box-sizing: border-box;
    }
    
    .leftsidebar p, li {
      font-size: 0.8rem;
      margin: 0.4rem 0.6rem;
    }
    .leftsidebar ul {
       padding: 0;
        margin: 0;
    }

    /* status cafe box */
    #statuscafe {
      border: 0.1rem solid black;
      background-color: white;
      height: 40%;
    }

    #statuscafe h2 {
      font-weight: bold;
      border-bottom: 0.1rem solid black;
      color: #de1010;
      padding: 0.2rem;
    }

    #statuscafe-username,
    #statuscafe-content {
      margin-left: 0.4rem;
      padding: 0.2rem 0.3rem;
      font-size: 0.8rem;
      line-height: 1.4rem;
      letter-spacing: 0.02rem;
      height: 100%;
      overflow: auto;
    }
    #statuscafe-username a{
            font-weight: bold;
      font-size: 0.9rem;
      padding: 0.1rem;
    }

    .linkbutton{
      overflow-x: hidden;
      overflow: auto;
      padding: 1.1rem 0.3rem;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
      border: 0.1rem solid black;
      background-color: white;
      height: 40%;
    }

    .linkbutton h2{
      display: flex;
    justify-content: center; /* centers horizontally */
    align-items: flex-start; /* change to 'center' if you want vertical center */
    }

    .socials{
      overflow-x: hidden;
      overflow: auto;
      padding: 0.2rem 0.1rem;
      border: 0.1rem solid black;
      background-color: white;
      height: 40%;
    }
    
    .socials h2{
    font-weight: bold;
      border-bottom: 0.1rem solid black;
      color: #de1010;
      padding: 0.1rem;
    }
    
    .socials li, a{  
      margin-left: 0.1rem;
      font-size: 0.9rem;
    }
  
    .updatebox {
      border: 0.1rem solid black;
      background-color: white;
      padding: 0.2rem;
      margin-top: 0.1rem;
    }
    
    .updatebox h2{
      font-weight: bold;
      color: #de1010;
      padding: 0.2rem;
    }

    .updates {
      overflow-y: scroll;
      overflow-x: hidden;
      border: 0.1rem solid black;
      padding: 0.3rem;
      background-color: white;
      max-height: 5rem;
      margin-bottom: 0.2rem;
    }

    .text {
      font-size: 0.8rem;
      line-height: 1.4rem;
      letter-spacing: 0.02rem;
    }

    /* Tabs */
    .tab-navigation {
          justify-content: center; /* centers horizontally */
    align-items: flex-start; /* change to 'center' if you want vertical center */ 
      display: flex;
      gap: 0.1rem;
      margin-bottom: 0.1rem;
    }

    .tab-button {
        font-size: 1.1rem;
      padding: 0.5rem 0.7rem;
      cursor: pointer;
      border: none;
      background-color: #ccc;
    }

    .tab-button.active {
      background-color: #2f2f2f;
      color: #fff;
    }

    .tab-panel {
        max-height: 18rem;
        overflow: auto;
        display: none;
        margin: 0.8rem;
    }

    .tab-panel.active {
      display: block;
    }

    #cbox{
    height: 18rem;
}
    
    #bottom {
        grid-area:footer; /* woah! we named our id something other than its grid-area; will something bad happen? no. you can just do this and it will be fine :) */
}
    
    img {
        max-width:100%
} /* makes it so images can't overflow */

.horizontal-marquee {
  width: 100%; /* or set a fixed width like 400px */
  overflow: hidden;
  white-space: nowrap;
  background-color: #fff;
}

.marquee-track {
  display: inline-block;
  padding-left: 100%; /* start off-screen */
  animation: scrollLeft 100s linear infinite;
}

.marquee-track span {
  display: inline-block;
  padding: 0 3rem;
  font-size: 1rem;
}
.horizontal-marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

    
    ::selection {background:white; color:black;} /* style what happens when you select something! */
    
    @media screen and (max-width: 500px) { /* mobile responsiveness, although it seems to not work on firefox for some reason? will look into this */
      #contain {
        width:90vw;
        height:95vh;
      }
      #left:hover, #middle:hover, #right:hover {width:50vw;} /* if you press on any of the main columns on mobile they'll get bigger so the text'll be easier to read :D */
    }