@font-face {
    font-family: 'TH Regular Header';
    src: url('../fonts/th-reg-header.woff') format('woff');
}

@font-face {
    font-family: 'Sohne';
    src: url('../fonts/sohne.woff') format('woff');
}


:root {
    --beretta-green: #1a332b;
    --beretta-orange: #e8683f;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--beretta-green);
}

.welcome-title {
    font-family: 'TH Regular Header', sans-serif;
    font-size: clamp(2rem, 8vw, 4rem);
}

.alt-font {
    font-family: 'Sohne', sans-serif;
    word-spacing: 0.15em;
}

.logo {
    max-height: 90px;
}

#bg-image-container {
    background-image: url('../image/background-image.jpg');
    background-size: cover;
    background-position: center;
}

.country-card {
    background-color: var(--beretta-green);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 2.5rem;
    letter-spacing: .15em;
}

.flag {
    width: 90px;
    height: 90px;
    object-fit: cover;
}

.accent-line {
    width: 70px;
    border-top: 4px solid var(--beretta-orange);
}

.btn-enter {
    color: var(--beretta-orange);
    border: 1px solid var(--beretta-orange);
    letter-spacing: .15em;
}

.country-card:hover .btn-enter,
.btn-enter:hover {
    color: #fff;
    background-color: var(--beretta-orange);
}

#cookieBanner {
    background-color: color-mix(in srgb, var(--beretta-green), white 12%);
    border-top: 1px solid rgba(255, 255, 255, .4);
    letter-spacing: .05em;
    z-index: 1080;
}

.btn-cookie-accept {
    color: #fff;
    background-color: var(--beretta-orange);
    border: 1px solid var(--beretta-orange);
    letter-spacing: .15em;
}

.btn-cookie-accept:hover {
    color: var(--beretta-orange);
    background-color: transparent;
}