/**************************************************************************************************/
/********* MISC
/**************************************************************************************************/
html {
    font-size: var(--font-size-M);
    font-family: var(--font1);
    font-weight: 400;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--font-color);
    background: var(--background-color);
    min-height:100vh;
    line-height: var(--line-height);
    scroll-behavior:smooth
}

.visually-hidden {display:none;}

/**************************************************************************************************/
/********* TITLES 
/**************************************************************************************************/
h1, h2, h3, h4, h5 {font-weight: bold;margin:2em 0 .5em;}
h1, .h1 {
    font-weight: 200;
    font-size: 4rem;
    margin: 1.5em 0;
}
h2, .h2 {font-size:3rem;}
h3, .h3 {font-size:1.4rem;}
h4, .h4 {font-size:1.5rem;}
h5, .h5 {font-size:1.1rem;}

@media screen and (max-width: 600px) {
    h1, .h1 {
        font-size: 3.5rem;
    }
}

/**************************************************************************************************/
/********* TEXT
/**************************************************************************************************/
.font-size-XS   {font-size:var(--font-size-XS);}
.font-size-S    {font-size:var(--font-size-S);}
.font-size-M    {font-size:var(--font-size-M);}
.font-size-L    {font-size:var(--font-size-L);}
.font-size-XL   {font-size:var(--font-size-XL);}
.font-size-XXL  {font-size:var(--font-size-XXL);}

em, .italic {font-style: italic;}
strong, .bold {font-weight: bold;}
.upper {text-transform:uppercase;}
a {text-decoration:none;color:inherit;}

.txt p,
.txt ul {margin:.7em 0;line-height:var(--line-height);}
.txt ul {padding-left:1rem;list-style-type:disc;}
    .txt ul ul {list-style-type:circle;margin:.5rem 0;}
.txt > *:first-child {margin-top:0;}
.txt > *:last-child {margin-bottom:0;}
.txt a,
.underline {
    text-decoration:underline;
    text-decoration-thickness: var(--text-decoration-thickness);
    text-underline-offset: var(--text-underline-offset);
    color: var(--font-color-light);
    transition: color.2s, text-decoration-color .2s;
}
.txt a:hover,
.underline:hover {
    color: var(--font-color);
    text-decoration-color: var(--font-color);
}
/**************************************************************************************************/
/********* BUTTONS
/**************************************************************************************************/
.btn {
    display: block;
    padding: 1rem;
    min-width: 12rem;
    text-align: center;
    color: #fff;
    background-color: var(--btn-background-color);
    border: 1px solid var(--btn-border-color);
    font-weight: bold;
    text-transform: uppercase;
    font-size: var(--font-size-S);
    letter-spacing: 0.1em;
    transition: letter-spacing .2s, border-color .2s;
    border-radius: 8px;
}
.btn:hover {
    border-color: var(--btn-border-color-hover);
    letter-spacing: .15em;
}

/**************************************************************************************************/
/********* IMAGES
/**************************************************************************************************/
img, svg, video{display:block;max-width:100%;height:auto;}
/**************************************************************************************************/
/********* LAYOUTS
/**************************************************************************************************/
.gutters {
    margin-left: var(--gutter-left);
    margin-right: var(--gutter-right);
}
/**************************************************************************************************/
/********* SOCIALS
/**************************************************************************************************/
.socials {
    display: flex;
    gap: 18px;
}
.socials li svg {
    width: 28px;
    padding: 10px 5px;
    transition: fill .15s;
}

.socials a:hover svg {
    fill: var(--color-beige);
}