@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&display=swap');

@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/robotoslab/v35/BngMUXZYTXPIvIBgJJSb6ufJ5qW54A.woff2) format('woff2');
}

:root {
    --body: #FFF2E1;
    --body-hover: #f1e6d5;

    --text: #462100;
    --red: #ca0928;
    --gold: #e1bc56;

    --white: #FFF;
}

html,
body {
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    /* Не позволява промяна на размера на текста при завъртане на екрана (landscape/portrait) */
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;

    -webkit-tap-highlight-color: transparent; /* Remove Gray Highlight When Tapping Links in Mobile Safari */
    scroll-behavior: smooth;
}

body {
    overflow-y: scroll; /* показва вертикален scrolbar независимо от съдържанието / предотвратява подскачането на съдържанието при динамично зареждане на съдържание */
    min-width: 320px;
}

a,
img,
*:focus {
    outline: 0; /* Removing The Dotted Outline */
    -webkit-tap-highlight-color: transparent;  /* Remove Gray Highlight When Tapping Links in Mobile Safari */
}

img {
    border: none;
    line-height: 0;
    vertical-align: middle;
    /* INFO: https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ */
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}

.l { text-align: left; }

.c { text-align: center; }

.r { text-align: right; }

.hide { display: none; }

.nw { white-space: nowrap; }

body {
    font-family: 'Roboto Slab', Georgia, serif;
    font-weight: 400;
    background-color: var(--body);
    color: var(--text);
}

/* FLUID */
/* INFO: f3 */
@media (max-width: 659.999px) {
    /* INFO: Разстояние между елементите по височина когато не е flex */
    .f3 > div:not(:last-child) {
        margin-bottom: 20px;
    }
}

@media (min-width: 660px) {
    .f3 {
        display: flex;
        flex-wrap: wrap; /* INFO: Позволява елементите да се пренасят на нов ред при малка ширина */
        justify-content: space-between;
        gap: 20px; /* INFO: Разстояние между елементите */
    }

    .f3 > div {
        box-sizing: border-box; /* INFO: За да се избегне преразмеряване от padding */
        flex: 1; /* INFO: прави елементите еднакви по ширина */
    }
}
/* <<< */

main {
    min-height: 70vh;
}

main h1, 
main h3 {
    font-style: normal;
    font-family: inherit;
    color: var(--text);
    font-weight: 500;
}

main h1 {
    font-size: 42px;
}

main h3 {
    font-size: 28px;
}

main a {
    color: var(--gold);
    text-decoration: underline;
    transition: color .5s ease;
}

main a:hover {
    color: var(--red);
}

main p, 
main li {
    line-height: 26px;
    font-size: 16px;
}

main ul li,
main ol li {
    padding: 5px;
    color: var(--text);
}

main ul li {
    list-style: none;
    position: relative;
}

main ul li::before {
    position: absolute;
    display: block;
    content: ' ';
    border-bottom: 1px solid var(--red);
    border-right: 1px solid var(--red);
    width: 6px;
    height: 12px;
    top: 14px;
    left: -20px;
    transform: translateY(-50%) rotate(45deg);
}

/* <-- */
main a.button {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 700;
}

main a.button.red {
    padding: 13px 40px 12px 40px;
    background-color: var(--red);
    color: var(--body);
    transition: background-color .3s, color .3s;
}

main a.button.red:hover {
    background-color: var(--text);
    color: var(--white);
}

main a.button.border {
    padding: 11px 40px 10px 40px;
    background-color: transparent;
    border: 2px solid var(--red);
    color: var(--red);
    transition: background-color .3s, color .3s;
}

main a.button.border:hover {
    background-color: var(--red);
    color: var(--white);
}

main a.button.more {
    padding: 15px 20px 13px 20px;
    color: var(--red);
    transition: color .3s;
}

main a.button.more:hover {
    color: var(--text);
}