:root {
    --c-white: #F2F2F2;
    --header_m-height: calc(12.5vw + 3rem + 1.25rem);
    --header_t-height: calc(9.75vw + 3rem + 1.25rem);
    --marquee-height: 2.5rem;
}

/* 
ELEMENTS
*/
main {
    z-index: 20;
    overflow-x: hidden;
    overflow-y: auto;
}
@media only screen and (min-width: 1200px) {
    main {right: 50vw !important;}
}

@media (hover: hover) {
    .t-link:hover {color: var(--color) !important;}
}


.t-mono.button {
    background: var(--color);
    color: var(--t-color);
    border: 1px solid var(--t-color);
    border-radius: .5rem;
}
@media (hover: hover) {
    .t-mono.button:hover {
        background: var(--t-color);
        color: var(--color);
    }
}


/* 
COLORS
*/
.bg-color {background: var(--color);}
.bg-white {background: var(--c-white);}
.bg-black {background: black;}

.c-color {color: var(--t-color);}
.c-black {color: black;}


/* 
MEASURMENTS
*/
.padding {padding: 1rem;}
.padding-v {padding: 1rem 0;}
.padding-h {padding: 0 1rem;}
.padding-t {padding-top: 1rem;}

.margin-t {margin-top: 1rem;}
.margin-t_auto {margin-top: auto;}
.margin-t_small {margin-top: .5rem;}
.margin-t_med {margin-top: 2rem;}
.margin-b {margin-bottom: 1rem;}
.margin-b_xsmall {margin-bottom: .3333rem;}
.margin-b_small {margin-bottom: .5rem;}


/* 
DISPLAY
*/
.block {display: block !important;}

.flex {display: flex !important;}
.f-wrap {flex-wrap: wrap;}
.f-nowrap {flex-wrap: nowrap;}
.f-column {flex-direction: column;}

.j-center {justify-content: center;}
.j-end {justify-content: end;}
.j-between {justify-content: space-between;}
.j-around {justify-content: space-around;}
.j-evenly {justify-content: space-evenly;}

.a-center {align-items: center;}
.a-end {align-items: end;}


/* 
IMG
*/
.ratio-9_16,
.p-column[data-ratio='9_16'] > * {aspect-ratio: 9/16;}
.ratio-2_3,
.p-column[data-ratio='2_3'] > * {aspect-ratio: 2/3;}
.ratio-4_5,
.p-column[data-ratio='4_5'] > * {aspect-ratio: 4/5;}
.ratio-1_1,
.p-column[data-ratio='1_1'] > * {aspect-ratio: 1/1;}
.ratio-5_4,
.p-column[data-ratio='5_4'] > * {aspect-ratio: 5/4;}
.ratio-3_2,
.p-column[data-ratio='3_2'] > * {aspect-ratio: 3/2;}
.ratio-16_9,
.p-column[data-ratio='16_9'] > * {aspect-ratio: 16/9;}
.p-column[data-ratio='none'] > * {height: fit-content;}

.img-full {width: 100%; height: 100%; object-fit: cover;}
.img-fit {width: 100%; height: 100%; object-fit: contain;}


/* 
POSITION
*/
.p-fixed {position: fixed;}
.p-sticky {position: sticky;}
.p-relative {position: relative;}
.p-absolute {position: absolute;}

.p-all {top: 0; right: 0; bottom: 0; left: 0;}
.p-top {top: 0;}
.p-right {right: 0;}
.p-bottom {bottom: 0;}
.p-left {left: 0;}


/* 
STATUS
*/
.hide {display: none !important;}
.hide-m,
.hide-m_t,
.hide-m_d {display: none;}

.hide-scrollbar::-webkit-scrollbar {display: none;}
.hide-scrollbar {-ms-overflow-style: none; scrollbar-width: none;}

.v-hide {visibility: hidden;}
.stop {overflow: hidden;}

@media only screen and (min-width: 768px) {
    .hide-t,
    .hide-t_d {display: none;}

    .block-m,
    .block-m_d {display: block;}

    .flex-m,
    .flex-m_d {display: flex;}

    .grid-m,
    .grid-m_d {display: grid;}
}

@media only screen and (min-width: 1200px) {
    .hide-d,
    .hide-m_d {display: none !important;}

    .block-m,
    .block-t,
    .block-m_t {display: block;}

    .flex-d {display: flex;}

    .grid-m,
    .grid-t,
    .grid-m_t {display: grid;}
}


@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 1200px) {}
@media only screen and (min-width: 2048px) {}
@media (hover: hover) {}