/* Baubles */
@import "../bauble/bauble.css";

/* Buttons */
@import "../button/back.css";
@import "../button/back-conditions.css";
@import "../button/close-introduction.css";
@import "../button/download.css";
@import "../button/audioBtn.css";

/* Layouts */
@import "../layout/left.css";
@import "../layout/right.css";

/* pop-ups */
@import "../pop-up/discount-code-wrapper.css";
@import "../pop-up/ingredient-list.css";
@import "../pop-up/lottery-conditions.css";
@import "../pop-up/pop-up-conditions.css";
@import "../pop-up/pop-up-img-wrapper.css";
@import "../pop-up/pop-up-introduction.css";
@import "../pop-up/pop-up-number.css";
@import "../pop-up/pop-up-wrapper.css";

/* hind-300 - latin */
@font-face {
    font-display: swap;
    font-family: 'Hind';
    font-style: normal;
    font-weight: 300;
    src: url('../../fonts/hind-v16-latin-300.woff2') format('woff2');
}
/* hind-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Hind';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/hind-v16-latin-regular.woff2') format('woff2');
}
/* hind-600 - latin */
@font-face {
    font-display: swap;
    font-family: 'Hind';
    font-style: normal;
    font-weight: 600;
    src: url('../../fonts/hind-v16-latin-600.woff2') format('woff2');
}


:root {
    --bouble-width-small: clamp(100px,5vw,115px);
    --bouble-width-medium: clamp(120px,5vw,140px);
    --bouble-width-large: clamp(145px,5vw,195px);

    /* Fonts */
    --font-title: normal 600 clamp(45px, 4vw, 62px)/clamp(45px, 6vw, 55px) 'Hind', sans-serif;
    --font-h1: normal 600 clamp(40px, 4vw, 50px)/clamp(42px, 6vw, 52px) 'Hind', sans-serif;
    --font-number: normal 600 clamp(60px, 4vw, 75px)/clamp(35px, 6vw, 40px) 'Hind', sans-serif;
    --font-p: normal 400 clamp(16px,4vw, 25px)/clamp(25px, 6vw, 35px) 'Hind', sans-serif;
    --font-i: normal 300 clamp(12px, 4vw, 17px)/clamp(17px, 6vw, 22px) 'Hind', sans-serif;

    /* Backgrounds */
    --pop-up-background: rgba(255, 255, 255, 0.95);

    /* Colors */
    --color-h1-lightBG: #000;
    --color-h1-darkBG: #FFF;
    --color-p: #000;
    --color-a: #3c3c9d;
    --color-a-hover: #000;
    --citynews-orange: #f07d00;
}

html {
    margin: 0 auto;
    height: 100%;
}

body {
    background-image: url("../../img/background_1.png");
    background-size: cover;
    background-repeat: repeat-x;
    background-position: bottom;
    background-attachment: fixed;
    margin: 0 auto;
    height: 100%
}

.headline {
    color: var(--color-h1-darkBG);
    text-align: center;
    font: var(--font-title);
    z-index: 4;
    background: radial-gradient(ellipse at center, #e21c24 1%, #e31c24 30%,rgba(120,180,228,0) 70%,rgba(125,185,232,0) 100%);
    padding: 50px 50px 40px 50px;
}

p{
    color: var(--color-p);
    font: var(--font-p);
}

a{
    color: var(--color-a);
    font: var(--font-p);
    text-decoration: none;
}

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

.hide {
    display: none !important;
}

.open {
    display: flex !important;
    opacity: 1 !important;
}

.hide-btn {
    cursor: default;
}

@media screen and (max-width: 1200px){
    /* Width */
    ::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: rgb(100, 30, 33);
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 50px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}