:root {
    --body-margin: 0;
    --body-padding: 10%;

    --image-height-1: calc(100vw/8);
    --image-height-2: calc(100vw/6.5);
    --image-height-3: calc(100vw/3.5);
    --image-height-4: calc(100vw/3.5);
    --image-height-5: calc(100vw/2);

    --video-height: calc(100vw/1.8);

    --font-size-super-super-giant: 25px;
    --font-size-super-giant: 23px;
    --font-size-giant: 21px;
    --font-size-big: 19px;
    --font-size-normal: 17px;
    --font-size-small: 15px;
    --font-size-super-small: 13px;
    --font-size-super-super-small: 11px;

    --main-color: #3cacd7;

    --main-border-color: #3cacd7;
    --border-color-1: #eeeeee;
    --border-color-2: #cccccc;
    --border-color-3: coral;

    --main-background: #ffffff;
    --background-1: #fff4ea;
    --background-2: #eeeeee;
    --background-3: #cccccc;
    --background-4: #ffffff;
    --background-5: #3cacd7;
    --background-6: #000000;
    --background-7: orangered;
    --background-8: #b9e1ff;
    --background-9: green;
    --background-10: red;

    --text-color-1: #3cacd7;
    --text-color-2: #eeeeee;
    --text-color-3: #cccccc;
    --text-color-4: #000000;
    --text-color-5: #ffffff;
    --text-color-6: #FF0000;
    --text-color-7: #303030;

    --item-per-row-3: 3;
    --item-per-row-2: 2;
    --item-per-row-1: 1;

    --item-margin-10: 10px;
    --item-margin-5: 5px;
    --item-margin-0: 0px;
    --item-margin-20: 20px;

    --scroll-bar-width: 8px;

    --disable-color: #eeeeee;
}

@font-face {
    font-family: BeVietnamPro;
    src: url(../../webfonts/BeVietnamPro-Regular.ttf);
}

@font-face {
    font-family: Roboto-Light;
    src: url(../../webfonts/Roboto-Light.ttf);
}

@font-face {
    font-family: Roboto-Regular;
    src: url(../../webfonts/Roboto-Regular.ttf);
}

body {
    margin: var(--body-margin);
    font-family: BeVietnamPro, sans-serif;
    padding: 0 var(--body-padding) 0 var(--body-padding);
}

body:has(div.full-screen) {
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

/* Chrome, Firefox, Opera, Safari 10.1+ */
::placeholder {
    color: var(--background-3);
    opacity: 1;
    /* Firefox */
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
    color: var(--background-3);
}

/* Microsoft Edge */
::-ms-input-placeholder {
    color: var(--background-3);
}

/* width */
::-webkit-scrollbar {
    width: var(--scroll-bar-width);
    height: var(--scroll-bar-width);
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffffff;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--background-3);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--main-color);
}

/* -----------------------------RESPONSIVE------------------------------ */
@media only screen and (min-width: 1400px) {
    :root {
        --body-padding: 20%;
        --image-height-1: calc(100vw/10);
        --image-height-2: calc(100vw/8.5);
        --image-height-3: calc(100vw/5.5);
        --image-height-4: calc(100vw/4.5);
        --image-height-5: calc(100vw/2);
        --video-height: calc(100vw/3);
    }
}


@media only screen and (max-width: 1400px) {
    :root {
        --video-height: calc(100vw/2.2);
    }
}

@media only screen and (max-width: 1024px) {
    :root {
        --body-padding: 5px;
        --video-height: calc(100vw/1.8);
    }
}