@font-face {
    font-family: inter;
    src: url(/assets/fonts/Inter-VariableFont_opsz,wght.ttf);
    font-display: swap;
}

@font-face {
    font-family: gentium;
    src: url(/assets/fonts/GentiumPlus-Regular.ttf);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: gentium;
    src: url(/assets/fonts/GentiumPlus-Bold.ttf);
    font-weight: 700;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    box-sizing: border-box;
    font-family: inter;
    list-style: none;
}

body{
    /* font sizes */
    --heading-small: 1rem;
    --heading-medium: clamp(1.25rem, 2vw, 1.5625rem);
    --heading-big: clamp(1.5625rem, 3vw, 2.1875rem);

    --paragraph-small: .875rem;
    --paragraph-medium: 1rem;
    --paragraph-big: clamp(1.375rem, 2.7vw, 1.75rem);

    /* colors */
    --primary-background-color: #1A3038;
    --secondary-background-color: #F4ECDD;
    --footer-background-color: #BE1C1D;
    --darker-background-color: #00001B;

    --primary-text-color: #F4ECDD;
    --secondary-text-color: #1A3038;

    --primary-accent-color: #FFCC00;
    --secondary-accent-color: #F4ECDD;
}

p, a, span, button, summary{
    font-family: inter, sans-serif;
    font-weight: 400;
    font-size: var(--paragraph-medium);
    color: var(--primary-text-color);
    text-decoration: none;
}

p {
    max-width: 65ch;
}

h1, h2, h3, h4{
    font-family: gentium, serif;
    color: var(--primary-text-color);
}

h2{
    font-size: var(--heading-big);
}

:focus-visible{
    outline: 2px solid blue;
}

.primary-button-styled{
    padding: .5rem 1.5rem;
    appearance: none;
    border: 2px solid var(--primary-accent-color);
    background-color: var(--primary-accent-color);
    color: var(--secondary-text-color);
    transition: .2s ease;
    width: fit-content;
    cursor: pointer;

    &:hover{
        color: var(--primary-accent-color);
        background: none;
    }
}

.secondary-button-styled{
    padding: .5rem 1.5rem;
    appearance: none;
    border: 2px solid var(--primary-text-color);
    background-color: var(--primary-text-color);
    color: var(--secondary-text-color);
    transition: .2s ease;
    width: fit-content;
    cursor: pointer;

    &:hover{
        color: var(--primary-text-color);
        background: none;
    }
}

.small-heading{
    font-family: inter, sans-serif;
    font-size: var(--paragraph-small);
    font-weight: 400;
}

section{
    padding: .5rem 1rem;

    @media (min-width: 64rem){
        padding: 2.5rem 5rem;
    }
}

.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}