:root {
    --topGuide: 8rem;
    --bottomGuide: 16rem;
}


/* 
DISPLAY
*/
.flex {display: flex;}
.flex-right {justify-content: end;}
.flex-justify {justify-content: space-between;}


/* 
ELEMENTS
*/
.link-active::before {content: '[ ';}
.link-active::after {content: ' ]';}

.anchor-section {
    position: absolute;
    left: 0;
    top: -8rem;
    height: 0;
    width: 0;
    overflow: hidden;
}

.page {padding: var(--topGuide) 0 var(--bottomGuide);}

/* Movement Button */
#movement-button {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    visibility: hidden;
    opacity: 0;
    z-index: 150;
}
body[data-template='home'] #movement-button,
body[data-manifesto-block='show'] #movement-button {
    visibility: visible;
    opacity: 1;
}
body[data-template='home'] #movement-button {bottom: 3rem;}
body[data-visit='false'] #movement-button {bottom: 1rem;}

body[data-manifesto-block='show'] .c-white,
body[data-manifesto-block='show'] .c-white * {color: whitesmoke !important;}

/* 
MARGIN
*/
.margin-t {margin-top: 1rem;}
.margin-b {margin-bottom: 1rem;}
.margin-l {margin-left: 1rem;}
.margin-r {margin-right: 1rem;}
.margin-l_auto {margin-left: auto;}


/* 
PADDING
*/
.padding {padding: 1rem;}
.padding-h {padding-left: 1rem; padding-right: 1rem;}
.padding-v {padding-top: 1rem; padding-bottom: 1rem;}


/* STYLING */
.blur-bg {
    background-color: rgba(245, 245, 245, .5);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}
.blur {
    opacity: .5;
    filter: blur(.25rem);
}

/*
STATE
*/
.hide {display: none !important;}
.hide-scrollbar::-webkit-scrollbar {display: none;}
.hide-scrollbar {-ms-overflow-style: none;scrollbar-width: none;}
.stop {overflow: hidden;}


.hide-m {display: none !important;}
.hide-m_t {display: none !important;}
.hide-m_d {display: none !important;}
@media only screen and (min-width: 768px) {
    .hide-t {display: none !important;}
    .hide-t_d {display: none !important;}
    .hide-m {display: unset !important;}
    .hide-m_d {display: unset !important;}
}
@media only screen and (min-width: 1024px) {
    .hide-d {display: none !important;}
    .hide-m_d {display: none !important;}
    .hide-m_t {display: unset !important;}
    .hide-t {display: inherit !important;}
}
.stop {overflow: hidden;}


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