@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Pixelify+Sans:wght@400..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {

    margin: 0;
    background: #0F111A;

}

header nav{

    background: #1B1E2F;
    overflow: hidden;
    border-radius: 14px;

}

nav {

    margin: 2%;

}

.nav {

    margin: 0;
    padding: 10px;

    list-style: none;
    display: inline-block;
    font-family: "Space Mono";
    color: #FFF;
    text-decoration: none;

}

.nav li {
    float: left;
}

.nav li a {

    padding: 60px 10px;
    font-size: 130%;
    text-decoration: none;
    color: #FFF;
   


}

.nav li a:hover {

    background: #7D5BA6;
    font-size: 150%;

}

main {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 40px 40px;

}

.Logo img {

    height: 265px;
    width: 260px;
    border-radius: 200px;

}

.Bienvenue {

    background: #7D5BA6;
    border-radius: 20px;


    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 40px;
    padding-right: 40px;

    margin-top: 75px;
    margin-left: 77px;
    margin-bottom: 80px;
    margin-right: 26px;
}

.Bienvenue p {
    color: #FFF;
    font-family: "Inter";
    font-size: 20px;
}

.secciones {

    display: flex;
    justify-content: space-evenly;
    padding: 40px 20px 80px;

}

.seccion {

    text-align: center;

}

.seccion img {

    height: 175px;
    width: 170px;
    border-radius: 50%;

}

.enlace {

    display: block;
    color: #00F0FF;
    font-family: "Pixelify Sans";
    font-size: 115%;
    text-decoration: none;

    margin-top: 12px;

}

.enlace:hover {

    text-decoration: underline;

}

footer {
    margin: 20px;
    padding: 16px;
    background: #1B1E2F;
    border-radius: 14px;
    text-align: center;
    font-family: "Space Mono";
    font-size: 32px;
    color: #FFF;
}

/* DISEÑO MOBILE */

.hamburger {

    display: none;
    background-color: #7D5BA6;
    border: none;
    color: white;
    font: 32px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;

}

@media (max-width: 768px) {


    header {

        display: flex;
        justify-content: space-between;
        align-items: center;

    }

    .hamburger {

        display: block;

    }

    nav {

        position: fixed;
        top: 0;
        left: -260px;
        width: 240px;
        height: 100vh;
        background-color: #1B1E2F;
        transition: left 0.3s ease;
        z-index: 1000;
        border-radius: 0;

    }

    nav.active {

        left: 0;

    }

    .nav {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 60px;
    }

    .nav a {

        width: 100%;
        padding: 16px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    }

    main {

        flex-direction: column;
        padding: 40px 20px;
        gap: 20px;

    }


    .logo img {

        width: 180px;

    }

    .Bienvenue {
        padding: 24px;
        font-size: 24px;
    }

    .secciones {

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding-bottom: 60px;

    }

    .seccion img {
        width: 140px;
    }

    footer {

        font-size: 24px;

    }

}