@layer themostbased, base, layout, component, special, utility; 

/*
 *   Layers effect priority of a style. I.e. styles in utility layer get (generally) priority
 *   over styles in special, special gets (generALLY) priority over component, and so on. Styles made outside
 *   of a layer (gEnErAlLy) get priority over those inside a layer.
 *
 *   When making a change, consider what layer the change should go into. Fight facists, stay organized :)
*/

/***************** Base Variables *******************/
:root {
    /* colors */
    --primary-color: black;
    --highlight-color: rgb(240, 240, 240);
    --highlight-secondary-color: rgb(97, 0, 97);
    --alert-color: yellow;

    --primary-safe-text: white;
    --highlight-safe-text: black;
    --highlight-secondary-safe-text: white;
    --alert-safe-text: black;

    /* font stuff */
    --font-family: sans-serif;

    --font-size-sm: 0.8rem;
    --font-size-nrm: 1rem;
    --font-size-md: 1.15rem;
    --font-size-lg: 1.3rem;
    --font-size-xl: 1.6rem;
    --font-size-xxl: 1.9rem;
    --font-size-xxxl: 2.2rem;

    --margin-xs: 0.25rem;
    --margin-sm: 0.5rem;
    --margin-md: 1rem;
    --margin-lg: 1.5rem;
    --margin-xl: 2.35rem;
    --margin-xxl: 3rem;
    --margin-xxxl: 4.5rem;

    --padding-xs: 0.25rem;
    --padding-sm: 0.5rem;
    --padding-md: 1rem;
    --padding-lg: 1.5rem;
    --padding-xl: 2.35rem;
    --padding-xxl: 3rem;
    --padding-xxxl: 4.5rem;

    --border-sm: 0.05rem;
    --border-md: 0.15rem;
    --border-lg: 0.3rem;

    --border-radius: 0.5rem;
    --border-radius-aggressive: 1rem;

    --screw-distance-vertical: 0.025rem;
    --screw-distance-horizontal: 0.5rem;

    --z-back-2: -100;
    --z-back: -10;
    --z-nrm: 0;
    --z-frnt: 10;
    --z-frnt-2: 100;
}

/*********** Screen Size Variable Adjustments ***************/

@media (min-width: 35rem) {
    :root {
		--font-size-sm: 0.8rem;
		--font-size-nrm: 1rem;
		--font-size-md: 1.15rem;
		--font-size-lg: 1.4rem;
		--font-size-xl: 1.75rem;
		--font-size-xxl: 2.25rem;
		--font-size-xxxl: 3rem;
    }
}

@media (min-width: 60rem) {
    :root {
        --font-size-sm: 0.8rem;
        --font-size-nrm: 1rem;
        --font-size-md: 1.3rem;
        --font-size-lg: 1.8rem;
        --font-size-xl: 2.4rem;
        --font-size-xxl: 3.25rem;
        --font-size-xxxl: 4rem;
    }
}

/*************** Base Page Styling *******************/

/*
  For whatever reason, I cannot place body styling inside of a layer. So this just sets the default background 
  and other necessary nonsense for it.
*/
body {
    background: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

@layer themostbased {

    /********************* General Stuff ******************/    
    * {
        color: var(--primary-safe-text);
        font-size: var(--font-size-nrm);
        font-family: var(--font-family);
        box-sizing: border-box;
    }

    *:not(strong) {
        font-weight: var(--font-weight-normal);
    }
}

@layer base {

    /********************* Headings ***********************/ 
    h1, h2, h3, h4, h5, h6
        .h1, .h2, .h3, .h4, .h5, .h6 {
        margin-top: var(--margin-xl);
        margin-bottom: var(--margin-md);
        font-weight: var(--font-weight-bold);
    }

    h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6,
        .h1 + .h2, .h2 + .h3, .h3 + .h4, .h4 + .h5, .h5 + .h6 {
        margin-top: 0;
    }

    h1, .h1 {
        font-size: var(--font-size-xxxl);
    }

    h2, .h2 {
        font-size: var(--font-size-xxl);
    }

    h3, .h3 {
        font-size: var(--font-size-xl);
    }

    h4, .h4 {
        font-size: var(--font-size-lg);
    }

    h5, .h5 {
        font-size: var(--font-size-md);
    }

    h6, .h6 {
        font-size: var(--font-size-nrm);
    }

    /*************** Paragraphs **********/

    p {
        margin-bottom: var(--margin-lg);
    }

    /************** Lists *****************/

    ul, ol {
        margin-bottom: var(--margin-lg);
    }

    li {
        margin-bottom: var(--margin-sm);
    }

    /************* Tables ****************/

    table {
        border-collapse: collapse;
        margin-bottom: var(--margin-lg);
        width: 100%;
    }

    th, td {
        padding: var(--padding-md);
    }

    th {
        text-align: left;
        border-bottom: var(--border-sm) solid var(--highlight-color);
        font-weight: var(--font-weight-bold);
    }

    /* HTML Preview doesn't recognize TRs???? */
    tr:nth-child(odd) td {
        background-color: #FFFFFF10;
    }
    
    /***************** Links ****************/

	a {
		display: inline-block;
	}

    a, a:visited {
        color: var(--primary-safe-text);
    }

    a:focus, a:hover {
        color: var(--highlight-secondary-color);
    }

    /*************** Images *********************/
    img {
        max-width: 100%;
        height: auto;
    }
}

@layer layout {
    .page-container {
        padding: 0 var(--padding-md);
        max-width: 100%;
    }

    @media (min-width: 80rem) {
        
        .page-container {
            max-width: 80rem;
        }
        
    }

    .grid {
        display: flex;
        flex-direction: column;
    }

    .grid > * {
        margin-bottom: var(--margin-lg);
    }

    .grid-centered {
        text-align: center;
    }
    
    .grid-2-cols {
        grid-template-columns: 1fr 1fr;
    }

    .grid-2-cols-emphasize-first {
        grid-template-columns: 2fr 1fr;
    }

    .grid-2-cols-emphasize-first *:nth-child(1) {
        order: -1;
    }

    .grid-2-cols-emphasize-second {
        grid-template-columns: 1fr 2fr;
    }

    .grid-2-cols-emphasize-second > *:nth-child(2) {
        order: -1;
    }

    .grid-3-cols {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .grid-3-cols-emphasize-first {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .grid-3-cols-emphasize-first > *:nth-child(1) {
        order: -1;
    }

    .grid-3-cols-emphasize-second {
        grid-template-columns: 1fr 2fr 1fr;
    }

    .grid-3-cols-emphasize-second > *:nth-child(2) {
        order: -1;
    }

    .grid-3-cols-emphasize-third {
        grid-template-columns: 1fr 1fr 2fr;
    }

    .grid-3-cols-emphasize-third > *:nth-child(3) {
        order: -1;
    }

    @media (min-width: 50rem) {
        
        .grid {
            display: grid;
            gap: var(--margin-xl) var(--margin-lg);
        }

        .grid > * {
            margin-bottom: revert;
        }
        
        /** 
            Doing this outside the :is because becase the :is is not 
            specific enough
        **/
        .grid-2-cols-emphasize-first > *:nth-child(1),
            .grid-2-cols-emphasize-second > *:nth-child(2) {
            order: 0;
        }
    
        .grid-3-cols, .grid-3-cols-emphasize-first, .grid-3-cols-emphasize-second,
            .grid-3-cols-emphasize-third {
            display: flex;
            flex-direction: column;
        }
    
        :is(.grid-3-cols, .grid-3-cols-emphasize-first, .grid-3-cols-emphasize-second,
            .grid-3-cols-emphasize-third) > * {
            margin-bottom: var(--margin-lg);
        }
    }

    @media (min-width: 65rem) {
        .grid-3-cols, .grid-3-cols-emphasize-first, .grid-3-cols-emphasize-second,
            .grid-3-cols-emphasize-third {
            display: grid;
        }
    
        :is(.grid-3-cols, .grid-3-cols-emphasize-first, .grid-3-cols-emphasize-second,
            .grid-3-cols-emphasize-third) > * {
            margin-bottom: revert;
        }

        /** 
            Doing this outside the :is because becase the :is is not 
            specific enough
        **/

        .grid-3-cols-emphasize-first > *:nth-child(1),
            .grid-3-cols-emphasize-second > *:nth-child(2),
            .grid-3-cols-emphasize-third > *:nth-child(3) {
            order: 0;
        }
    }

    /******************** Footer ************************/

    footer {
        border-top: var(--border-md) solid var(--highlight-color);
        padding: var(--padding-lg) var(--padding-md);
        margin-top: var(--margin-xxl);
        width: 100%;
    }
}

@layer component {

    /**************** Header ******************/

    .page-header {
        position: relative;
        border: var(--border-md) solid var(--highlight-color);
        border-radius: 5%;
        padding: var(--padding-xl) var(--padding-lg);
        margin: var(--margin-xxxl) 0 var(--margin-xl);
    }

    .page-header:before, .page-header:after, .page-header-footer:before, .page-header-footer:after {
        content: "+";
        position: absolute;
        padding: var(--padding-md);
    }

    .page-header:before, .page-header:after {
        top: var(--screw-distance-vertical);
    }

    .page-header-footer::before, .page-header-footer:after {
        bottom: var(--screw-distance-vertical);
    }

    .page-header:before, .page-header-footer:before {
        left: var(--screw-distance-horizontal);
    }

    .page-header:after, .page-header-footer:after {
        right: var(--screw-distance-horizontal);
    }

    .page-header-screen {
        background-image: radial-gradient(rgb(58, 1, 58), rgb(114, 1, 114), rgb(58, 1, 58));
        border: var(--border-md) solid var(--highlight-color);
        border-radius: 5%;
        padding: var(--padding-lg);
        text-align: center;
    }

    .page-header-screen :is(h1,h2,h3,h4,h5,h6,p) {
        color: var(--primary-safe-text);
        text-shadow: #000 var(--margin-xs) var(--margin-xs);
    }

    .page-header-footer {
        padding: var(--padding-md);
    }

    @media (min-width: 45rem) {
        .page-header {
            padding: var(--padding-xl);
        }

        .page-header-screen {
            padding: var(--padding-xxxl);
        }
    }

    /***************** Menu *********************/

    .main-menu {
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--primary-color);
        border-bottom: var(--highlight-color) solid var(--border-md);
        padding: var(--padding-md);
        width: 100%;
        z-index: var(--z-frnt-2);
    }

    .main-menu-summary {
        display: flex;
        align-items: center;
        line-height: 0;
    }

    .main-menu-hamborger {
        margin-right: var(--margin-md);
		transition: ease-out 0.2s;
    }

	.main-menu-details[open] .main-menu-hamborger {
		transform: rotate(90deg);
	}

	.main-menu-summary::marker {
        content: "";
	}

    .main-menu-hamborger {
        height: var(--font-size-nrm);
    }

    .main-menu-list {
        display: flex;
        flex-direction: column;
        list-style-type: none;
        padding: var(--padding-md) var(--padding-xs);
    }

    .main-menu-list > li {
        margin-bottom: var(--margin-md);
    }

    /******************** Section **********************/

    .section {
        border: var(--border-md) solid var(--highlight-color);
        border-radius: var(--border-radius);
        padding: var(--padding-xxl) var(--padding-lg);
        margin: var(--margin-xl) 0;
        position: relative;
    }

    .section *:first-child {
        margin-top: 0;
    }

    .section:before, .section:after, .section-footer:before, .section-footer:after {
        content: "+";
        position: absolute;
        padding: var(--padding-md);
    }

    .section:before, .section:after {
        top: var(--screw-distance-vertical);
    }

    .section-footer:before, .section-footer:after {
        bottom: var(--screw-distance-vertical);
    }

    .section:before, .section-footer:before {
        left: var(--screw-distance-horizontal);
    }

    .section:after, .section-footer:after {
        right: var(--screw-distance-horizontal);
    }

    @media (min-width: 45rem) {
        .section {
            padding: var(--padding-xxl) var(--padding-xl);
        }
    }
    
    /*********** Card ***********/

    .card {
        display: flex;
        flex-direction: column;
        border: var(--border-md) solid var(--highlight-color);
        border-radius: var(--border-radius);
        margin-bottom: var(--margin-lg);
    }

    .card-image {
        width: 100%;
        height: auto;
        z-index: var(--z-back);
        overflow: hidden;
    }

    .card-image > img {
        aspect-ratio: 16/9;
        object-fit: cover;
        width: 100%;
    }

    .card-header {
        position: relative;
        border-bottom: var(--border-md) solid var(--highlight-color);
        padding: var(--padding-xl) var(--padding-lg) var(--padding-lg);
    }

    .card-footer { 
        border-top: var(--border-md) solid var(--highlight-color);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: var(--padding-lg) var(--padding-lg) var(--padding-xl);
        /* text-align: center; */
    }

    .card-header:before, .card-header:after, .card-footer:before, .card-footer:after {
        content: "+";
        position: absolute;
        padding: var(--padding-md);
    }

    .card-header::before, .card-header:after {
        top: var(--screw-distance-vertical);
    }

    .card-footer::before, .card-footer:after {
        bottom: var(--screw-distance-vertical);
    }

    .card-header:before, .card-footer:before {
        left: var(--screw-distance-horizontal);
    }

    .card-header:after, .card-footer:after {
        right: var(--screw-distance-horizontal);
    }

    .card-header * {
        margin: 0;
    }

    .card-body {
        flex-grow: 1;
        padding: var(--padding-lg);
    }

	/****************** Button ************/

	.button {
		border: var(--border-sm) solid var(--primary-color);
		border-radius: var(--border-radius-aggressive);
        padding: var(--padding-md);
        text-decoration: none;
        transition: ease-out 0.2s;
	}

    .button:hover, .button:focus {
        filter: brightness(85%);
    }

    .button-large {
        padding: var(--padding-lg);
        font-size: var(--font-size-md);
    }

    .button-primary, .button-primary:visited {
        background: var(--primary-color);
        color: var(--primary-safe-text);
        border-color: var(--highlight-color);
    }

    .button-primary:hover, .button-primary:focus {
        background: #333;
    }

    .button-highlight, .button-highlight:visited {
        background: var(--highlight-color);
        color: var(--highlight-safe-text);
    }

    .button-highlight-secondary, .button-highlight-secondary:visited {
        background: var(--highlight-secondary-color);
        color: var(--highlight-secondary-safe-text);
    }

    .button-alert, .button-alert:visited {
        background: var(--alert-color);
        color: var(--alert-safe-text);
    }

    /*************** Button Row *************/

    .button-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--margin-md);
        list-style-type: none;
        padding: 0;
        margin-bottom: 0;
    }

    .button-row-center {
        justify-content: center;
    }
}

@layer special {

}

@layer utility {
    .no-style-list {
        list-style-type: none;
        padding-left: 0;
    }

    .visually-hidden {
        margin: 0;
        padding: 0;
        height: 0;
        width: 0;
        position: fixed;
        left: -1000vw;
    }

    .w-100 {
        width: 100%;
    }

    .w-75 {
        width: 75%;
    }

    .w-66 {
        width: 66.666%;
    }

    .w-50 {
        width: 50%;
    }

    .w-33 {
        width: 33.333%;
    }

    .w-25 {
        width: 25%;
    }

    .border-primary {
        border: var(--border-md) solid var(--primary-color);
    }

    .border-highlight {
        border: var(--border-md) solid var(--highlight-color);
    }

    .border-highlight-secondary {
        border: var(--border-md) solid var(--highlight-secondary-color);
    }

    .border-alert {
        border: var(--border-md) solid var(--alert-color);
    }

    .border-radius {
        border-radius: var(--border-radius);
    }

    .border-radius-aggressive {
        border-radius: var(--border-radius-aggressive);
    }

    .bg-primary {
        background-color: var(--primary-color);
    }

    .bg-highlight {
        background-color: var(--highlight-color);
    }

    .bg-highlight-secondary {
        background-color: var(--highlight-secondary-color);
    }

    .bg-alert {
        background-color: var(--alert-color);
    }

    .text-primary {
        color: var(--primary-color);
    }

    .text-highlight {
        color: var(--highlight-color);
    }

    .text-highlight-secondary {
        color: var(--highlight-secondary-color);
    }

    .text-alert {
        color: var(--alert-color);
    }

    .text-primary-safe {
        color: var(--primary-safe-text);
    }

    .text-highlight-safe {
        color: var(--highlight-safe-text);
    }

    .text-highlight-secondary-safe {
        color: var(--highlight-secondary-safe-text);
    }

    .text-alert-safe {
        color: var(--alert-safe-text);
    }

    .m-0 {
        margin: 0;
    }

    .m-xs {
        margin: var(--margin-xs);
    }

    .m-sm {
        margin: var(--margin-sm);
    }

    .m-md {
        margin: var(--margin-md);
    }

    .m-lg {
        margin: var(--margin-lg);
    }

    .m-xl {
        margin: var(--margin-xl);
    }

    .m-xxl {
        margin: var(--margin-xxl);
    }

    .m-xxl {
        margin: var(--margin-xxl);
    }

    .mb-0 {
        margin-bottom: 0;
    }

    .mb-xs {
        margin-bottom: var(--margin-xs);
    }

    .mb-sm {
        margin-bottom: var(--margin-sm);
    }

    .mb-md {
        margin-bottom: var(--margin-md);
    }

    .mb-lg {
        margin-bottom: var(--margin-lg);
    }

    .mb-xl {
        margin-bottom: var(--margin-xl);
    }

    .mb-xxl {
        margin-bottom: var(--margin-xxl);
    }

    .mb-xxl {
        margin-bottom: var(--margin-xxl);
    }

    .mt-0 {
        margin-top: 0;
    }

    .mt-xs {
        margin-top: var(--margin-xs);
    }

    .mt-sm {
        margin-top: var(--margin-sm);
    }

    .mt-md {
        margin-top: var(--margin-md);
    }

    .mt-lg {
        margin-top: var(--margin-lg);
    }

    .mt-xl {
        margin-top: var(--margin-xl);
    }

    .mt-xxl {
        margin-top: var(--margin-xxl);
    }

    .mt-xxl {
        margin-top: var(--margin-xxl);
    }

    .mr-0 {
        margin-right: 0;
    }

    .mr-xs {
        margin-right: var(--margin-xs);
    }

    .mr-sm {
        margin-right: var(--margin-sm);
    }

    .mr-md {
        margin-right: var(--margin-md);
    }

    .mr-lg {
        margin-right: var(--margin-lg);
    }

    .mr-xl {
        margin-right: var(--margin-xl);
    }

    .mr-xxl {
        margin-right: var(--margin-xxl);
    }

    .mr-xxl {
        margin-right: var(--margin-xxl);
    }

    .ml-0 {
        margin-left: 0;
    }

    .ml-xs {
        margin-left: var(--margin-xs);
    }

    .ml-sm {
        margin-left: var(--margin-sm);
    }

    .ml-md {
        margin-left: var(--margin-md);
    }

    .ml-lg {
        margin-left: var(--margin-lg);
    }

    .ml-xl {
        margin-left: var(--margin-xl);
    }

    .ml-xxl {
        margin-left: var(--margin-xxl);
    }

    .ml-xxl {
        margin-left: var(--margin-xxl);
    }

    .p-0 {
        padding: 0;
    }

    .p-xs {
        padding: var(--padding-xs);
    }

    .p-sm {
        padding: var(--padding-sm);
    }

    .p-md {
        padding: var(--padding-md);
    }

    .p-lg {
        padding: var(--padding-lg);
    }

    .p-xl {
        padding: var(--padding-xl);
    }

    .p-xxl {
        padding: var(--padding-xxl);
    }

    .pb-0 {
        padding-bottom: 0;
    }

    .pb-xs {
        padding-bottom: var(--padding-xs);
    }

    .pb-sm {
        padding-bottom: var(--padding-sm);
    }

    .pb-md {
        padding-bottom: var(--padding-md);
    }

    .pb-lg {
        padding-bottom: var(--padding-lg);
    }

    .pb-xl {
        padding-bottom: var(--padding-xl);
    }

    .pb-xxl {
        padding-bottom: var(--padding-xxl);
    }

    .pb-xxl {
        padding-bottom: var(--padding-xxl);
    }

    .pt-0 {
        padding-top: 0;
    }

    .pt-xs {
        padding-top: var(--padding-xs);
    }

    .pt-sm {
        padding-top: var(--padding-sm);
    }

    .pt-md {
        padding-top: var(--padding-md);
    }

    .pt-lg {
        padding-top: var(--padding-lg);
    }

    .pt-xl {
        padding-top: var(--padding-xl);
    }

    .pt-xxl {
        padding-top: var(--padding-xxl);
    }

    .pt-xxl {
        padding-top: var(--padding-xxl);
    }

    .pr-0 {
        padding-right: 0;
    }

    .pr-xs {
        padding-right: var(--padding-xs);
    }

    .pr-sm {
        padding-right: var(--padding-sm);
    }

    .pr-md {
        padding-right: var(--padding-md);
    }

    .pr-lg {
        padding-right: var(--padding-lg);
    }

    .pr-xl {
        padding-right: var(--padding-xl);
    }

    .pr-xxl {
        padding-right: var(--padding-xxl);
    }

    .pr-xxl {
        padding-right: var(--padding-xxl);
    }

    .pl-0 {
        padding-left: 0;
    }

    .pl-xs {
        padding-left: var(--padding-xs);
    }

    .pl-sm {
        padding-left: var(--padding-sm);
    }

    .pl-md {
        padding-left: var(--padding-md);
    }

    .pl-lg {
        padding-left: var(--padding-lg);
    }

    .pl-xl {
        padding-left: var(--padding-xl);
    }

    .pl-xxl {
        padding-left: var(--padding-xxl);
    }

    .pl-xxl {
        padding-left: var(--padding-xxl);
    }
}