@font-face {
    font-family: "More Sugar";
    src: url('/assets/fonts/MoreSugar-Regular.otf');
    font-display: swap;
}

@font-face {
    font-family: "Aptos";
    src: url('/assets/fonts/Aptos.ttf');
    font-display: swap;
}

.aptos {
    font-family: Aptos;
}

.moreSugar {
    font-family: More Sugar;
}

.s1 {
    font-size: 16px;
}

.s2 {
    font-size: 20px;
}

.s3 {
    font-size: 24px;
}

.s4 {
    font-size: 30px;
}

.is1 {
    width: 50px;
    height : auto;
}

.is2 {
    width: 75px;
    height : auto;
}

.is3 {
    width: 100px;
    height : auto;
}

.is4 {
    width: 120px;
    height : auto;
}

@media (max-width : 830px) {

    .s1 {
        font-size: 8px;
    }

    .s2 {
        font-size: 10px;
    }

    .s3 {
        font-size: 15px;
    }

    .s4 {
        font-size: 24px;
    }
    
    .is1 {
        width: 35px;
        height : auto;
    }

    .is2 {
        width: 45px;
        height : auto;
    }

    .is3 {
        width: 60px;
        height : auto;
    }

    .is4 {
        width: 75px;
        height : auto;
    }
}

:root {
    --rose : #e8079b;
    --rose-light: #ff63d4;
    --beige : #f7eed5;
    --green : #d3ff8c;
    --purple : #9e48b4;
    --joinus-color: var(--rose-light);
    --joinus-hover: var(--green);
}

.rose {
    color: var(--rose);
}

.purple {
    color: var(--purple);
}

.beige, .beige .navbar, .beige .nav-link,
.beige .nav-link:focus,
.beige .nav-link:hover, .beige .navbar-brand {
    color: var(--beige);
}

.green, .green .navbar, .green .nav-link,
.green .nav-link:focus,
.green .nav-link:hover, .green .navbar-brand {
    color: var(--green);
}

.rose-bg {
    background-color: var(--rose);
}

.purple-bg {
    background-color: var(--purple);
}

.beige-bg {
    background-color: var(--beige);
}

.green-bg {
    background-color: var(--green);
}

html, body {
    height: 100%;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.navbar-toggler:focus,
.menu:focus, #lang-toggle:focus,
#lang-toggle:active {
    outline: none;
    box-shadow: none;
}

.navbar {
    color: inherit;
}

.navbar-brand img {
    height: 150px;
    margin: -10px;
}

.cross {
    background-image: url('/assets/img/cross.svg');
}

.burger {
    background-image: url('/assets/img/burger.svg');
}

#menu {
    width: 40px;
    height: 40px;
    margin-right: 3%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease, opacity 0.5s ease;
}

#menu.fade-out {
    transform: rotate(45deg);
    opacity: 0;
}

.navbar-toggler {
    border: none;
}

.nav-link {
    color: var(--green );
    transition: transform 0.3s ease, color 0.3s ease;
    transform-origin: center;
}

.nav-link:hover {
    color: var(--beige);
    transform: scale(115%);
}

@media (max-width : 830px) {

    .nav-link {
        transform-origin: right center;
    }
    
    .navbar-nav {
        margin-right: 2.5%;
    }

    .navbar-collapse {
        margin-right: 2%;
    }
    
    .nav-link:hover {
        color: var(--beige);
        transform: scale(110%);
    }

    html, body {
        height: 100%;
        scroll-snap-type: none;
        overflow-y: scroll;
        scroll-behavior: smooth;
    }
}

.slide {
    padding-top: 50px;
    height: 90vh;
    scroll-snap-align: start;
}

#home {
    padding-top: 100px;
}

.content {
    width: 80vw;
}

.in-body-img {
    width: 100px;
    height: 100%;
}

.home-img {
    top: 45%;
    left: 3%;
}

.about-img {
    top: 52%;
    left: 3%;
}

.team-img {
    top: 75%;
    left: 3%;
}

.value-img {
    top: 100%;
    left: 3%;
}

.contact-img {
    top: 95%;
    left: 3%;
}

@media (max-width: 830px) {
    .home-img {
        top: 32%;
    }
    
    .about-img {
        top: 32%;
    }

    .team-img {
        top: 32%;
    }

    .value-img {
        top: 32%;
    }

    .contact-img {
        top: 25%;
    }
}

.persos {
    width: 130px;
    height: 130px;
    margin-right: 20px;
}

.fa-brands {
    color: var(--beige);
    transition: transform 0.2s ease, color 0.2s ease;
}

.fa-brands:hover {
    color: var(--rose-light);
    transform: scale(120%);
}

.fa-discord.joinus {
    color: var(--rose-light);
    transition: transform 0.2s ease, color 0.2s ease;
}

.fa-brands.joinus:hover {
    color: var(--green);
    transform: scale(120%);
}

.i-size-1 {
    font-size: 30px;
}

.i-size-2 {
    font-size: 45px;
}

.mascotte {
    position: fixed;
    top: 20%; 
    left: 2.5%;
    z-index: 999;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mascotte:hover {
    transform: scale(1.1);
}

.joinus {
    position: fixed;
    bottom: 12%;
    right: 3%;
    z-index: 999;
    color: var(--joinus-color, var(--rose-light));
    transition: transform 0.2s ease, color 0.2s ease;
    transform-origin: center;
}

.joinus:hover {
    color: var(--joinus-hover, var(--rose-light));
    transform: scale(120%);
}

.joinus i, .joinus i:hover {
    color: inherit;
    transform: scale(1);
}

@media (max-width: 830px) {
    
    .persos{
        width: 70px;
        height: 70px;
        margin-top: 6px;
    }

    .navbar-brand img {
        height: 90px;
    }

    .i-size-1 {
        font-size: 20px;
    }

    .i-size-2 {
        font-size: 35px;
    }

    .mascotte {
        top: 13.5%;
        left: 2.5%;
    }
    
    .joinus {
        bottom: 7%;
    }
}