/* ____________________________________________________________________________________________________ */
/* |                                                                                                  | */
/* |                                                                                                  | */
/* |    Butlerian Jihad now                                                                           | */
/* |                                                                                                  | */
/* |                                                                                                  | */
/* ____________________________________________________________________________________________________ */

/* ========== IMPORTS ========== */
@charset "UTF-8";

/*
@font-face {
  font-family: ___;
  src: url("___") format("___")
}
*/





/* ========== ANIMATIONS ========== */
@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}



/* ========== VARIABLES ========== */
@media all {

  :root {

    font-size: 12px; /* rem based on this */

    --messyng-green: #00FF4F;
    --messyng-pink: #FF00EE;
    --dark-color: #000000;
    --light-color: #FFFFFF;
    --mid-tone: #CCCCCC;

    --background-color: #FFFFFF;
    --box-shadow: 0px 0px 10px 0px #33333355;

    --skin-component-head: url("media/skins/section_cover_nav_bar.png");
    --skin-about-head: url("media/skins/page_cover_nav_bar.png");
    --skin-about-bground: url("media/skins/bebo_cover_photo.png");

    --cursor: url("media/cursor/main.png");

    --transition: all 0.5s ease-in-out;

    --spacing-x1: 5px;
    --spacing-x2: calc(var(--spacing-x1) * 2);
    --spacing-x3: calc(var(--spacing-x1) * 3);
    --spacing-x4: calc(var(--spacing-x1) * 4);
    --spacing-x5: calc(var(--spacing-x1) * 5);
    --spacing-x6: calc(var(--spacing-x1) * 6);
    --spacing-x12: calc(var(--spacing-x1) * 12);
  }

  body.darkMode {
    --background-color: #000000;
    --box-shadow: 0px 0px 10px 0px #CCCCCC55;
  }
}





/* ========== STRUCTURE ========== */
@media all {

  * {
    font-family: Arial, Helvetica, sans-serif;
  }
  
  /* html, */
  body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    scroll-behavior: smooth;

    background-color: var(--background-color);

    font-size: 12px;

    min-height: 100vh;
    gap: var(--spacing-x6, 30px);
    padding: 0;
    margin: 0;
  }
  
  /* --- Scrollbar customisation --- */
  ::-webkit-scrollbar {
    width: var(--spacing-x2, 10px);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--messyng-pink, #FF00EE);
  }

  ::-webkit-scrollbar-track {
    background: var(--messyng-green, #00FF4F);
  }

  /* --- selection customisation --- */
  ::selection {
    background: var(--messyng-pink, #FF00EE);
    color: var(--messyng-green, #00FF4F);
  }

  /* --- Focus for tab navigation --- */
  *:focus {
    outline: 1px solid var(--messyng-green, #00FF4F);
  }

}





/* ========== GENERIC TAGS ========== */
@media all {

  a {
    cursor: var(--cursor, pointer), auto;
  }

  button:hover {
    cursor: var(--cursor, pointer), auto;
  }

  canvas {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--mid-tone, #CCCCCC);
    margin-top: var(--spacing-x3, 15px);
  }

  figure {
    margin: 0px;
  }

  figcaption {
    text-align: center;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    padding: 0px;
  }

  img {
    display: block;
    font-style: italic; /* Sets the alt text to italitcs to differentiate it on the page */
  }

  main {
    display: flex;
    flex-direction: column;

    width: 90%;
    max-width: 1550px;
    gap: var(--spacing-x3, 15px);
    margin-inline: auto;
  }

  noscript {
    font-style: italic; /* Sets the noscript text to italitcs to differentiate it on the page */
  }

  p {
    margin: 0px;
    padding: 0px;
  }

  section {
    break-inside: avoid;
    width: 100%;
  }

  small {
    font-size: 0.5rem;
  }

}





/* ========== HEADER ========== */
@media all {
  /* --- General header bar stuff --- */
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    overflow: visible;

    background-color: var(--dark-color, #000000);
    background-size: cover;
    color: var(--light-color, #FFFFFF);
    
    width: 100%;
    height: auto;
    padding-block: var(--spacing-x1, 5px);
    padding-inline: var(--spacing-x2, 10px);
  }

  header a { /* I definitely don't want any header links having an underline, so let's remove that from all of them here */
    text-decoration: none;
  }

  header a:hover {
    cursor: pointer;
  }



  /* --- Header logo --- */
  header #header-logo {
    display: block;

    width: 120px;
    height: auto;

    transition: var(--transition, all 0.5s ease-in-out);
  }

  header #header-logo:hover {
    filter: grayscale(30%);
  }



  /* --- Navigation menu within the header --- */
  header nav { /* Outermost navigation menu container. No styling requirements rn. */
    display: block;
  }

  header ul { /* Main nav menu container */
    display: flex;
    justify-content: space-between;

    gap: var(--spacing-x1); /* fatfingers support */
    padding: 0px; /* Weird default to over ride */
  }

  header li {
    display: flex;
    align-items: center;
    
    list-style: none;

    gap: var(--spacing-x2, 10px);

    transition: var(--transition, all 0.5s ease-in-out);
  }

  header li a {
    box-sizing: border-box;

    background-color: transparent;
    color: var(--messyng-pink, #FF00EE);

    text-decoration: none;
    text-align: center;

    padding: var(--spacing-x3, 15px);
    border-radius: var(--spacing-x2, 10px);

    transition: var(--transition, all 0.5s ease-in-out);
  }

  header li a:hover {
    background-color: var(--light-color, #FFFFFF);
    color: var(--dark-color, #000000);
  }



  /* --- "explore" dropdown --- */
  header .dropdown { /* Container */
    position: relative;
    display: inline-block;

    color: var(--messyng-pink, #FF00EE);

    /* Only want top radius so that it connects seamlessly with box below */
    border-top-left-radius: var(--spacing-x2, 10px);
    border-top-right-radius: var(--spacing-x2, 10px);
  }

  header .dropbtn { /* The "explore" button itself. treated the same as a within li. */
    box-sizing: border-box;

    background-color: transparent;

    text-decoration: none;
    text-align: center;

    padding: var(--spacing-x3, 15px);

    transition: var(--transition, all 0.5s ease-in-out);
  }

  /* if the button of the word "explore" is hovered, style the explore button */
  /* if the content contained within the explore dropdown is hovered, maintain the style on the explore button */
  header .dropdown:hover {
    background-color: var(--light-color, #FFFFFF);
    color: var(--dark-color, #000000);
  }

  header .dropdown .dropdown-content { /* The container for the list of links contained in the dropdown */
    position: absolute;
    visibility: hidden;
    
    color: var(--dark-color, #000000);
    background-color: var(--light-color);

    opacity: 0;
    z-index: 2;

    transition: var(--transition, all 0.5s ease-in-out);
  }

  header .dropdown:hover .dropdown-content, /* if the dropdown li is hover, do this to the content */
  header .dropdown:active .dropdown-content, /* if the dropdown li is active, do this to the content */
  header .dropdown .dropdown-content:hover { /* if the dropdown-content div is hovered but not the dropdown li, do this to the content */
    visibility: visible;
    opacity: 1;
  }

  header .dropdown-content a { /* Each anchor tag is an entry in the drop down list, this is styling for those individual entries */
    display: block;
    box-sizing: border-box;

    text-decoration: none;

    padding: var(--spacing-x3, 15px);
    border-radius: 0px;

    transition: var(--transition, all 0.5s ease-in-out);
  }

  header .dropdown-content a:hover {
    background-color: #F1F1F1;
    color: var(--dark-color, #000000);
  }



  /* --- search input and button --- */
  header input { /* search text area */
    line-height: var(--spacing-x3, 15px);

    max-width: 300px;
    padding: var(--spacing-x1, 5px);
    border: 1px solid var(--mid-tone, #CCCCCC);
    border-radius: var(--spacing-x2, 10px);
    margin: 0px;
  }

  header button { /* "search" button */
    box-sizing: border-box;

    line-height: var(--spacing-x3, 15px);

    padding: var(--spacing-x1, 5px);
    border: 1px solid var(--mid-tone, #CCCCCC);
    border-radius: var(--spacing-x2, 10px);
    margin: 0px;

    transition: var(--transition, all 0.5s ease-in-out);
  }

}





/* ========== SUBHEADER ========== */
@media all {
  
  #sub-header {
    display: flex;
    flex-direction: column;

    gap: var(--spacing-x3, 15px);
  }



  /* --- noscript error --- */
  #sub-header noscript {
    font-style: italic;
    text-align: center;
  }



  /* --- Advert --- */
  #sub-header #advert { /* figure container of advert img, figcaption etc */
    width: 100%; /* occupy full width of main */
  }

  #sub-header #advert a {
    display: block;

    height: 100%;
    width: 100%;
    outline: 2px solid var(--dark-color, #000000); /* using outline so that I can inset it and hide it behind the img to only appear if the image is a broken link */
    outline-offset: -2px;
  }

  #sub-header #advert img {
    display: block;
    position: relative;

    width: 100%; /* take up full width of #advert */
    height: auto;
    max-height: 300px; /* Don't want this container being massive if there is an error */
    z-index: 1;
  }

  #sub-header #advert figcaption {
    opacity: 0.5;
    font-style: italic;
  }




  /* --- Profile title and quote --- */
  #sub-header #pageidentifier {
    display: flex;
    justify-content: space-between;
  }

  #sub-header #pageidentifier aside { /* Page title container */
    display: flex;
    align-self: flex-end; /* Lock to bottom of container */
  }

  #sub-header aside h1 { /* Display name */
    font-family: Georgia;
    font-size: 20px;
  }

  #sub-header aside h2 { /* Username */
    font-size: 18px;
  }

  #sub-header #pageidentifier q { /* Page quote */
    font-family: Georgia;
    color: var(--mid-tone, #CCCCCC);
    align-self: flex-start; /* Lock to top of container */
  }

}





/* ========== MAIN PAGE CONTENT ========== */
@media all {
  
  #page-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    width: 100%; /* Occupy full width of main */
    gap: var(--spacing-x3, 15px);
  }

  #page-content #about {
    flex-basis: 100%;
  }







}


/* ========== ABOUT SECTION ========== */
@media all {

  /* --- About section outermost container --- */
  #page-content #about-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    box-shadow: var(--box-shadow);
    width: 100%;
    border-top-left-radius: var(--spacing-x5, 25px);
    border-top-right-radius: var(--spacing-x5, 25px);
  }
  
    /* --- nav atop the about section --- */
  .mainnav {
    display: flex;
    box-sizing: border-box;

    background-image: var(--skin-about-head);
    background-color: var(--dark-color, #000000);
    background-repeat: no-repeat;
    background-position: right center;

    font-weight: bold;

    padding-inline: var(--spacing-x3, 15px);
    border-top-left-radius: var(--spacing-x5, 25px);
    border-top-right-radius: var(--spacing-x5, 25px);
  }

  .mainnav a {
    color: var(--messyng-green, #00FF4F);

    text-decoration: none;

    padding: var(--spacing-x3, 15px);

    transition: var(--transition, all 0.5s ease-in-out);
  }

  .mainnav a:hover {
    color: var(--dark-color, #000000);
    background-color: var(--light-color, #FFFFFF);

    cursor: pointer;
  }



  /* --- Container for the about section columns */
  #page-content #about > * {
    max-width: 500px;
    box-sizing: border-box;
  }

  #about { /* Container for the 3 about columns */
    display: flex;
    justify-content: space-between;

    background-image: var(--skin-about-bground);
    background-color: var(--dark-color, #000000);
    background-size: cover;
    color: var(--light-color, #FFFFFF);

    padding-inline: var(--spacing-x3, 15px);
  }

  .about-col { /* Each individual columns sub container */
    display: flex;
    flex-direction: column;

    width: 30%;
    gap: var(--spacing-x3, 15px);
    padding: var(--spacing-x3, 15px);
  }

  .about-col a {
    color: var(--light-color, #FFFFFF);
  }

  .about-col h2 {
    background: unset;
    padding-inline: 0px;
  }

  .about-col h3 {
    padding-block: var(--spacing-x2, 10px);
  }

  .about-col figcaption {
    font-size: 1.2rem;
    text-align: left;
  }



  /* - Things within column 1 - */

  .about-col.left { /* The column itself */
    width: 20%; /* Would like this one to be a hair narrower */
  }

  #profilepic { /* Not the container, the actual img */
    display: block;

    background-image: url("media/defaults/bebo-default-profile-pic.gif"); /* Might be weirdly counter intuitive but I'm trying to have it so that there's a default pfp in case the file of the selected pfp is broken */
    background-repeat: no-repeat;
    background-size: cover;

    max-width: 300px;
    width: 90%;
    height: auto;

    aspect-ratio: 1 / 1;
  }

  #about-list {
    list-style: none;
  }

  /* - Things within column 2 - */
  #other-half img {
    display: block;

    width: 35%;
    height: auto;
    margin-bottom: var(--spacing-x3, 15px);
  }

  #other-half figcaption {
    margin-bottom: var(--spacing-x2, 10px);
  }

  /* - Things within column 3 - */
}










/* ========== COLUMNS OF PAGE CONTENT & COMPONENT STRUCTURE ========== */
@media all {
    
  #page-content #left,
  #page-content #right {
    display: flex;
    flex-direction: column;
    align-self: stretch; /* if either the left of right is shorter than the other, this will stretch the container so that the widgets lock to the top */

    max-width: calc(50% - 8px);
    flex-grow: 1;
    gap: var(--spacing-x3, 15px);
  }

  /* ----- Left side ----- */
  #page-content #left {
    position: relative;
  }

  /* ----- Right side ----- */
  #page-content #right {
    position: relative;
  }



  /* --- Styling true of every widget container */
  #page-content #left section,
  #page-content #right section { /* - Widget container itself - */
    position: relative;

    box-shadow: var(--box-shadow);
    border-top-left-radius: var(--spacing-x5, 25px);
    border-top-right-radius: var(--spacing-x5, 25px);
  }

  #page-content section > h2 { /* - Title of type of widget - */
    display: block;

    color: var(--light-color, #FFFFFF);
    background-image: var(--skin-component-head);
    background-size: cover;

    padding: var(--spacing-x3, 15px);
    border-top-left-radius: var(--spacing-x5, 25px);
    border-top-right-radius: var(--spacing-x5, 25px);
    margin-bottom: 0px;
  }

  .component { /* The part of the widget that isn't the title */
    overflow: auto; /* Not sure if this is what I want */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    font-weight: bold;

    color: var(--light-color, #FFFFFF);
    background-color: var(--dark-color, #000000);

    gap: var(--spacing-x3, 15px);
    padding: var(--spacing-x3, 15px);
  }

  .component h3 { /* - subheading, left side - */
    color: var(--light-color, #FFFFFF);
    font-weight: bold;
  }

  .component h4 { /* - Additional option, usually a link - */
    position: relative;
    z-index: 1; /* Just trying to ensure this link is always on top */
  }

  .component h4 a { /* - A lot of these h4's are also links so want to over ride things - */
    cursor: var(--cursor, pointer), auto;
    color: var(--light-color, #FFFFFF);
    text-decoration: none;
  }

}











/* --- Carousels --- */
/* there's multiple content carousels and I want the styling of all of them to be the same */

.slideshow-container {
  /* I don't think I'll use */
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.mySlides {
  /* .myslides is the class given to the contents of the carousel. The CSS keeps them hidden, the JS gives them the inline block style to display them. */
  display: none;
}


/* - Left & right chevrons - */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  user-select: none; /* Makes the chevrons not selectable or highlightable */

  color: var(--light-color, #FFFFFF);
  background-color: transparent;

  font-size: 18px;
  font-weight: bold;

  top: 50%;
  width: auto;
  padding: var(--spacing-x3, 15px);
  border-radius: var(--spacing-x1, 5px);
  
  transition: var(--transition, all 0.5s ease-in-out);
}

.next {
  right: 0;
}

.prev:hover,
.next:hover {
  color: var(--dark-color, #000000);
  background-color: var(--light-color, #FFFFFF);
}

.text {
  position: absolute;

  color: var(--light-color, #FFFFFF);
  
  font-size: 15px;
  text-align: center;

  bottom: var(--spacing-x2, 10px);
  width: 100%;
  padding-block: var(--spacing-x2, 10px);
  padding-inline: var(--spacing-x3, 15px);
}

.numbertext { /* The "1 / n" number in the top left corner */
  position: absolute;

  color: var(--light-color, #FFFFFF);

  font-size: 12px;

  top: 0;
  padding-inline: var(--spacing-x3, 15px);
}

/* - Dots at the bottom to show which option is selected - */
.dot-container {
  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center; /* Extracted from inline cause I want it all controlled by CSS */

  gap: var(--spacing-x6, 30px);
}

.dot {
  display: inline-block;
  cursor: pointer;

  background-color: var(--mid-tone, #CCCCCC);

  height: var(--spacing-x3, 15px);
  width: var(--spacing-x3, 15px);
  border-radius: 50%;
  
  transition: var(--transition, all 0.5s ease-in-out);
}

/* - Active dot or hovered dot - */
.dot:hover {
  opacity: 60%;
}









/* --- Friends - top 16 --- */
@media all {

  #top16 {
    position: relative;
  }

  #top16 .component > div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;

    gap: var(--spacing-x12, 60px);
    padding-top: var(--spacing-x3, 15px);
  }

  #top16 figure img {
    box-shadow: 0px 0px 0px 2px inset var(--mid-tone, #CCCCCC); 
  }

  #top16 a {
    text-decoration: none;
  }

  #top16 img {
    position: relative;
    display: block;

    height: auto;
    width: 100%;
    z-index: 1;
  }

  #top16 figcaption {
    color: var(--light-color, #FFFFFF);
  }

  #top16 {
    font-size: 0.75rem;
  }

}



/* --- Videos --- */
@media all {

  #flashbox {
    position: relative;
  }
  
  #flashbox video {
    display: block;
    
    width: 80%;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 1rem;
    margin-inline: auto;
  }
  
  /* there's multiple content carousels and I want the styling of all of them to be the same */
  
  .slideshow-container {
    /* I don't think I'll use */
    max-width: 1000px;
    position: relative;
    margin: auto;
  }
  
  
  /* - Each video in the flashbox carousel - */
  .myVideos {
    /* .myslides is the class given to the contents of the carousel. The CSS keeps them hidden, the JS gives them the inline block style to display them. */
    display: none;
  }
  
  
  /* - Left & right chevrons - */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    user-select: none; /* Makes the chevrons not selectable or highlightable */
  
    color: var(--light-color, #FFFFFF);
    background-color: transparent;
  
    font-size: 18px;
    font-weight: bold;
  
    top: 50%;
    width: auto;
    padding: var(--spacing-x3, 15px);
    border-radius: var(--spacing-x1, 5px);
    
    transition: var(--transition, all 0.5s ease-in-out);
  }
  
  .next {
    right: 0;
  }
  
  .prev:hover,
  .next:hover {
    color: var(--dark-color, #000000);
    background-color: var(--light-color, #FFFFFF);
  }
  
  /* - Video title at bottom of video - */
  .text { /* Maybe animate to hide after a few seconds and show again on hover? */
    position: absolute;
  
    color: var(--light-color, #FFFFFF);
    
    font-size: 15px;
    text-align: center;
  
    bottom: var(--spacing-x2, 10px);
    width: 100%;
    padding-block: var(--spacing-x2, 10px);
    padding-inline: var(--spacing-x3, 15px);
  }
  
  .numbertext { /* The "1 / n" number in the top left corner */
    position: absolute;
  
    color: var(--light-color, #FFFFFF);
  
    font-size: 12px;
  
    top: 0;
    padding-inline: var(--spacing-x3, 15px);
  }
  
  /* - Dots at the bottom to show which option is selected - */
  .thumbnailContainer { /* I plan on replacing these dots with video thumbnails, so retitling the container */
    display: flex;
    justify-content: center;
    align-items: center;
  
    text-align: center; /* Extracted from inline cause I want it all controlled by CSS */
  
    gap: var(--spacing-x6, 30px);
    width: 100%;
  }
  
  /* - Each individual thumbnail container - */
  .thumbnail {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;

    opacity: 70%;
    filter: grayscale(50%) brightness(50%);
  
    height: 100%;
    width: 20%;
    
    transition: var(--transition, all 0.5s ease-in-out);
  }

  .thumbnail img {
    display: block;
    
    width: 100%;
    height: auto;
  }
  
  /* - Active dot or hovered dot - */
  .active,
  .thumbnail:hover {
    opacity: 100%;

    filter: grayscale(0%) brightness(100%);
  }
}



/* --- Photos - top 9 --- */
@media all {
  #photos {
    position: relative;
  }
  
  #photos .component > div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  
    gap: var(--spacing-x12, 60px);
    padding-top: var(--spacing-x3, 15px);
  }
  
  #photos figure {
    /* using outline so that I can inset it and hide it behind the img to only appear if the image is a broken link */
    outline: 2px solid var(--mid-tone, #CCCCCC); 
    outline-offset: -2px;
  }
  
  #photos a {
    text-decoration: none;
  }
  
  #photos img {
    position: relative;
    display: block;
  
    height: auto;
    width: 100%;
    z-index: 1;
  }
  
  #photos figcaption {
    color: var(--light-color, #FFFFFF);
  }
  
  #photos {
    font-size: 0.75rem;
  }
}



/* --- Widget - Model viewer --- */
@media all {
  #widget {
    position: relative;
  }
  /* 3D model viewer widget */
  
  #viewer {
    display: block;
    position: relative;
    overflow: hidden; /* Because it's changing the display, I don't think hiding the overflow is necessary */
    align-items: center; /* Not display: flex; so doesn't work */
  
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
  }
  
  model-viewer {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  
  /* - Each 3D render in the widget carousel - */
  .myRenders {
    display: none;
  }
  
  
  /* - Left & right chevrons - */
  #widget .prev,
  #widget .next {
    cursor: pointer;
    position: absolute;
    user-select: none; /* Makes the chevrons not selectable or highlightable */
  
    color: var(--light-color, #FFFFFF);
    background-color: transparent;
  
    font-size: 18px;
    font-weight: bold;
  
    top: 50%;
    width: auto;
    padding: var(--spacing-x3, 15px);
    border-radius: var(--spacing-x1, 5px);
    
    transition: var(--transition, all 0.5s ease-in-out);
  }
  
  #widget .next {
    right: 0;
  }
  
  #widget .prev:hover,
  #widget .next:hover {
    color: var(--dark-color, #000000);
    background-color: var(--light-color, #FFFFFF);
  }
  
  /* - Render title at bottom of video - */
  #widget .text { /* Maybe animate to hide after a few seconds and show again on hover? */
    position: absolute;
  
    color: var(--light-color, #FFFFFF);
    
    font-size: 15px;
    text-align: center;
  
    bottom: var(--spacing-x2, 10px);
    width: 100%;
    padding-block: var(--spacing-x2, 10px);
    padding-inline: var(--spacing-x3, 15px);
  }
  
  #widget .numbertext { /* The "1 / n" number in the top left corner */
    position: absolute;
  
    color: var(--light-color, #FFFFFF);
  
    font-size: 12px;
  
    top: 0;
    padding-inline: var(--spacing-x3, 15px);
  }
  
  /* - Dots at the bottom to show which option is selected - */
  .dot-container {
    display: flex;
    justify-content: center;
    align-items: center;
  
    text-align: center; /* Extracted from inline cause I want it all controlled by CSS */
  
    gap: var(--spacing-x6, 30px);
    width: 100%;
  }
  
  /* - Each individual dot - */
  .dot {
    display: inline-block;
    cursor: pointer;
  
    background-color: var(--mid-tone, #CCCCCC);
  
    height: var(--spacing-x3, 15px);
    width: var(--spacing-x3, 15px);
    border-radius: 50%;
    
    transition: var(--transition, all 0.5s ease-in-out);
  }
  
  /* - Active dot or hovered dot - */
  #widget .active,
  .dot:hover {
    opacity: 60%;
  }
}



/* --- Whiteboard --- */
@media all {
  #whiteboard {
    position: relative;
  }

  #drawingCanvas {
    background-color: var(--light-color, #FFFFFF);
  }

  #toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
  }
}



/* --- Solitayre --- */
@media all {
  #solitayre {
    position: relative;
  }
  
  #putgamehere { /* The innermost container for the game. Forms the gamemat itself */
    background-color: #008001;
  
    width: 100%;
    border-radius: var(--spacing-x3, 15px);
    border: 1px inset var(--mid-tone, #CCCCCC);
    margin-top: var(--spacing-x3, 15px);
  }
  
  #putgamehere .workspace {
    max-width: 720px;
    margin-inline: auto;
  }
  
  #putgamehere .hotspot { /* Symbol found on the green basemat, usually a symbol like _ to show it's empty */
    text-align: center;
  }
  
  .solitaireprefs { /* Preferences / options window */
    position: absolute;
    box-sizing: border-box;
    
    background-color: #33BB77EE;
  
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
    padding: var(--spacing-x3, 15px);
    
    border-radius: 15px;
    box-shadow: 0px 0px var(--spacing-x2, 10px) var(--spacing-x2, 10px) #00000033;
    z-index: 100;
  }
  
  .solitaireprefs p,
  .solitaireprefs h3,
  .solitaireprefs h4 {
    position: relative;
    color: var(--dark-color, #000000);
  }
  
  .solitaireprefs form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  
    width: 100%;
    height: 100%;
  }
  
  .solitaireprefs form > div { /* The row in the options where it shows the preview of the 4 cards in use */
    display: flex !important; /* !important is temporary until I fix the js */
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    height: 100%;
    gap: var(--spacing-x2, 10px);
  }
  .solitaireprefs form > div > div { /* This shouldn't be two divs, makes it hard to style */
    display: flex;
    gap: var(--spacing-x2, 10px);
  }

}



/* --- Blog --- */
@media all {
  #blog {
    position: relative;
  }
  
  #blog p {
    margin-top: var(--spacing-x3, 15px);
  }
}



/* --- Quiz --- */
@media all {
  #quiz {
    position: relative;
  }
}



/* --- Polls --- */
@media all {
  #polls {
    position: relative;
  }
  
  #polls form {
    display: flex;
    flex-direction: column;
  }
  
  #polls form::after {
    content: "";
  
    background-color: var(--mid-tone, #CCCCCC);
  
    height: 1px;
    width: 100%;
    margin-block: var(--spacing-x3, 15px);
  }
  
  #polls form:last-of-type::after {
    display: none;
  }
}



/* --- Events --- */
@media all {
  #events {
    position: relative;
  }
}



/* --- Maryo --- */
@media all {
  #maryo {
    position: relative;
  }
}



/* --- Wall --- */
@media all {

  #wall {
    position: relative;
  }
  
  #wall form { /* Container for comment input form  */
    display: flex;
    flex-direction: column;

    width: 100%;
    gap: var(--spacing-x3, 15px);
  }
  
  #wall form input { /* Submit comment button */
    align-self: flex-end;

    width: 25%;
  }
  
  #wall form::after { /* Horizontal rule after comment form */
    content: "";
    display: block;
    grid-column: 1 / 3;

    background-color: var(--mid-tone, #CCCCCC);

    height: 1px;
    width: 100%;
  }
  
  .comment-section {
    display: flex;
    flex-direction: column;

    gap: var(--spacing-x3, 15px);
  }

  .comment-block { /* Container */
    display: grid;
    grid-template-columns: auto 1fr;

    row-gap: var(--spacing-x1, 5px);
    column-gap: var(--spacing-x3, 15px);
  }
  
  .profilepicwall { /* Commenter's profile picture */
    grid-row: 1 / 3;
  }
  
  .wall-display-name { /* Commenter's display name */
    color: var(--messyng-green, #00FF4F);
  
    font-size: 16px;
  }
  
  .wall-user-name { /* Commenter's username */
    color: var(--messyng-green, #00FF4F);
  
    font-size: 14px; /* Should be a hair smaller than the display name */
    
    margin-bottom: var(--spacing-x2, 10px); /* Adds to the row-gap of 5 and mimics 15px */
  }
  
  .comment-block p { /* Text of the comment */
    grid-column: 2 / 3;
  }
  
  .comment-block p.age { /* Age of the comment, displayed bottom right */
    grid-column-start: 1;
    grid-column: 1 / 3;
  
    font-size: 85%; /* Should be a hair smaller than the comment */
    text-align: right;
    text-decoration-style: italic;
  }
  
  .comment-block::after { /* Horizontal rule after each comment block */
    content: "";
    display: block;
  
    grid-column: 1 / 3;
  
    background-color: var(--mid-tone, #CCCCCC);
  
    height: 1px;
    width: 100%;
    margin-block: var(--spacing-x3, 15px);
  }
  
  .comment-block:last-of-type::after { /* Except the last one in the section */
    display: none;
  }
}








/* ========== FOOTER ========== */
@media all {

  footer {
    box-sizing: border-box;
    text-align: center;

    background-color: var(--dark-color, #000000);
    color: var(--light-color, #FFFFFF);
    background-size: 100%;
    background-size: cover;

    width: 100%;
    height: auto;
    padding-block: var(--spacing-x6, 30px);
  }

  footer a {
    text-decoration: none;
  }

  footer h6 {
    font-size: 16px;

    flex-basis: 100%;
    margin: 0px;
  }

  footer #footer-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    gap: var(--spacing-x3, 15px);
  }

  footer ul { /* Main nav menu container */
    display: flex;
    justify-content: space-between;

    gap: var(--spacing-x2, 10px);
    padding: 0px;
  }

  footer li {
    display: flex;
    align-items: center;
    
    list-style: none;

    gap: var(--spacing-x2, 10px);

    transition: var(--transition, all 0.5s ease-in-out);
  }

  footer li::after { /* Puts vert bar between list items */
    content: " | ";
  }

  footer li:last-of-type::after {
    content: "";
    display: none;
  }



  /* --- Socials --- */
  footer #footer-container > nav { /* container */
    display: flex;
  }

  footer #footer-container > nav li a {
    box-sizing: border-box;

    background-color: transparent;
    color: var(--messyng-pink, #FF00EE);

    text-align: center;

    padding-block: var(--spacing-x2, 10px);
    padding-inline: var(--spacing-x3, 15px);
    border-radius: var(--spacing-x2, 10px);

    transition: var(--transition, all 0.5s ease-in-out);
  }

  footer #footer-container > nav li a:hover {
    background-color: var(--light-color, #FFFFFF);
    color: var(--dark-color, #000000);
  }



  /* --- "Messyng are represented by" --- */
  footer #footer-container > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: var(--spacing-x3, 15px);
  }

  footer #footer-container > div li a {
    box-sizing: border-box;

    background-color: transparent;
    color: var(--messyng-pink, #FF00EE);

    text-align: center;

    padding: 0px;
    border-bottom: 1px solid transparent;
    border-radius: 0px;

    transition: var(--transition, all 0.5s ease-in-out);
  }

  footer #footer-container > div li a:hover {
    background-color: transparent;
    color: var(--messyng-green, #00FF4F);
    border-bottom: 1px solid var(--messyng-green, #00FF4F);
  }



  /* --- Newsletter sign up form --- */
  footer form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: var(--spacing-x3, 15px);
  }

  footer span {
    font-size: 9px;
  }

  footer form span {
    flex-basis: 100%;
  }

  footer input { /* search text area */
    line-height: var(--spacing-x3, 15px);

    max-width: 300px;
    padding: var(--spacing-x1, 5px);
    border: 1px solid var(--mid-tone, #CCCCCC);
    border-radius: var(--spacing-x2, 10px);
    margin: 0px;
  }

  footer button { /* "search" button */
    box-sizing: border-box;

    line-height: var(--spacing-x3, 15px);

    padding: var(--spacing-x1, 5px);
    border: 1px solid var(--mid-tone, #CCCCCC);
    border-radius: var(--spacing-x2, 10px);
    margin: 0px;

    transition: var(--transition, all 0.5s ease-in-out);
  }



  /* --- Copyright info at the very bottom of the footer --- */
  footer small {
    font-size: 9px;
  }

  footer small a { /* Hidden hyperlink within copyright statement */
    color: var(--light-color, #FFFFFF);
  }

  footer small a:hover {
    color: var(--light-color, #FFFFFF); /* Has to be the same as the non hovered */
  }

}








/* ========== MEDIA QUERIES ========== */
@media screen and (max-width: 999px) {

  header {
    justify-content: center;
  }

  #colorModeToggle {
    display: none;
  }

  header nav {
    display: none;
  }

  #page-content {
    flex-direction: column;
  }

  #page-content #left,
  #page-content #right {
    max-width: 100%;
  }

  #about {
    flex-direction: column;
  }

  #about-container .mainnav {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #page-content #about > .about-col {
    max-width: 100%;
    width: 100%;
  }

  #page-content #about > .about-col.left {
    text-align: center;
  }

  #about figure {
    margin-inline: auto;
  }

  #about figcaption {
    text-align: center;
  }




  /* If below screen size, then the header navigation should show as a normal list leaning right */
  .headernav {
    display: block;
  }

  /* If below screen size, all of the widgets should read in 1 column, rather than 2 */
  #content {
    columns: 1;
  }

  /* If below screen size, then top 16 should display in 2 columns, rather than 4 */
  .column16 {
    width: 50%;
  }

  /* If below screen size, then top 9 photo albums should display in 1 columns rather than 3 */
  .column9 {
    width: 75%;
  }

  .about-col {
    width: 100%;
  }

}

@media screen and (max-width: 110px) {

  .about-col {
    width: 50%;
  }

}










/* ========== PAGES ========== */
/* --- Friends --- */
@media screen {

  main:has(section#friends) {
    width: 100%;
  }
  
  section#friends {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  
    gap: var(--spacing-x3, 15px);
  }
  
  section#friends h1 {
    grid-column: 1 / -1;
    
    text-align: center;
  
    padding-bottom: var(--spacing-x2);
  }
  
  section#friends figure a {
    display: flex;
    flex-direction: column;
    align-items: center;
  
    gap: var(--spacing-x1, 5px);
  }
  
  section#friends figure a img {
    display: block;
  
    text-align: center;
  
    width: 350px;
    aspect-ratio: 1 / 1;
    box-shadow: 0px 0px 0px 2px inset var(--mid-tone, #CCCCCC); 
  }
  
  @media screen and (max-width: 1449px) {
    section#friends figure a img {
      width: 300px;
    }
  }
  
  @media screen and (max-width: 1249px) {
    section#friends figure a img {
      width: 250px;
    }
  }
  
  @media screen and (max-width: 999px) {
    section#friends {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  
  @media screen and (max-width: 799px) {
    section#friends figure a img {
      width: 200px;
    }
  }
  
  @media screen and (max-width: 699px) {
    section#friends {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  @media screen and (max-width: 599px) {
    section#friends figure a img {
      width: 150px;
    }
  }
  
  @media screen and (max-width: 499px) {
    section#friends {
      grid-template-columns: 1fr;
    }
  }

}