/*

// main.css
// The bare essentials of what we need for the website to work
// Boxes, the grid layout, etc.

*/

/* Fonts */

@font-face {
  font-family: departureFont; /* set name */
  font-weight: bolder;
  src: url('../assets/departure.woff2');
}

/* Body and Body Wrapper */

:root {
    --body-margin: 10%;
}

.bodywrapper {
    display: grid;
    column-gap: 10px;
    row-gap: 10px;
    grid-template-columns: 12% auto;
    margin-left: var(--body-margin);
    margin-right: var(--body-margin);
}

body {
    background-image: url('/assets/bgtile.png');
    animation: backgroundMove 10s linear infinite;
    background-color: black;
    margin-bottom: 0px;
}

@keyframes backgroundMove {
    100% {background-position: 0 -128px;}
}

/* ######## The Box ######## */

/*
// The Box
// bread and butter and is used for like everything
*/

.box {
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
    border-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px) brightness(50%);
    border-radius: 5px;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.5);
}

.box h1 {
    background-color: white;
    margin: 5px;
    padding: 14px 10px 14px 10px;
    background-image: url(assets/titlebare.png);
    border-radius: 3px;
    font-family: monospace;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5)
}

.box p {
    color: white;
    font-family: monospace;
    padding-left: 10px;
    padding-right: 10px;
}

.box li {
    color: white;
    font-family: monospace;
    padding-right: 10px;
}

.box ol {
    padding-right: 10px;
}

.box h3 {
    padding-left: 10px;
    color: white;
    font-family: monospace;
    margin-top: 10px;
    margin-bottom: 5px;
}

.box h2 {
    padding-left: 10px;
    color: white;
    font-family: monospace;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: xx-large;
}

/* Box Forms */

.box input {
    color: white;
    background-color: transparent;
    backdrop-filter: brightness(0.5);
    border: 1px white solid;
    border-radius: 2px;
    font-family: monospace;
    margin-left: 10px;
    padding-left: 5px;
    max-width: 384px;
    width: 99%;
}

.box textarea {
    color: white;
    background-color: transparent;
    backdrop-filter: brightness(0.5);
    border: 1px white solid;
    border-radius: 2px;
    font-family: monospace;
    margin-left: 10px;
    padding-left: 5px;
    max-width: 384px;
    width: 99%;
    height: 100px;
    max-height: 150px;
}

/* Yellow Box */
.yellow {
    border-color: yellow;
}

.yellow h1 {
    background-color: yellow;
}

.yellow p {
    color: yellow;
}

/* Red Box */
.red {
    border-color: #ff0000;
    background-color: #ff000066;
}

.red h1 {
    background-color: #ff0000;
}

/* Panels */

.panel {
    margin-left: var(--body-margin);
    margin-right: var(--body-margin);
    margin-bottom: 10px;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    backdrop-filter: blur(10px) saturate(100%) brightness(70%);
}

/* ######## Hero ######## */

.hero {
    margin-top: 200px;
    height: 250px;
    margin-left: var(--body-margin);
    margin-right: var(--body-margin);
}

.herotext {
    color: white;
    text-shadow: 0px 5px black;
    font-family: 'departureFont';
    font-size: 4vw;
    text-align: center;
    transform: translateY(-20px);
    animation: heroAnim 6s infinite;
}

.herobg {
    position: absolute;
    background-size: cover;
    filter: brightness(80%) blur(5px); /* Dim and blur effect */
    z-index: -1;
    height: 100%;
    width: 100%;
    background-position: center;
    overflow: hidden;
}

/* ######## Sidebar ######## */

/*
// Sidebar Buttons
// used for navigations
*/

.sidebarbutton {
    height: 48px;
    font-size: 1.2em;
    font-weight: 900;
    overflow: clip;
    outline: rgba(255, 255, 255, 0.25) 1px dashed;
    outline-offset: -3px;
}

.sidebarbutton:hover {
    backdrop-filter: blur(20px) brightness(200%);
    background-color: rgba(255, 255, 255, 0.5);
    outline-color: rgba(0,0,0);
    border-color: rgba(255, 255, 255, 0.75);
    color: black;
}

.sidebarbutton:hover p {
    color: black;
}

/*
// Fillerbox
// decorational empty box piece
*/

.fillerbox {
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
    height: 100%
}

/*
// Sidebar Flex
// used to extend the fillerbox as far down as possible
*/

.sidebarflex {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
}

/* ######## Buttons and Buttongrids ######## */

.button {
    display: flex;
    height: 48px;
    font-size: 1.2em;
    font-weight: 900;
    overflow: clip;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    color: white;
    outline: rgba(255, 255, 255, 0.25) 1px dashed;
    outline-offset: -3px;
}

.button i {
    font-weight: normal;
}

.button:hover {
    backdrop-filter: blur(20px) brightness(200%);
    background-color: rgba(255, 255, 255, 0.5);
    color: black;
    outline-color: rgba(0,0,0);
    border-color: rgba(255, 255, 255, 0.75);
}



/* i think i can get rid of all of these without breaking anything? we'll find out lol */

.buttongrid {
    display: flex;
    gap: 10px;
}

.buttongrid a {
    flex-grow: 1;
}
/* Banners Flexbox */

#bannerflexbox {
    image-rendering: pixelated;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* ######## Footer ######## */

#footer {
    display: grid;
    grid-template-columns: auto auto auto;
    font-family: monospace;
    border-color: rgba(255, 255, 255, 0.25);
    color: white;
    align-items: center;
    overflow: clip;
}

#footer a {
    color: white
}

#footer div {
    margin: 10px;
}

#footer p {
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#footer div #hitcount {
    color: white;
    font-size: xxx-large;
    font-weight: 900;
}

/* ######## Misc Helpful ######## */

.lefthanded {
    display: revert;
    height: unset;
    justify-content: unset;
    align-items: unset;
}

.imageholder {
    display:flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
}

.wrapped {
    margin-left: var(--body-margin);
    margin-right: var(--body-margin);
}

.behindbox {
    position: absolute;
    background-size: cover;
    z-index: -1;
    height: 100%;
    width: 100%;
    background-position: center;
    overflow: hidden;
}

.noeffects {
    backdrop-filter: none !important;
}

.nodeco {
    text-decoration: none;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(40px) brightness(50%);
  z-index: 100;
  cursor: pointer; /* Add a pointer on hover */
}

.mobileonly {
    display: none;
}

.overlayflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 10px;
    margin: 20px;
}

.inoverlay {
    flex-grow: 1;
    flex-basis: 33%;
}

/* ######## Other ######## */

.spoiler {
    color: white;
    background-color: white;
    margin: 0px;
    font-family: monospace;    
}

.spoiler:hover {
    color: black;
}

a {
    text-decoration: none;
    text-decoration-color: white;
  }

/* LARGER SCREEN TWEAKS */
@media screen and (min-width: 3000px) {

    :root {
        --body-margin: 40%;
    }
}

@media screen and (min-width: 2000px) {

    :root {
        --body-margin: 25%;
    }
}

@media screen and (min-width: 1800px) {

    :root {
        --body-margin: 13%;
    }
}

/* SMALLER SCREEN TWEAKS */
@media screen and (max-width: 1700px) {

    :root {
        --body-margin: 9%;
    }
}

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

    :root {
        --body-margin: 8%;
    }
}

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

    :root {
        --body-margin: 5%;
    }
}

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

    :root {
        --body-margin: 3%;
    }

    .bodywrapper {
        grid-template-columns: 14% auto;
    }
}

@media screen and (max-width: 1100px) {
    :root {
        --body-margin: 1%;
    }
}

/* 1000px - switch to mobile */
@media screen and (max-width: 1000px) {

    :root {
        --body-margin: 2%;
    }

    .bodywrapper {
        column-gap: 5px;
        /* nuke the two column layout */
        grid-template-columns: auto;
    }

    /* make hero margin kinda-existant */
    .hero {
        margin-top: 20px;
        height: 125px;
    }

    .herotext {
        font-size: 6vw;
    }

    /* make music and filler dissapear, they're not necessary for site to function */
    .fillerbox {
        display: none;
    }

    .mobileonly {
        display: block !important;
    }

    .sidebarbutton {
        display: none;
    }


    #banners {
        display: none;
    }

    .minimusic {
        display: none;
    }

    /* also nuke the margin that's there in the body for some reason, other than the top one, just to maintain the centeredness of it */

    body {
        margin: 0px;
        margin-top: 3px;
    }

    /* make the margin off the boxes smaller to make it consistent */

    .box {
        margin-bottom: 5px;
    }

    /* reduce size of box headings */

    .box h1 {
        font-size: x-large;
    }

    .box textarea {
        width: 85%
    }

    .box input {
        width: 85%
    }

    #splashquote {
        display: none
    }

    #footer {
        grid-template-columns: auto auto;
    }
}

/* 650px */
@media screen and (max-width: 650px) {
        /* reduce size of box headings */

        .box h1 {
            font-size: large;
        }

        .box h1 {
            letter-spacing: -1.15px;
        }

        .box p {
            letter-spacing: -1px;
        }
}

/* 450px */
@media screen and (max-width: 450px) {
    /* reduce size of box headings */

    .box h1 {
        font-size: medium;
    }

    /* make featured people smoller */

    .featuredpeoplewrapper img {
        height: 36px;
        width: 36px;
    }

    /* make featured people layout smoller too */

    .featuredpeoplewrapper {
        column-gap: 5px;
        row-gap: 5px;
        grid-template-columns: 36px auto;
    }

    /* make the gallery not display a lot of information anymore */
    #overlayexplainer {
        display: none
    }

    #overlayexplainermobile {
        display: initial
    }
}