:root{
    --H1: 4.5rem;
    --H2: 2.8rem;
    --H3: 2.4rem;
    --LANDING: 2rem;
    --H4: 1.6rem;
    --P: 0.8rem;

    --GAP: 2.8rem;

    --NAVGAP: 44px;
    --NAVPADDING: 22px;
    --SETTINGSGAP: 15px;
    --ROUNDPADDING: 52px;

    --RADIUS01: 80px;
    --RADIUS02: 26px;
    --RADIUS02-5: 20px;
    --RADIUS03: 15px;

    --HEADERHEIGHT: 42px;
    --SCROLLOFFSET: calc(var(--HEADERHEIGHT) + 40px);

    --SVG00: 70px;
    --SVG01: 28px;
    --SVG02: 24px;
    --SVG03: 8px;
    --SVG-STROKE-01: 1.5px;
    --SVG-STROKE-02: 2px;
    --SVG-STROKE-03: 12px;

    /*Regular 400   Medium 500   Bold 700*/
}

html{
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--BG01);
    overflow: hidden;
    transition: 0.2s ease;
    transition-property: color, background-color;
}

body::-webkit-scrollbar{
    width: 16px;
    background-color: var(--BG02);
}

body::-webkit-scrollbar-thumb{
    border-radius: 100px;
    border-style: solid;
    border-width: 4px;
    background-color: var(--BG03);
    border-color: var(--BG02);
}

@font-face {
    font-family: "milcora";
    src: url(../res/fonts/milcora.otf);
}

@font-face {
    font-family: "dealing";
    src: url(../res/fonts/dealing.otf);
}

button{
    background-color: transparent;
    padding-block: 0;
    padding-inline: 0;
    border: none;
    outline: none;
    cursor: pointer;
}

ul{
    margin: 0;
    padding-inline-start: 0;
}

ul li{
    display: block;
    list-style: none;
    line-height: 0;
}

a{ 
    text-decoration: none;
    display: flex;
    cursor: pointer;
}

h1::first-letter{
    font-feature-settings: "swsh" 1;
}

h1{
  color: var(--TXT01);  
  font-family: "Fields", sans-serif;
  font-weight: 900;
  font-size: var(--H1);
  line-height: 80px;
  margin: 0;
}

h2::first-letter{
    font-feature-settings: "swsh" 1;
}

h2{
  color: var(--TXT01);  
  font-family: "Fields", sans-serif;
  font-weight: 700;
  font-size: var(--H2);
  margin: 0 0 var(--GAP) 0;
}

span{
    font-feature-settings: "swsh" 1;
}

h3::first-letter{
    font-feature-settings: "swsh" 1;
}

h3{
    color: var(--TXT01);  
    font-family: "Fields", sans-serif;
    font-weight: 400;
    font-size: var(--H3);
    margin: 0;
}

h4{
    color: var(--TXT01);  
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: 700;
    font-size: var(--H4);
    line-height: calc(var(--H4)*1.2);
    margin: 0;
}

#ABOUT h4{
    margin-bottom: calc(var(--GAP)/5);
}

h4+h5{
    position: relative;
    top: -5px;
}

.-W-H4{
    color: var(--TXT03);
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: 700;
    font-size: var(--H4);
    margin: 0;
}

p, .-B-P{
    color: var(--TXT02);
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: 500;
    font-size: var(--P);
    margin: 0;
}

.-W-P{
    color: var(--TXT03);
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: 500;
    font-size: var(--P);
    margin: 0;
}

.-G-P, .film-card span{
    color: var(--TXT01);
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: 700;
    font-size: var(--P);
    margin: 0;
}

.-B-BUTTON{
    color: var(--TXT02);
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: 700;
    font-size: var(--P);
    margin: 0;
    text-wrap: nowrap;
}

.-W-BUTTON{
    color: var(--TXT03);
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: 700;
    font-size: var(--P);
    margin: 0;
    text-wrap: nowrap;
}

.-G-LANDING{
    color: var(--TXT01);
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: 400;
    font-size: var(--LANDING);
    margin: 0;
}

.-RUNIC{
    font-family: "Noto Sans Runic", serif;
}

.-BUTTON{
    background-color: var(--BUTTON01);
    width: fit-content;
    height: var(--HEADERHEIGHT);
    padding: 0px var(--NAVPADDING);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    transition: ease 0.2s;
}

.-BUTTON-ALPHA{
    width: fit-content;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.-BUTTON:hover, .-BUTTON-ROUND:hover{
    background-color: var(--BUTTON02);
}

.-BUTTON-ROUND{
    background-color: var(--BUTTON01);
    height: var(--ROUNDPADDING);
    width: var(--ROUNDPADDING);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    transition: ease 0.2s;
    min-width: 36px;
    min-height: 36px;
}

.-SVG{
    fill: none;
    stroke: var(--TXT02);
    stroke-width: var(--SVG-STROKE-02);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.-SVG-LINE{
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.-L-LINE{
    stroke: var(--DECO01);
}

.-G-LINE{
    stroke: var(--TXT01);
}

.-W-SVG{
    fill: none;
    stroke: var(--TXT03);
    stroke-width: var(--SVG-STROKE-02);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.-SVG-MODAL{
    fill: none;
    stroke: var(--TXT03);
    stroke-width: var(--SVG-STROKE-02);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.-SVG-DOTS{
    fill: var(--TXT03);
    stroke: var(--TXT03);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: 0.3s ease;
}

.-SVG-SOCIALS{
    fill: none;
    stroke: var(--TXT02);
    stroke-width: var(--SVG-STROKE-01);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.-SVG-SOCIALS-FILL{
    fill: var(--TXT02);
    stroke: none;
}

/* --- VIDEOS --- */

.video-wrapper{
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: var(--RADIUS02);
    align-items: center;
}

.video-player{
    position: relative;
    width: 58vw;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--RADIUS02);
    display: flex;
    justify-content: center;
    align-items: center;
}

img.video-thumbnail{
    width: 100%;
}

.video-play-btn{
    position: absolute;
    transition: ease 0.2s;
}

.video-play-btn svg{
    height: var(--SVG02);
}

.video-iframe{
    width: 100%;
    min-height: 95px;
    height: 100%;
}

.video-wrapper>iframe{
    aspect-ratio: inherit;
}


/* --- LOADING --- */

#LOADING{
    z-index: 5;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--BG01);
}

.loading-container{
    position: relative;
    width: 20%;
    height: 30%;
}

.loading-img{
    width: var(--SVG00);
    height: var(--SVG00);
    transform: rotate(90deg);
    z-index: 6;
    offset-path: path(var(--path));
    -webkit-animation: travel 2s  infinite linear;
            animation: travel 2s  infinite linear;
    position: absolute !important;
    top: 0%;
    left: 0%;
}

@-webkit-keyframes travel{
    from{
        offset-distance: 0%;
    }
    to{
        offset-distance: 100%;
    }
}

@keyframes travel{
    from{
        offset-distance: 0%;
    }
    to{
        offset-distance: 100%;
    }
}

/* --- HEADER --- */

header{
    position: fixed;
    top: 20px;
    margin: 0px 3%;
    width: 94%;
    height: var(--HEADERHEIGHT);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    pointer-events: none
}

.header-home{
    height: var(--HEADERHEIGHT);
    transition: 0.2s ease;
    pointer-events: initial
}

.header-home-logo{
    stroke: var(--TXT01);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5px;
    fill: none;
}

.header-home:hover{
    transform: rotate(30deg);
}

#NAVIGATION{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--BG02);
    display: flex;
    justify-content: center;
    align-items: center;
    text-wrap: nowrap;
    gap: var(--NAVGAP);
    height: 100%;
    padding: 0px var(--NAVPADDING);
    width: fit-content;
    border-radius: 100px;
    overflow: hidden;
    pointer-events: initial;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
}

.header-nav-txt{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-wrap: nowrap;
    gap: var(--NAVGAP);
    height: 100%;
    padding: 0px var(--NAVPADDING);
}

.header-nav-slider{
    position: absolute;
    background-color: var(--BG03);
    left: -112px;
    height: 100%;
    width: 100px;
    border-radius: 100px;
    clip: rect(0, auto, auto, 0);
}

#SETTINGS{
    background-color: var(--BG02);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--SETTINGSGAP);
    height: 100%;
    padding: 0px var(--NAVPADDING);
    width: fit-content;
    border-radius: 100px;
    pointer-events: initial;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
}

#SETTINGS svg{
    height: var(--SVG02);
}

.header-language-btn{
    cursor: pointer;
}

.header-language-dropdown{
    background-color: var(--BG02);
    list-style: none;
    position: absolute;
    top: calc(var(--HEADERHEIGHT) + 15px);
    right: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: calc(var(--NAVPADDING) / 2);
    border-radius: var(--RADIUS02);
    display: none;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
}

.header-language-dropdown a{
    display: flex;
    flex-direction: row;
    justify-content: baseline;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border-radius: var(--RADIUS03);
}

.header-language-dropdown a:hover{
    background-color: var(--BG01);
}

.header-language-dropdown svg{
    border-radius: 5px;
}

.header-dark-btn{
    background-color: transparent;
    height: var(--SVG02);
}


/* --- FOOTER --- */

#FOOTER{
    width: 100%;
    height: fit-content;
    background: var(--BG03);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--GAP)/2);
    padding: var(--GAP) 7%;
    box-sizing: border-box;
}

.footer-links{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: calc(var(--GAP)/2);
}

.footer-links svg{
    height: var(--SVG01);
}

@media only screen and (hover: none){
    .-BUTTON:hover, .-BUTTON-ROUND:hover{
        background-color: var(--BUTTON01);
    }

    .header-home:hover{
        transform: initial;
    }
}

@media only screen and (max-width: 1240px){
    :root{
        --H1: 3.8rem;
    }

    h1{
        line-height: 70px;
      }
}

@media only screen and (max-width: 1024px){
    :root{
        --H1: 2.8rem;
        --H2: 2.6rem;
        --H3: 2.2rem;
        --LANDING: 1.8rem;
        --H4: 1.4rem;
        --P: 0.7rem;

        --NAVGAP: 36px;
        --NAVPADDING: 18px;
        --SETTINGSGAP: 10px;
        --ROUNDPADDING: 46px;
    
        --RADIUS01: 70px;
        --RADIUS02: 24px;
        --RADIUS02-5: 19px;
        --RADIUS03: 15px;

        --HEADERHEIGHT: 38px;

        --SVG00: 60px;
        --SVG01: 27px;
        --SVG02: 21px;
    }

    h1{
        line-height: 60px;
    }

}

@media only screen and (max-width: 768px){
    :root{
        --H1: 2.6rem;
        --H2: 2.4rem;
        --H3: 2rem;
        --LANDING: 1.6rem;
        --H4: 1.2rem;
        --P: 0.7rem;

        --NAVGAP: 30px;
        --NAVPADDING: 15px;
        --SETTINGSGAP: 8px;
        --ROUNDPADDING: 42px;
    
        --RADIUS01: 60px;
        --RADIUS02: 20px;
        --RADIUS02-5: 16px;
        --RADIUS03: 12px;

        --HEADERHEIGHT: 36px;

        --SVG01: 21px;
        --SVG02: 18px;
    }
}

@media only screen and (max-width: 525px){
    :root{
        --H1: 2.4rem;

        --SCROLLOFFSET: calc(var(--HEADERHEIGHT) * 2 + 50px);

        --RADIUS01: 50px;
        --RADIUS02: 18px;
        --RADIUS02-5: 14px;
        --RADIUS03: 10px;
    }

    h1{
        line-height: 50px;
    }

    h2{
        text-align: center;
    }

    #HOME{
        display: none;
    }

    #SETTINGS{
        position: fixed;
        top: calc(var(--HEADERHEIGHT) + 30px);
        left: 50%;
        transform: translate(-50%, 0);
        height: var(--HEADERHEIGHT);
    }

    .header-language-dropdown{
        right: auto;
    }

    .header-language-dropdown a{
        padding: 8px;
    }
}

@media only screen and (max-width: 425px){
    :root{
        --ROUNDPADDING: calc((72vw - var(--GAP) * 1.25) / 6);
        --RADIUS01: 40px;

        --LANDING: 1.45rem;
    }

    .video-iframe{
        width: 102%;
    }

    #FOOTER{
        padding: calc(var(--GAP)/1.2) 7%;
    }

    .footer-links{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: calc(var(--GAP)/3);
    }
}

@media only screen and (max-width: 375px){
    :root{
        --H1: 2.2rem;
        --H2: 2.2rem;
        --H3: 1.8rem;
        --LANDING: 1.35rem;
        --H4: 1.2rem;

        --RADIUS01: 30px;
        --GAP: 1.8rem;
    }
}

@media only screen and (max-width: 350px){
    :root{
        --NAVGAP: 24px;
        --NAVPADDING: 12px;
        --SETTINGSGAP: 8px;
    }
}