@font-face {
    font-family: "Mulish";
    src: url("../fonts/Mulish.ttf");
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Mulish';
    font-optical-sizing: auto;
    color: var(--white);
    text-decoration: none;
    font-synthesis: none !important;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: content-box;
    line-height: 1.2;

    transition-duration: 0.3s;
}

html {
    scroll-behavior: smooth;
}

:root {
    --white: #FFFFFF;
    --harakiri: #232323;
    --matrix: #838EA3;
    --drive: #5C666F;
    --troy: #4B4B4B;
    --inception: #DCDCDC;
    --five: #F5F5F4;
    --metropolis: #2D2E2E;
    --walle: #BABABA;
    --thar: #2323237f;
}

html[data-theme="dark"]:root {
    --white: #232323;
    --harakiri: #FFFFFF;
    --five: #2D2E2E;
    --metropolis: #F5F5F4;
    --troy: #BABABA;
}

body{
    background-color: var(--white);
    transition-duration: .3s;
}

body.dark{
    background-color: var(--harakiri);
    transition-duration: .3s;
}

main {
    background-color: var(--white);
}

section{
    padding: 100px 0;
}

.content {
    margin: 0 auto;
    width: calc(100% - 100px);
    padding: 0 50px;
    max-width: 1300px;

    display: flex;
    flex-direction: column;
    gap: 50px;
}

body.disableScroll {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.title{
    font-size: 54px;
    font-weight: 700;
    text-transform: uppercase;
}

.bulletText{
    font-size: 22px;
    font-weight: 500;
}

.navigation{
    font-size: 18px;
    font-weight: 400;
}

.blockTitle{
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 500;
    text-transform: uppercase;
}

.listTitle{
    font-size: 26px;
    font-weight: 500;
}

.text{
    font-size: 18px;
    font-weight: 400;
}

.formAgreement{
    font-size: 14px;
    font-weight: 400;
}

.buttonText{
    font-size: 16px;
    font-weight: 400;
}

.blockDescription{
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 400;
}

.cartTitle{
    font-size: clamp(22px, 2vw, 26px);
    font-weight: 400;
}

.ctaNumber{
    font-size: 36px;
    font-weight: 400;
}

.btn{
    background-color: transparent;
    border: 1px solid var(--white);
    outline: none;
    cursor: pointer;
    color: var(--white);

    padding: 35px;
    border-radius: 50px;
    width: fit-content;
    height: fit-content;
}

.btn:disabled{
    opacity: 0.5;
    cursor: default;
}

.btn.active{
    color: var(--drive) !important;
    border-color: var(--drive) !important;
}


@media (max-width:850px) {
    section{
        padding: 50px 0;
    }
    
    .content {
        width: calc(100% - 40px);
        padding: 0 20px;
        max-width: 100%;
    
        gap: 30px;
    }
    
    .title{
        font-size: 36px;
        font-weight: 700;
    }
    
    .bulletText{
        font-size: 18px;
        font-weight: 500;
    }
    
    .navigation{
        font-size: 16px;
        font-weight: 400;
    }
    
    .blockTitle{
        font-size: 20px;
        font-weight: 500;
    }
    
    .listTitle{
        font-size: 20px;
        font-weight: 500;
    }
    
    .text{
        font-size: 14px;
        font-weight: 400;
    }
    
    .formAgreement{
        font-size: 14px;
        font-weight: 400;
    }
    
    .buttonText{
        font-size: 16px;
        font-weight: 400;
    }
    
    .blockDescription{
        font-size: 20px;
        font-weight: 400;
    }
    
    .cartTitle{
        font-size: 22px;
        font-weight: 400;
    }
    
    .ctaNumber{
        font-size: 28px;
        font-weight: 400;
    }
}