*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    position: relative;
    overflow-y: hidden;
}

:root
{
    --background_primary: #FAF9F6;
    --background_secondary: #ffffff;
    --background_highlight: #00807F;
    --text_primary: black;
    --text_shadow: rgb(221, 205, 205);
}

.cozy
{
    --background_primary: #17153B;
    --background_secondary: #433D8B;
    --background_highlight: #C8ACD6;
    --text_primary: #C8ACD6;
    --text_shadow: #2E236C;
}

.modeSwitches
{
    display:flex;
    justify-content:center;
    
}

#cozyMode
{
    background-color:var(--background_primary);
    height:4rem;
    width:4rem;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    fill: var(--text_primary);
    cursor:pointer;
}

#sunnyMode
{
    background-color:var(--background_primary);
    height:4rem;
    width:4rem;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    fill:var(--text_primary);
    cursor:pointer;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;

    position: relative;    
    overflow-y: hidden;

    background-color:var(--background_primary);
    color:var(--text_primary);
}

@font-face{
    font-family: "VHS";
    src: url("VCR_OSD_MONO_1.001.ttf");
}
.container
{
    width:100vw;
    height:auto;
    display:grid;
    grid-template-columns:25% 50% 25%;
    
    background-color:var(--background_primary);
    color:var(--text_primary);
}

.col2
{
    display:grid;
    grid-template-rows:auto auto auto;
    padding: 4rem;
}

.r1c2
{
    display: flex;
    flex-direction: column;
    justify-content:flex-end;
    align-items:center;
}

.pageName
{
    font-family: VHS;
    font-weight: lighter;
    font-style: italic;
    font-size: 4vw;
    padding:3%;
    text-shadow: -5px 5px 5px var(--text_shadow);
}

.r2c2
{
    box-shadow: -5px 5px 5px var(--text_shadow);
    display: grid;
    grid-template-columns: 50% 50%;
    z-index: 1;
}

.r3c2
{
    display: flex;
    padding-top:10px;
    grid-template-columns: 50% 50%;
    font-family: VHS;
    font-weight:lighter;
    justify-content:space-around;
    text-shadow: -5px 5px 5px var(--text_shadow);;
    font-size: 2vw;
}

.centerbox_left
{
    background-color: var(--background_secondary);
    max-height:100%;
    padding:5%;
}

.centerbox_right
{
    background-color: var(--background_secondary);
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    align-items:center;
    max-height:100%;
}

.amber
{
    max-width:100%;
    max-height:auto;
    display:block;
}

.naviButton
{
    background-color: var(--background_secondary);
    font-family: VHS;
    font-weight:normal;
    font-size: large;
    text-shadow: -5px 5px 5px var(--text_shadow);
    font-size: 2vw;
    cursor:pointer;
}

/* BACKGROUND ANIMATION */
.droplet
{
    position: absolute;
    width:2px;
    height:12px;
    top: -10px; /* Above screen to fall into frame */
    background-color:var(--text_primary);
    animation: fall linear infinite;
    z-index: 0;
}

@keyframes fall
{
    from
    {
        transform: translateY(0);
    }

    to
    {
        transform: translateY(100vh);
    }
}


.aboutPopup
{
    position: fixed;
    top:6%;
    left:3%;

    transform: scale(0);
    transition: 300ms ease-in-out;

    background-color:var(--background_secondary);
    box-shadow: -5px 5px 5px var(--text_shadow);
    font-family:VHS;
    
    height:55vh;
    width:40vw;
    
    border:1px solid black;
    z-index:2;
}

.aboutOpened
{
    transform: scale(1);
}

.aboutPopup_Header
{
    padding: 10px 15px;
    display:flex;
    justify-content:space-between;
    background-color:var(--background_highlight);
    align-content:center;
    color: var(--background_secondary);
    border: 1px solid black;
}
.aboutTitle
{
    display:flex;
    justify-content: center;
    align-items: center;
    font-weight:bold;
    font-size:large;
    box-shadow: -2px 1px 2px var(--background_highlight);
}
.aboutPopup_Body
{
    height:95%;
    padding:10px 15px;
    font-size:x-large;
    background-color:var(--background_secondary);
    border:1px solid black;
    overflow-y:auto;
}

.aboutButtons
{
    display:grid;
    grid-template-columns: 33% 33% 33%;
    background-color:var(--background_highlight);

    box-shadow: -1px 1px 2px var(--background_highlight);
    margin:1px;
    cursor:pointer;
}