@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Mukta:wght@200;300;400;500;600;700;800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root {
    --h1: normal 700 4rem/1.2 "Roboto Mono", monospace;   
    --h2: normal 600 2.5rem/1.3 "Roboto Mono", monospace;  
    --h3: normal 500 2rem/1.4 "Roboto Mono", monospace;   
    --h4: normal 500 1.5rem/1.4 "Roboto Mono", monospace;  
    --p: normal 400 1rem/1.6 "Roboto Mono", monospace;     
    --link: normal 500 1rem/1.6 "Roboto Mono", monospace;

    --h1-mobile: normal 700 2.6rem/1.2 "Roboto Mono", monospace;
    --h2-mobile: normal 600 1.9rem/1.25 "Roboto Mono", monospace;
    --h3-mobile: normal 500 1.6rem/1.3 "Roboto Mono", monospace;
    --h4-mobile: normal 500 1.25rem/1.3 "Roboto Mono", monospace;
    --p-mobile:  normal 400 0.95rem/1.45 "Roboto Mono", monospace;
    --link-mobile: normal 500 0.95rem/1.45 "Roboto Mono", monospace;

    --transition: all 0.3s ease-in-out;

    --yellow: #EBEB37;
    --black: #000000;
    --spuma: #FFFFFF;
    --grey: #c1c1c1;

}

body {
    position: relative;
}

body.no-scroll {
    overflow: hidden;
    height: 100vh;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.title {
    font: var(--h1);
}

.box {
    margin-top: 120px;
    
}

#hand-img {
    width: 100%;
}

.font-display {
    position: relative;
}

.text-open {
    font-family: "Noto Sans", sans-serif;
    display: inline-block;
    color: var(--black);
    font-size: 250px;
    font-weight: 500;
    opacity: 0.2;

}

#wfb {
    font-family: "Mukta", sans-serif;
    display: inline-block;
    color: var(--black);
    font-size: 250px;
    font-weight: 500;
    opacity: 0.2;
}

#wfb-2 {
    font-family: "Familjen Grotesk", sans-serif;
    display: inline-block;
    color: var(--black);
    font-size: 250px;
    font-weight: 500;
    line-height: 377px;
    opacity: 0.2;
}

.text-jr {
    font-family: "Noto Sans", sans-serif;
    font-weight: 600;
    opacity: 1;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    position: absolute;
    
}

#wf1 {
    font-family: "Mukta", sans-serif;
    font-weight: 600;
    opacity: 1;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    position: absolute;
}

#wf2 {
    font-family: "Familjen Grotesk", sans-serif;
    font-weight: 600;
    opacity: 1;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    position: absolute;
}

.colored-box {
    background-color: #6F8534;
    width: 200px;
    height: 200px;
    border-radius: 20px;
}

.color-name p{
    font: var(--p);
    font-size: 24px;
}

#color-2 {
    background-color: #8AA541;
    width: 200px;
    height: 200px;
    border-radius: 20px;
}

#color-3 {
    background-color: #F9F6F1;
    width: 200px;
    height: 200px;
    border-radius: 20px;
}

#w1-box {
    background-color: #DDD92A;
    width: 200px;
    height: 200px;
    border-radius: 20px;
}

#w2-box {
    background-color: #999999;
    width: 200px;
    height: 200px;
    border-radius: 20px;
}

#w3-box {
    background-color: #706F6F;
    width: 200px;
    height: 200px;
    border-radius: 20px;
}

h2 {
    font: var(--h2);

}

p {
    font: var(--p);

}

/* ---------- MEDIA ---------- */

@media (max-width: 768px) {


h2 {
    font: var(--h2-mobile);

}

p {
    font: var(--p-mobile);

}

h1 {
    font: var(--h1-mobile);
}
}