:root{
    --p5-darker-gray: #232323;
    --p5-darkgray:  #323233;
    --p5-lightgray: #cacaca;
    --p5-verydarkgray: #141414;
    --p5-red: #8c0202;
    --p5-darkred: #530201;
    --p5-vibrantred: #FD0000;
    --p5-cyan: #31f6f6;
    --top-bar-height: 50px;
    --top-bar-triangle-height: 10px;
    --section-menu-title-height: 50px;
    --section-menu-height: 120px;
    --section-menu-item-height: 100px;
    --back-to-top-height: 40px;
    --title-padding-x: 0.6em;
    --title-padding-y: 1em;
    --standard-padding: 20px;
    --max-desktop-width: 1000px;
}

@font-face{
    font-family: Broken15;
    src: url("fonts/Broken15.woff2"), url("fonts/BROKEN15.TTF");
}

@font-face{
    font-family: PostinkantajaJob;
    src: url("fonts/PostinkantajaJob.woff2"), url("fonts/PostinkantajaJob.ttf");
}

@font-face{
    font-family: FontyMcfonterson;
    src: url("fonts/Fonty_McFonterson.woff2"), url("fonts/FontyMcfonterson-vewZ.ttf");
}


body{
    color: white;
    min-height: 100vh; 
    font-family: "Arsenal", sans-serif;
}

#main{
    display: grid;
}

header{
    position: sticky;
    top: 0;
    font-family: Broken15, serif;
    font-size: calc(var(--top-bar-height) - 15px);
}

#logo{
    font-size: calc(var(--top-bar-height) - 10px);
    color: white;
}

#logo img{
    height: var(--back-to-top-height);
}

#main-menu{
    height: calc(100vh - var(--top-bar-height));
    position: sticky;
    top: var(--top-bar-height);
    overflow-y: auto;
}

.show-hidden{
    display: block !important;
    animation: show-circle 0.15s linear;
}

@keyframes show-circle {
  0% {clip-path: circle(0%);}
  99% {clip-path: circle(75%);}
  100% {clip-path: none;}
}

#main-menu ul{
    margin: 0;
    padding: 0;
}

#main-menu a{
    text-decoration: none;
}

#main-menu ul li{
    display: block;    
    color: white;
    text-decoration: none;
    font-family: PostinkantajaJob, sans-serif;
}

#page-cover{
    color: black;
    display: inline-grid;
    grid-template-columns: subgrid;
}

#page-cover, #back-to-top{
    background-color: white;
    background-image: 
        linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 58%, rgba(255, 255, 255, 0.2) 100%),
        url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='80' height='80' patternTransform='scale(1) rotate(75)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M34.72 34.72l-10.08-3.36-3.52-10.24 10.24 3.52zm-8.96-4.8L32 32l-2.08-6.24-6.4-2.24zm19.52 4.8l3.36-10.08 10.24-3.52-3.52 10.24zm4.8-8.96L48 32l6.24-2.08 2.24-6.4zm8.96 33.28L48.8 55.52l-3.36-10.08 10.08 3.36zm-8.96-4.8l6.4 2.24-2.24-6.4L48 48zm-29.12 4.8l3.52-10.24 10.08-3.36-3.36 10.08zm4.8-8.96l-2.24 6.4 6.4-2.24L32 48zM40 25.92l-4.64-9.44L40 6.4l4.64 10.08zm-2.88-9.44L40 22.24l2.88-5.76L40 10.24zm26.4 28.16L54.08 40l9.44-4.64L73.6 40zM57.76 40l5.76 2.88L69.76 40l-6.24-2.88zM40 73.6l-4.64-10.08L40 54.08l4.64 9.44zm-2.88-10.08L40 69.76l2.88-6.24L40 57.76zM16.48 44.64L6.4 40l10.08-4.64L25.92 40zM10.24 40l6.24 2.88L22.24 40l-5.76-2.88z'  stroke-width='1' stroke='none' fill='%23323233ff'/><path d='M23.2 16.16V3.84h12.32zM16.16 56.8H3.84V44.48zM56.8 76.16H44.48L56.8 63.84zm19.36-40.64L63.84 23.2h12.32zM56.8 16.16L44.48 3.84H56.8zM3.84 35.52V23.2h12.32zm31.68 40.64H23.2V63.84zM76.16 56.8H63.84l12.32-12.32zM13.28 8.32l5.44 5.44V8.32zm-4.96 58.4l5.44-5.44H8.32zm58.4 4.96l-5.44-5.44v5.44zm4.96-58.4l-5.44 5.44h5.44zm-10.4-4.96v5.44l5.44-5.44zM8.32 18.72h5.44l-5.44-5.44zm10.4 52.96v-5.44l-5.44 5.44zm52.96-10.4h-5.44l5.44 5.44z'  stroke-width='1' stroke='none' fill='%23000000ff'/><path d='M7.52 7.52A10.41 10.41 0 0010.72 0h-1.6c0 2.4-.96 4.64-2.72 6.4A8.97 8.97 0 010 9.12v1.6c2.88 0 5.6-1.12 7.52-3.2zM80 9.12c-2.4 0-4.64-.96-6.4-2.72A8.97 8.97 0 0170.88 0h-1.6c0 2.88 1.12 5.6 3.2 7.52a10.41 10.41 0 007.52 3.2zM73.6 73.6a8.97 8.97 0 016.4-2.72v-1.6c-2.88 0-5.6 1.12-7.52 3.2a10.41 10.41 0 00-3.2 7.52h1.6c0-2.4.96-4.64 2.72-6.4zM7.52 72.48A10.41 10.41 0 000 69.28v1.6c2.4 0 4.64.96 6.4 2.72A8.97 8.97 0 019.12 80h1.6c0-2.88-1.12-5.6-3.2-7.52zm-4-68.96A4.7 4.7 0 004.96 0H0v4.96a5.4 5.4 0 003.52-1.44zm72.96 0A4.7 4.7 0 0080 4.96V0h-4.96a5.4 5.4 0 001.44 3.52zm0 72.96A4.7 4.7 0 0075.04 80H80v-4.96a5.4 5.4 0 00-3.52 1.44zm-72.96 0A4.7 4.7 0 000 75.04V80h4.96a5.4 5.4 0 00-1.44-3.52z'  stroke-width='1' stroke='none' fill='%23323233ff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    background-attachment: fixed;
}

#page-cover section h1{
    font-family: PostinkantajaJob, serif;
    font-size: 45px;
    line-height: 90%;
    margin: 40px 0px 5px 0px;
}

#page-cover section span{  
    font-size: normal;
    font-weight: 700;

}

#page-cover img{
    max-height: 100%;
    max-width: 100%;
    align-self: center;
    justify-self: right;
    padding-right: var(--standard-padding);
}


#page-nav{
    grid-row: 2;
    grid-column: 1 / 4;
}

#page-nav span{
    font-family: FontyMcfonterson, sans-serif;
    font-size: 1.6em;
    margin-right: 0.25em;
    vertical-align: bottom;
}

#page-nav ul{
    margin: 0px;
    padding: 0px;
    display: inline;
}

#page-nav ul li{
    display: inline-block;
    padding: 0.6em 1em;
    background-color: var(--p5-darkgray);
    margin: 0;
    color: white;
    font-weight: 700;
}

#page-nav ul li:hover, #section-nav nav ul li:hover, li:hover .section-nav-icon{
    animation: page-nav-item-hover-animation 0.5s linear 0s infinite;
    background-color: var(--p5-vibrantred);
}

#page-nav ul a:nth-child(3n+1) > li, main h1, main h4, #section-nav nav ul a:nth-child(3n+2) li, #section-nav nav ul a:nth-child(3n+2) .section-nav-icon, .tooltip-cell:hover .tooltip-text{
    clip-path: polygon(0.4em 0.45em, calc(100% - 0.2em) 0.2em, calc(100% - 0.1em) calc(100% - 0.2em), 0.1em calc(100% - 0.33em));
}

#page-nav ul a:nth-child(3n+2) > li, main h2, main h5, #section-nav nav ul a:nth-child(3n+1) li, #section-nav nav ul a:nth-child(3n+1) .section-nav-icon{
    clip-path: polygon(0.4em 0.2em, calc(100% - 0.4em) 0.4em, calc(100% - 0.1em) calc(100% - 0.1em), 0.1em calc(100% - 0.4em));
}

#page-nav ul a:nth-child(3n+3) > li, main h3, main h6, #section-nav nav ul a:nth-child(3n+3) li, #section-nav nav ul a:nth-child(3n+3) .section-nav-icon{
    clip-path: polygon(0.3em 0.2em, calc(100% - 0.6em) 0.3em, calc(100% - 0.4em) calc(100% - 0.3em), 0.2em calc(100% - 0.1em));
}

@keyframes page-nav-item-hover-animation{
    0%, 100% {
        clip-path: polygon(0.4em 0.2em, calc(100% - 0.4em) 0.4em, calc(100% - 0.4em) calc(100% - 0.1em), 0.2em calc(100% - 0.4em));
    }
    25% {
        clip-path: polygon(0.4em 0.45em, calc(100% - 0.2em) 0.2em, calc(100% - 0.1em) calc(100% - 0.2em), 0.1em calc(100% - 0.33em));
    }
    50% {
        clip-path: polygon(0.4em 0.2em, calc(100% - 0.4em) 0.4em, calc(100% - 0.1em) calc(100% - 0.1em), 0.1em calc(100% - 0.4em));
    }
    75% {
        clip-path: polygon(0.3em 0.2em, calc(100% - 0.6em) 0.3em, calc(100% - 0.4em) calc(100% - 0.3em), 0.2em calc(100% - 0.1em));
    }
}

#back-to-top{
    grid-row: 4;
    grid-column: 1 / 4;
    position: sticky;
    top: var(--top-bar-height);
    text-align: right;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
    color: black;
    z-index: 3;
    overflow: hidden;
}

#back-to-top a{
    padding: 2px 10px;
}

#back-to-top a:link, #back-to-top a:visited{
    font-family: PostinkantajaJob, serif;
    font-size: calc(var(--back-to-top-height) - 10px);
    text-decoration: none;
    color: black;
    text-shadow: 4px 4px 1px white, -4px -4px 1px white, -4px 4px 1px white, 4px -4px 1px white;
    background-color: white;
}

#back-to-top a:link svg, #back-to-top a:visited svg{
    fill: black;
    filter: drop-shadow(-1px -1px 0px white) drop-shadow(1px 1px 0px white) drop-shadow(-1px 1px 0px white) drop-shadow(1px -1px 0px white)
            drop-shadow(-2px -2px 0px white) drop-shadow(2px 2px 0px white) drop-shadow(-2px 2px 0px white) drop-shadow(2px -2px 0px white);
}

#back-to-top a:active svg, #back-to-top a:hover svg{
    fill: white;
    filter: drop-shadow(-1px -1px 0px black) drop-shadow(1px 1px 0px black) drop-shadow(-1px 1px 0px black) drop-shadow(1px -1px 0px black)
            drop-shadow(-2px -2px 0px black) drop-shadow(2px 2px 0px black) drop-shadow(-2px 2px 0px black) drop-shadow(2px -2px 0px black);
}

#back-to-top a:active, #back-to-top a:hover{
    color: white;
    text-shadow: 4px 4px 1px black, -4px -4px 1px black, -4px 4px 1px black, 4px -4px 1px black;
}

main{
    text-align: justify;
}

main h1:first-child, main h2:first-child, main h3:first-child, main h4:first-child, main h5:first-child, main h6:first-child{
    margin-top: 0px !important;
}

main h1, main h2, main h3, main h4, main h5, main h6{
    background-color: white;
    width: 80%;
    margin: 2em auto 0.4em auto;
    text-align: center;
    color: var(--p5-darkgray);
    padding: 1em 1em;
}

main h4, main h5, main h6{
    font-size: large;
    width: 60%;
}

main a:link, main a:visited, .hangout label{
    text-decoration: underline;
    color: white;
}

main a:hover, .hangout label:hover{
    text-decoration: none;
    animation: main-menu-hover-animation 0.75s linear 0s infinite;
}

main img{
    max-width: 100%;
    margin: auto;
    display: block;
}

footer{
    background-color: black;
    font-size: smaller;
    padding: var(--standard-padding);
    text-align: center;
    clip-path: polygon(0px var(--standard-padding), 0% 100%, 100% 100%, 100% 0%);
}

#section-nav{
    z-index: 4;
    display: inline-grid;
    grid-template-rows: subgrid;
}

#section-nav-background{
    z-index: 3;
    background-color: var(--p5-red);
}

#section-nav-title{
    grid-row: 1;
    font-family: FontyMcfonterson, sans-serif;
    padding: var(--standard-padding) 0px 0px var(--standard-padding);
    text-shadow: 2px 2px 1px black, -2px -2px 1px black, -2px 2px 1px black, 2px -2px 1px black;
    margin: 0;
}

#section-nav nav ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    margin: auto;
    padding: 0;
}

#section-nav nav ul a:link, #section-nav nav ul a:visited{
    text-decoration: none;
}

#section-nav nav ul li{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    text-align: center;
    justify-content: center;
    width: var(--section-menu-item-height);
    background-color: var(--p5-darkred);
    padding: var(--standard-padding);
    color: white;
    align-items: center;
    font-weight: 700;
}

#section-nav nav ul li.icon{
    padding: 0;
    margin: 0 0.5em;
    clip-path: none !important;
    background-color: transparent;
    height: var(--section-menu-item-height);
}

.section-nav-icon{
    width: 90%;
    height: 90%;
    background-color: var(--p5-darkred);
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}

span.section-index{
    font-size: 80px;
}
#section-nav-scrollbar{
    background-color: white;
    height: 5px;
}

#section-nav-scrollbar-indicator{
    background-color: black;
    height: 5px;
    width: calc(100vw - 100%);
    float: right;
}

#main-menu, header, #main-backdrop, #main-menu nav{
    background-color: black;
    background-image: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) var(--top-bar-height), rgba(0, 0, 0, 1) calc(var(--top-bar-height) + 25%), rgba(0, 0, 0, 1) 100%),
        url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='100' height='80' patternTransform='scale(3) rotate(70)'><rect x='0' y='0' width='100%' height='100%' fill='%23000000ff'/><path d='M25 51.35l2.58 6 6.53.58-4.92 4.3 1.45 6.4L25 65.28l-5.64 3.36 1.45-6.39-4.92-4.3 6.53-.59zM21.86 65.2L25 63.35l3.14 1.86-.83-3.53 2.75-2.39-3.64-.33-1.45-3.36-1.44 3.36-3.61.3 2.75 2.4zM50 71.35l2.58 6 6.53.58-4.92 4.3 1.45 6.4L50 85.28l-5.64 3.36 1.45-6.39-4.92-4.3 6.53-.58zM46.86 85.2L50 83.35l3.14 1.86-.8-3.56 2.74-2.39-3.64-.33L50 75.57l-1.44 3.36-3.64.33 2.75 2.4zM75 11.35l2.58 6 6.53.58-4.92 4.3 1.45 6.4L75 25.29l-5.64 3.36 1.45-6.39-4.92-4.3 6.53-.59zM71.86 25.2L75 23.35l3.14 1.86-.8-3.56 2.74-2.39-3.64-.33L75 15.57l-1.44 3.36-3.64.33 2.75 2.4zM50-8.65l2.58 6 6.53.58-4.92 4.3 1.45 6.4L50 5.28l-5.64 3.36 1.45-6.39-4.92-4.3 6.53-.59zM46.86 5.2L50 3.35l3.14 1.86-.8-3.56 2.74-2.39-3.64-.33L50-4.43l-1.44 3.36-3.64.33 2.75 2.4zM100 43.35l-3.14 1.86.8-3.53-2.74-2.42 3.64-.33L100 35.6v-4.25l-2.58 6.03-6.53.58 4.94 4.3-1.47 6.4 5.64-3.37zm-94.39 5.3l-1.47-6.39 4.94-4.3-6.52-.59L0 31.36v4.25l1.42 3.33 3.64.33-2.75 2.42.8 3.53L0 43.35v1.94z'  stroke-width='1' stroke='none' fill='%23161616ff'/><path d='M75 51.35l2.58 6 6.53.58-4.92 4.3 1.45 6.4L75 65.28l-5.64 3.36 1.45-6.39-4.92-4.3 6.53-.59zM71.86 65.2L75 63.35l3.14 1.86-.8-3.56 2.74-2.39-3.64-.33L75 55.57l-1.44 3.36-3.64.33 2.75 2.4zM100 75.6v-4.25l-2.58 6.03-6.53.58 4.94 4.3-1.47 6.4 5.64-3.37v-1.94l-3.14 1.86.8-3.53-2.74-2.42 3.64-.33zm-100 0l1.42 3.33 3.64.33-2.75 2.42.8 3.53L0 83.35v1.94l5.61 3.36-1.47-6.39 4.94-4.3-6.52-.58L0 71.34zm25-64.25l2.58 6 6.53.58-4.92 4.3 1.45 6.4L25 25.29l-5.64 3.36 1.45-6.39-4.92-4.3 6.53-.59zM21.86 25.2L25 23.35l3.14 1.86-.83-3.53 2.75-2.39-3.64-.33-1.45-3.36-1.44 3.36-3.61.3 2.75 2.4zM100 3.35L96.86 5.2l.8-3.53-2.74-2.42 3.64-.33L100-4.4v-4.25l-2.58 6.02-6.53.59 4.94 4.3-1.47 6.4L100 5.28zM5.61 8.65L4.14 2.26l4.94-4.3-6.52-.59L0-8.65v4.25l1.42 3.33 3.64.33L2.3 1.68l.8 3.53L0 3.35v1.94zM50 31.35l2.58 6 6.53.58-4.92 4.3 1.45 6.4L50 45.28l-5.64 3.36 1.45-6.39-4.92-4.3 6.53-.59zM46.86 45.2L50 43.35l3.14 1.86-.8-3.56 2.74-2.39-3.64-.33L50 35.57l-1.44 3.36-3.64.33 2.75 2.4z'  stroke-width='1' stroke='none' fill='%23161616ff'/><path d='M45.28 58.82l3.25-.3 1.3-3 1.28 3 3.25.3-2.47 2.14.75 3.2-2.8-1.67L47 64.15l.75-3.2zM100 62.65v-6.97l-1.3 3-3.26.3 2.48 2.14-.75 3.2zM0 62.57l2.64 1.58-.75-3.2 2.47-2.13-3.25-.3L0 55.9zm70.28 16.25l3.25-.3 1.3-3 1.28 3 3.25.3-2.47 2.14.75 3.2-2.8-1.67L72 84.15l.75-3.2zm-50 0l3.25-.3 1.3-3 1.28 3 3.25.3-2.47 2.14.75 3.2-2.8-1.67L22 84.15l.75-3.2zm31.6-57.86l.76 3.2-2.8-1.67L47 24.15l.75-3.2-2.47-2.13 3.25-.3 1.3-3 1.28 3 3.25.3zM100 15.68l-1.3 3-3.26.3 2.48 2.14-.75 3.2 2.83-1.67zM2.64 24.15l-.75-3.2 2.47-2.13-3.25-.3L0 15.9v6.67zM76.89.95l.75 3.2-2.8-1.66L72 4.15l.75-3.2-2.47-2.13 3.25-.3 1.3-3 1.28 3 3.25.3zm-50 0l.75 3.2-2.8-1.66L22 4.15l.75-3.2-2.47-2.13 3.25-.3 1.3-3 1.28 3 3.25.3zm50 40l.75 3.2-2.8-1.66L72 44.15l.75-3.2-2.47-2.13 3.25-.3 1.3-3 1.28 3 3.25.3zm-50 0l.75 3.2-2.8-1.66L22 44.15l.75-3.2-2.47-2.13 3.25-.3 1.3-3 1.28 3 3.25.3z'  stroke-width='1' stroke='none' fill='%23161616ff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    background-attachment: fixed;
}

.arcana{
    font-family: "Oswald", sans-serif;
    color: white;
    background-color: black;
    padding: 0 0.3em;
    font-weight: 300;
    clip-path: polygon(0.2em 0.3em, calc(100% - 0.1em) 0.2em, calc(100% - 0.2em) calc(100% - 0.1em), 0.1em calc(100% - 0.2em));
}

main table{
    min-width: 100%;
    border-collapse: collapse;
}

.hangouts-wrapper, main table{
    border: 2px solid #383839;
}

.hangout, .hangout-header{
    display: grid;
    min-width: 100%;
    grid-template-columns: 1fr 1fr 3fr 2fr 1fr;
    text-align: center;
}

main table thead tr, .hangout-header{
    background-color: var(--p5-darker-gray);
    font-weight: bold;
    text-align: center;
}

.hangout-details{
    grid-column: 1  / 6;
    text-align: left;
    padding: 0 calc(var(--standard-padding) * 2);
    display: none;
}

.hangout input{
    display: none;
}

.hangout input:checked ~ .hangout-details{
    display: block;
}

main table td, .hangout, .hangout-header{
    padding: 0.5rem;
}

main table tbody tr{
    background-color: var(--p5-darkgray);
}

main table tbody tr:nth-child(2n), .hangout:nth-child(2n+1){
    background-color: #2A2A2B;
    background-color: #2A2A2B;
    background-color: #2A2A2B;
}

main table tbody tr:hover, .hangout:hover{
    background-color: #3C3C3D !important;
}

table.gift-table tbody tr td:nth-child(3), table.gift-table tbody tr td:nth-child(4){
    text-align: right;
}

table.gift-table tbody tr td:nth-child(1), table.gift-table tbody tr td:nth-child(2){
    text-align: left;
}

table.gift-table tbody tr td:nth-child(3){
    min-width: 5em;
}

.table-wrapper {
    width: 100%;
    overflow-x: scroll;
}

.table-sticky-column{
    position: sticky;
    left: 0px;
    background-color: inherit;
}

main ul, main ol{
    padding: 0 var(--standard-padding);
}

main ol li ul{
    padding: 0 var(--standard-padding);
}

main ol li::marker{
    font-weight: bold;
}

main ul li::marker{
    content: "✦ "
}

.rank-benefits{
    padding: var(--standard-padding);
    background-color: var(--p5-darker-gray);
    text-align: left;
}

.rank-benefits p::before{
    content: "GET";
    float: left;
    margin: 0.1em 0.2em;
}

.rank-benefits p::before, .exam-label{
    font-size: 1.25em;
    display: block;
    font-family: FontyMcfonterson, sans-serif;
}

.spoiler{
    background: var(--p5-verydarkgray);
    color:  var(--p5-verydarkgray);
    filter: blur(5px);
}

.spoiler:hover, .spoiler:focus{
    color: white;
    background: none;
    filter: none;
}

@media (max-width: 600px) {
    .big-screen-only{
        display: none;
    }

    body{
        background: var(--p5-darkgray);
    }

    #main{
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: var(--top-bar-height) minmax(0, auto) minmax(0, auto) var(--back-to-top-height) auto auto minmax(0, var(--section-menu-title-height)) minmax(0, var(--section-menu-height));
    }

    header{
        display: inline-grid;
        grid-template-columns: subgrid;
        grid-row: 1;
        grid-column: 1 / 4;
        z-index: 4;
        height: 150%;
        clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 0% 100%);
        background-color: black;
    }
    #more-nav-toggle{
        grid-row: 1;
        grid-column: 3;
        padding: 10px 10px;
        text-align: right;
    }

    #logo{
        grid-row: 1;
        grid-column: 2 / 4;
        padding: 0px 10px;
        text-align: right;
    }

    #section-nav, #section-nav-background, #section-nav-backdrop{
        grid-row: 7 / 9;
        grid-column: 1 / 4;
    }

    #section-nav-background{
        clip-path: polygon(0% 20%, 95% 5%, 100% 20%, 100% 100%, 0% 100%);
    }

    #page-cover{
        grid-row: 2 / 4;
        grid-column: 1 / 4;
        z-index: 2;
    }

    #page-cover section{
        grid-row: 1;
        grid-column: 1 / 3;
    }

    #page-cover img{
        grid-row: 1;
        grid-column: 3 / 3;
    }

    #page-cover section, #page-cover nav{
        margin: 0px var(--standard-padding);
    }

    main{
        grid-row: 5;
        grid-column: 1 / 4;
        padding: var(--standard-padding);
    }

    footer{
        grid-row: 6;
        grid-column: 1 / 4;
    }

    #main-menu{
        display: none;
        grid-column: 1 / 4;
        grid-row: 2 / 9;
        z-index: 999;
    }

    #main-nav-toggle a:link, #main-nav-toggle a:visited{
        color: white;
        text-decoration: none;
    }

    #main-nav-toggle{
        grid-row: 1;
        grid-column: 1;
        padding: 10px 10px;
        text-align: left;
    }
    
    #main-menu ul li{
        font-size: 3rem;
        text-align: center;
    }

    #section-nav nav{
        grid-row: 2;
        overflow-y: hidden;
        overflow-x: auto;
    }

    #section-nav nav ul{
        width: min-content;
        min-width: 100%;
    }

    #section-nav, #section-nav-background{
        position: sticky;
        bottom: 0;
    }

    #section-nav-title{
        font-size: 30px;
    }

    main{
        min-height: calc(100vh - var(--top-bar-height) - var(--section-menu-height));
    }

    #section-nav nav ul li{
        height: var(--section-menu-item-height);
    }
}

@media (min-width: 601px) {
    .small-screen-only{
        display: none;
    }

    body{
        background-color: var(--p5-darkred);
        background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='32' height='32' patternTransform='scale(1) rotate(65)'><rect x='0' y='0' width='100%' height='100%' fill='%232b2b3100'/><path d='M37.657 10.343l-4.243 4.243m-2.828 2.828l-4.243 4.243m11.314 0l-4.243-4.243m-2.828-2.828l-4.243-4.243m-20.686 0l-4.243 4.243m-2.828 2.828l-4.243 4.243m11.314 0l-4.243-4.243m-2.828-2.828l-4.243-4.243'  stroke-linejoin='round' stroke-linecap='round' stroke-width='5' stroke='%230000005a' fill='none'/><path d='M16-8v6m0 4v6m8-8h-6m-4 0H8m8 24v6m0 4v6m8-8h-6m-4 0H8'  stroke-linejoin='round' stroke-linecap='round' stroke-width='5' stroke='%233b3b3b42' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>"),
            linear-gradient(0deg, rgba(8, 4, 4, 1) 0%, rgba(145, 0, 0, 1) 50%, rgba(31, 2, 2, 1) 100%);
    }

    #main{
        width: 90%;
        max-width: var(--max-desktop-width);
        grid-template-rows: var(--top-bar-height) auto 30px auto 30px auto auto auto;
        grid-template-columns: minmax(230px, 1fr) 3fr 1fr;
        margin: auto;
        row-gap: 0px;
    }

    header{
        grid-row: 1;
        grid-column: 1;
        z-index: 2;
        clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    #logo{
        text-align: right;
        margin: 0px;
        padding: 0 1rem;
    }

    #section-nav{
        grid-row: 1 / 3;
        grid-column: 2 / 4;
        z-index: 3;
    }

    #section-nav nav{
        padding: var(--standard-padding);
    }

    #section-nav-background{
        grid-row: 1 / 3;
        grid-column: 2 / 4;
        z-index: 2;
        clip-path: polygon(0% 2rem, 95% 1rem, 100% 5rem, 97% calc(100% - 2rem), 70% 100%, 3% calc(100% - 15px));
    }

    #page-cover{
        grid-row: 3 / 6;
        grid-column: 2 / 4;
        z-index: 2;
        clip-path: polygon(calc(var(--standard-padding) / 4) var(--standard-padding), 100% calc(var(--standard-padding) / 2), 100% calc(100% - var(--standard-padding)), calc(var(--standard-padding) / 2) calc(100% - (var(--standard-padding) / 2)));
    }
    
    #page-cover img{
        grid-row: 1;
        grid-column: 2;
        margin-top: var(--standard-padding);
        max-height: calc(100% - 50px);
        align-self: center;
    }

    #page-cover section span:only-child{
        margin: 0 var(--standard-padding);
    }

    #page-cover section{
        margin: 0 var(--standard-padding);
        grid-row: 1;
        grid-column: 1;
        align-self: center;
    }
    
    #page-cover nav{
        margin: var(--standard-padding);
    }

    #back-to-top{
        display: none;
    }

    main.simple-page{
        grid-row: 2 / 8;
    }

    main.no-cover{
        grid-row: 3 / 8;
    }

    main{
        grid-row: 6 / 8;
        grid-column: 2 / 4;
        background-color: var(--p5-darkgray);
        clip-path: polygon(0% var(--standard-padding), 100% 0%, calc(100% -  var(--standard-padding) / 2) 100%, calc(var(--standard-padding) / 3) calc(100% - var(--standard-padding) / 3));
        padding: calc(3 * var(--standard-padding));
    }

    footer{
        grid-row: 8;
        grid-column: 2 / 4;
    }

    #main-menu{
        grid-column: 1;
        grid-row: 2 / 9;
        height: min-content;
        z-index: 2;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20px calc(100% - 20px));
        padding: 0px 0px 20px 20px;
    }

    #main-menu nav{
        padding-left: 1rem;
    }

    #main-backdrop{
        grid-column: 2 / 4;
        grid-row: 1 / 8;
        z-index: -91;
        clip-path: polygon(0% 0%, 95% 0, 90% 100%, 0% 100%);
    }

    #main-menu ul{
        display: inline-grid;
        grid-template-columns: 100%;
        grid-auto-rows: min-content;
        max-height: calc(100vh - var(--top-bar-height));
        overflow-y: auto;
        width: 100%;
    }

    #main-menu ul li{
        font-size: 2rem;
        text-align: right;
        width: min-content;
        margin: 0 0 0 auto;
        padding-right: 1rem;
    }

    #main-menu ul li:hover{
        animation: main-menu-hover-animation 0.75s linear 0s infinite;
    }

    #section-nav nav ul{
        flex-wrap: wrap;
    }

    #section-nav-title{
        font-size: 45px;
    }

    @keyframes main-menu-hover-animation {
        0%, 100% {
            filter: drop-shadow(-3px -3px 0px var(--p5-vibrantred)) drop-shadow(-2px -2px 0px var(--p5-vibrantred)) drop-shadow(-1px -1px 0px var(--p5-vibrantred));
        }
        25% {    
            filter: drop-shadow(3px 3px 0px var(--p5-vibrantred)) drop-shadow(2px 2px 0px var(--p5-vibrantred)) drop-shadow(1px 1px 0px var(--p5-vibrantred));
        }
        50% {    
            filter: drop-shadow(-3px 3px 0px var(--p5-vibrantred)) drop-shadow(-2px 2px 0px var(--p5-vibrantred)) drop-shadow(-1px 1px 0px var(--p5-vibrantred));
        }
        75% {
            filter: drop-shadow(3px -3px 0px var(--p5-vibrantred)) drop-shadow(2px -2px 0px var(--p5-vibrantred)) drop-shadow(1px -1px 0px var(--p5-vibrantred));
        }
    }

    .simple-page-title{
        grid-row: 1;
        grid-column: 2 / 4;
        text-align: left;
        padding-left: var(--standard-padding);
        font-family: FontyMcfonterson, sans-serif;
        font-size: 45px;
        text-shadow: 2px 2px 1px black, -2px -2px 1px black, -2px 2px 1px black, 2px -2px 1px black;
        z-index: 5;
    }

    .hangout-header{
        position: sticky;
        top: 0;
    }

    .tooltip-text{
        visibility: hidden; /* Hidden by default */
        background-color: var(--p5-verydarkgray);
        color: white;
        text-align: center;
        padding: calc(var(--standard-padding) / 2) var(--standard-padding);
        position: absolute;
        z-index: 999;
    }

    .tooltip-cell:hover .tooltip-text {
        visibility: visible;
    }

    #section-nav nav ul li.text{
        width: 140px;
    }
}