:root {
    --c-white: rgba(245, 245, 245, .85);
    --c-gray1: rgba(245, 245, 245, .5);
    --c-gray2: rgba(245, 245, 245, .3);
    --c-gray3: rgba(245, 245, 245, .15);
    --c-black1: rgba(0, 0, 0, .5);
    --c-black2: rgba(0, 0, 0, .08);
}


/* 
COLORS
*/
.c-white {color: var(--c-white) !important;}
.c-gray1 {color: var(--c-gray1);}
.c-gray2 {color: var(--c-gray2);}
.c-gray3 {color: var(--c-gray2);}

.bg-white {background: var(--c-white);}
.bg-gray1 {background: var(--c-gray1);}
.bg-gray2 {background: var(--c-gray2);}
.bg-gray3 {background: var(--c-gray3);}

.bg-blur1 {
    backdrop-filter: blur(2rem) brightness(1.5);
    -webkit-backdrop-filter: blur(2rem) brightness(1.5);
    filter: drop-shadow(0 .5rem .5rem var(--c-black1));
    transition: 1000ms ease;
}
@media (hover: hover) {
    a.bg-blur1:hover {
        backdrop-filter: blur(2rem) brightness(3);
        -webkit-backdrop-filter: blur(2rem) brightness(3);
    }
}
.bg-blur2 {
    backdrop-filter: blur(8rem) brightness(.6666);
    -webkit-backdrop-filter: blur(8rem) brightness(.6666);
}
.bg-blur3 {
    backdrop-filter: blur(2rem) brightness(.85);
    -webkit-backdrop-filter: blur(2rem) brightness(.85);
    filter: drop-shadow(0 .5rem .5rem var(--c-black1));
}

.f-white {fill: var(--c-white) !important;}
.f-gray1 {fill: var(--c-gray1);}
.f-gray2 {fill: var(--c-gray2);}

.gd-black {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);}
.drop-shadow {filter: drop-shadow(0 .5rem .5rem var(--c-black1));}


/* 
ELEMENTS
*/
.button {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem;
    border-radius: 2rem;
}

.button > svg {width: auto; height: 1.25rem;}
.button-small > svg {width: .75rem; height: auto;}

.section-button {
    top: 1rem;
    right: 1rem;
    z-index: 200;
}

*[data-ratio='9/16'],
.ratio-9_16 {aspect-ratio: 9/16;}
*[data-ratio='2/3'],
.ratio-2_3 {aspect-ratio: 2/3;}
*[data-ratio='4/5'],
.ratio-4_5 {aspect-ratio: 4/5;}
*[data-ratio='1/1'],
.ratio-1_1 {aspect-ratio: 1/1;}
*[data-ratio='5/4'],
.ratio-5_4 {aspect-ratio: 5/4;}
*[data-ratio='3/2'],
.ratio-3_2 {aspect-ratio: 3/2;}
*[data-ratio='16/9'],
.ratio-16_9 {aspect-ratio: 16/9;}

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

.br {border-radius: .5rem;}


/* 
MEASURES
*/
.pad {padding: 1rem;}
.pad-xsmall {padding: 4px;}
.pad-small {padding: .5rem;}
.pad-large {padding: calc(1rem + 4px);}
.pad-b {padding-bottom: 1rem;}

.margin-t_small {margin-top: .5rem;}
.margin-b {margin-bottom: 1rem;}
.margin-b_small {margin-bottom: .5rem;}
.margin-r_small {margin-right: .5rem;}
.margin-v {margin: 1rem 0;}

/* 
DISPLAY
*/
.block {display: block;}
.inline {display: inline;}

.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;}


/* 
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;}


/* 
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 !important;}

@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-m,
    .flex-t,
    .flex-m_t {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) {}