@font-face {
    font-family: "Inter";
    src: url('Fonts/InterVariable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Bold";
    src: url('Fonts/InterVariable.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    /*General*/
    --global-padding: 25px;
    --rect-round: 10px;
    --outer-round: 50px;
    --header-margin: 5px;
    --other-margin: 15px;
    --left-column-width: 800px;
    --right-column-width: 300px;
    --news-blurb-height: 50px;
    --mobile-break: 800px;
    --paragraph-size: 18px;
    --header-weight: 600;
    --main-top-offset: 300px;
    --main-bottom-offset: 200px;
    --global-transition: 0.5s;
    --input-scale: 1;

    /* Mobile/Desktop Vars */
    --mobile-display: none;
    --desktop-display: inherit;
    --desktop-var: 1;

    /*Rows*/
    --grid-rows: 3;
    --grid-row-width: calc((100%/var(--grid-rows)) - (var(--global-padding) * 2)
            /*<-- this removes the padding on the container itself*/
            - ((var(--global-padding) * (var(--grid-rows) - 1)) * (1 / var(--grid-rows))));

    /*Colors*/
    --accent-color1: rgb(179, 120, 209);
    --accent-color2: rgb(96, 162, 177);
    --accent-color3: rgb(175, 156, 99);
    --accent-color3-text: rgb(119, 83, 40);
    --paragraph-color: rgb(65, 62, 62);
    --background-color: rgb(255, 255, 255);
    --background-color2: rgb(83, 77, 77);
}


/* CONTAINERS */

/* Desktop and Mobile Specific */

.desktop_only {
    display: var(--desktop-display) !important;
}

.mobile_only {
    display: var(--mobile-display) !important;
}

/* General */

html {
    scroll-behavior: smooth;
}

body {
    background-image: url('Images/background_tile.webp');
    background-repeat: repeat;
    background-position: center;
    background-attachment: scroll;
    background-blend-mode: overlay;
    background-color: rgba(0, 0, 0, 0.5);
    margin: 0;
    display: flex;
    justify-content: center;
    font-family: sans-serif;
}

/* Background Box */

#background_box {
    position: static;
    display: flex;
    flex-direction: row;
    height: auto;
    justify-self: center;
    margin-top: var(--main-top-offset);
    margin-bottom: var(--main-bottom-offset);
    width: calc(var(--left-column-width) + var(--right-column-width) + var(--global-padding));
    max-width: 100vw;
}

.background_color_container {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    height: 100%;
    transition: background-color var(--global-transition) ease;
}

#background_mask {
    display: inline;
    mask-image: url('Images/BackgroundAlphaMaps/main.png');
    mask-repeat: repeat;
    mask-position: center;
    background-color: var(--background-color2);
    z-index: 1;
}

/* 404 Container */

#not_found_container {
    position: relative;
    display: flex;
    justify-self: center;
    align-self: center;
    width: 600px;
    height: 300px;
}

/* Columns */

#left_column {
    display: flex;
    flex-direction: column;
    width: var(--left-column-width);
}

#right_column {
    position: relative;
    display: grid;
    flex-direction: column;
    margin-left: var(--global-padding);
    width: var(--right-column-width);
    background-color: var(--background-color);
    transition: background-color var(--global-transition) ease;
}

#right_column_inner {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
    padding: var(--global-padding);
}

/* Side Bar */

#side_bar {
    position: sticky;
    top: var(--global-padding);
    width: calc(var(--right-column-width) - var(--global-padding) * 4);
    height: min-content;
}

/* Left Container */

#left_anchor_container {
    position: sticky;
    top: calc(var(--main-top-offset) + calc(var(--global-padding) * 2));
    left: 0;
    width: 0px;
    height: 0px;
}

#left_container {
    position: absolute;
    display: grid;
    width: 100px;
    height: 0;
    right: 0px;
    top: 0px;
    transform: translate(-50%, calc(var(--global-padding) * -2));
}

/* Upper Container */

#upper_anchor_container {
    position: relative;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    background-color: white;
}

#upper_container {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    transform: translateY(calc((var(--main-top-offset) + var(--global-padding) * 2) * -1));
    left: 0px;
    bottom: 0px;
    height: var(--main-top-offset);
    width: calc(var(--left-column-width) + var(--right-column-width) + var(--global-padding));
    max-width: 100vw;
}

#right_container {
    position: absolute;
    top: 0;
    transform: translateX(calc(var(--left-column-width) + var(--right-column-width) + var(--global-padding) * 3));
}

/* Main Space */

#main {
    padding: var(--global-padding);
    flex: 1;
    bottom: 0;
}

.main_page_article {
    position: relative;
    left: calc(var(--global-padding) * -1);
    bottom: calc(var(--global-padding) * -1);
    width: 100%;
    padding: var(--global-padding);
    transition: background-color var(--global-transition) ease;
}

/* News */

#news {
    display: flex;
    flex-direction: column;
    height: auto;
    margin-bottom: var(--global-padding);
    width: auto;
    padding: 0;
    position: relative;
    overflow: hidden;
}

#news_image {
    position: relative;
    height: calc(var(--left-column-width) * (9/16));
    width: var(--left-column-width);
    object-fit: cover;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

/* Music Page */

.column_panel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--global-padding);
}

.music_panel {
    display: grid;
    position: relative;
    width: var(--grid-row-width);
    aspect-ratio: 1;
}

.album_art {
    position: absolute;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    padding: 0;
    z-index: 0;
}

/* Misc Art */

.misc_art {
    max-height: 380px;
    max-width: calc(var(--left-column-width) - var(--global-padding) * 6);
    object-fit: cover;
}

.misc_art_modal_media {
    justify-self: center;
    width: 100%;
    max-width: 800px;
    height: auto;
    display: none;
}

/* Style Only*/

.outer_box_design {
    border: calc(var(--global-padding) * 2) solid transparent;
    background-image: url('Images/border_image_background.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-image-source: url('Images/border_image.webp');
    border-image-slice: 50;
    border-image-repeat: stretch;
}

.inner_design {
    border: var(--global-padding) solid transparent;
    border-image-source: url('Images/inner_border_image.webp');
    border-image-slice: 50;
    border-image-repeat: stretch;
    border-color: rgb(0, 0, 0);
    padding: 0px;
    background-color: var(--background-color);
    transition: background-color var(--global-transition) ease;
}

/* MODAL CONTAINERS */

/* Music Modal */

.modal {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0, 0, 0, 0.5);
    padding-bottom: env(safe-area-inset-bottom);
    top: env(safe-area-inset-top);
    left: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    z-index: 9;
    opacity: 0;
    transition: opacity var(--global-transition) ease;
    pointer-events: none;
}

#mobile_side_bar {
    position: fixed;
    display: flex;
    flex-direction: column;
    flex: 1;
    top: env(safe-area-inset-top);
    bottom: env(safe-area-inset-bottom);
    right: calc(var(--global-padding) * -5 - var(--right-column-width));
    border-bottom: 0;
    border-top: 0;
    border-right: 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--global-padding) * 2);
    padding-top: calc(var(--global-padding) * 2);
    padding-right: calc(var(--global-padding) * 3);
    width: var(--right-column-width);
    transition: right calc(var(--global-transition) * 0.5) ease-out;
    height: 100lvh;
    z-index: 10;
}

#mobile_top_bar {
    z-index: 9;
    position: fixed;
    display: none;
    flex: 1;
    flex-direction: row;
    width: calc(100vw - var(--global-padding) * 2);
    top: var(--global-padding);
}

#mobile_light_image {
    width: 100%;
    height: 100%;
    mask-image: url('Images/DesignElements/light_bulb_image.webp');
    mask-size: cover;
    mask-position: center;
    background-color: var(--accent-color3-text);
    transition: background-color var(--global-transition) ease;
}

#mobile_up_image {
    width: 100%;
    height: 100%;
    mask-image: url('Images/DesignElements/up_arrow_image.webp');
    mask-size: cover;
    mask-position: center;
    background-color: var(--accent-color3-text);
    transition: background-color var(--global-transition) ease;
}

.submodal {
    display: flex;
    flex-direction: column;
    max-width: calc(90% - var(--global-padding) * 4);
    height: auto;
    max-height: calc(90% - var(--global-padding) * 4);
    overflow-y: scroll;
    scrollbar-width: none;
    padding: var(--global-padding);
}

.inner_modal {
    background-color: var(--background-color);
    padding: var(--global-padding);
    display: flex;
    flex: 1;
    flex-direction: column;
    width: calc(100% - var(--global-padding) * 2);
    height: calc(100% - var(--global-padding) * 2);
}

#music_modal_album_art {
    position: relative;
    justify-self: center;
    width: 300px;
    max-width: 300px;
    height: auto;
    object-fit: cover;
}

/* TEXT */

/* General Elements */

a {
    font-family: "Inter", serif;
    color: var(--paragraph-color);
    transition: color var(--global-transition) ease;
    font-size: var(--paragraph-size);
    margin-top: var(--other-margin);
    margin-bottom: var(--other-margin);
    font-style: italic;
    text-decoration: none;
    color: var(--accent-color3);
}

p {
    font-family: "Inter", serif;
    color: var(--paragraph-color);
    transition: color var(--global-transition) ease;
    font-size: var(--paragraph-size);
    margin-top: var(--other-margin);
    margin-bottom: var(--other-margin);
    line-height: 140%;
}

h1 {
    margin-top: var(--header-margin);
    margin-bottom: calc(var(--header-margin) * 3);
    color: var(--accent-color3);
    transition: color var(--global-transition) ease;
    text-align: center;
    font-family: "Inter Bold", serif;
    font-size: calc(var(--paragraph-size) * 2.66);
}

h2 {
    margin-top: var(--header-margin);
    margin-bottom: var(--header-margin);
    text-transform: uppercase;
    color: var(--accent-color2);
    transition: color var(--global-transition) ease;
    font-family: "Inter Bold", serif;
    font-size: calc(var(--paragraph-size) * 1.33);
}

h3 {
    margin-top: var(--header-margin);
    margin-bottom: var(--header-margin);
    text-transform: uppercase;
    color: var(--accent-color1);
    transition: color var(--global-transition) ease;
    font-size: var(--paragraph-size);
    font-family: "Inter Bold", serif;
}

strong,
strong a {
    color: var(--accent-color1);
    transition: color var(--global-transition) ease;
    font-style: normal;
    font-family: "Inter Bold", serif;
    text-decoration: none;
}

em,
em a {
    color: var(--accent-color3);
    transition: color var(--global-transition) ease;
    text-decoration: none;
}

.vert_padding {
    padding-top: var(--global-padding);
    padding-bottom: var(--global-padding);
}

/* Specific Text */

.article_date {
    text-transform: none;
}

.news_text {
    position: relative;
    padding: 0 var(--global-padding);
    max-width: calc(100vw - var(--global-padding) * 2);
    color: var(--paragraph-color);
    transition: color var(--global-transition) ease;
    margin: var(--global-padding) 0;
    text-align: left;
}

.album_title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 20px;
    margin: 0;
    z-index: 1;
    opacity: 0;
    background-color: rgb(from var(--background-color) r g b / 0.8);
    transition: opacity var(--global-transition) ease;
}

/* Link List */

ul.link_list {
    list-style: none;
    font-style: normal;
    margin: 0;
    padding-left: 0px;
    margin-top: var(--other-margin);
    margin-bottom: var(--other-margin);
}

ul.link_list li::before {
    content: "•";
    padding-right: 5px;
    color: var(--accent-color3);
}

ul.link_list li,
ul.link_list li a {
    padding-top: 2px;
    padding-bottom: 2px;
    color: var(--paragraph-color);
    transition: color var(--global-transition) ease;
    font-size: var(--paragraph-size);
    text-decoration: none;
}

/* Input Style */

.input_style {
    font-family: "Inter";
    font-size: calc(var(--paragraph-size) * var(--input-scale));
    background-color: var(--accent-color3);
    transition: background-color var(--global-transition) ease;
    height: auto;
    padding: calc(5px * var(--input-scale)) calc(10px * var(--input-scale));
    border-radius: calc(5px * var(--input-scale));
    border: 0px;
    color: var(--accent-color3-text);
    transition: color var(--global-transition) ease;
}

.input_container {
    display: flex;
    flex: 0 1;
    width: 100%;
    gap: 10px;
    padding-bottom: 10px;
}

input.input_style {
    width: 100%;
    flex: 1;
}

select.input_style {
    width: 100%;
}

select.input_style:has(option:first-child:not(:checked)) {
    color: var(--accent-color3);
    transition: color var(--global-transition) ease;
    background-color: var(--accent-color3-text);
    transition: background-color var(--global-transition) ease;
}

input::placeholder {
    color: rgb(from var(--accent-color3-text) r g b / 0.5);
    font-style: italic;
}

input,
select,
textarea {
    color: var(--accent-color3-text);
    font-style: normal;
}

button.input_style {
    color: var(--accent-color3-text);
    transition: color var(--global-transition) ease;
    background-color: var(--accent-color3);
    transition: background-color var(--global-transition) ease;
    white-space: nowrap;
}

@media (hover: hover) {
    button.input_style:hover {
        color: var(--accent-color3);
        background-color: var(--accent-color3-text);
    }
}

button.input_style#article_filter_button:hover {
    background-color: green;
    color: var(--accent-color3);
}

/* SPECIFIC ELEMENTS */

/* Television */

#television_container {
    justify-self: center;
    display: grid;
    position: relative;
    margin-top: calc(var(--global-padding));
    width: 200px;
    height: calc(var(--right-column-width) * (4/3));
}

#television_border {
    position: absolute;
    width: 100%;
    height: auto;
}

#television_image {
    position: absolute;
    display: inline-flex;
    width: 61%;
    height: 25%;
    left: 17%;
    top: 23%;
    padding: 0;
    border: 0;
}

#television_button {
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}

#television_image {
    z-index: -1;
    object-fit: cover;
}

/* Up Button */

#up_button_image {
    position: absolute;
    top: 0px;
    right: 0;
    width: 100px;
    height: auto;
    object-fit: cover;
}

#up_button {
    position: relative;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 106px;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    opacity: 0;
    cursor: pointer;
}

/* Light Switch */

#light_switch_image {
    position: absolute;
    height: 150px;
    width: auto;
    right: 0;
}