@font-face {
    font-family: 'Impact';
    src: local('Impact'), url('impact.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }


/* ------------- STYLES GÉNÉRAUX ------------- */

/* Variables */
:root {
    --rubis-size: 280px; /* Définir une variable pour la taille du losange */
}

/* Reset*/
* {
    margin: 0;
    padding: 0px
}

body {
    height: 100vh;
    background-color: #070404;
    color: white;
    font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif; /* Fonte générique pour la lisibilité */
    display: flex; /* Utilisation de flexbox pour centrer verticalement */
    flex-direction: column;
  }

/* ------------- HEADER ------------- */

header nav {
    position: fixed;
    top: 10px;
    left: 10px;
}

.menu-button {
    width: 50px;
    height: 50px;
    background-color: #555;
    color: #fff;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10%;
}

.menu-button:hover {
    background-color: #444;
}


/* ------------- MAIN ------------- */


main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

main h1 {
    font-size: 100px;
    margin: 20px;
}

.rubis-container {
    width: calc(var(--rubis-size) * 1.414);
    height: calc(var(--rubis-size) * 1.414);
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#rubis {
    width: var(--rubis-size);
    height: var(--rubis-size);
    transform: rotate(45deg);
    transition: background-color 3.9s ease;
}

.rouge1 {
    background-color: #c40505;
}

.rouge2{
    background-color: #6b0303;
}

main p {
    font-size: 32px;
    margin: 20px;
    color: #8d8d8d;
}


  /* ------------- FOOTER ------------- */

footer {
    padding: 10px;
    text-align: right;
    font-family: Arial, sans-serif;
    color: #2e2e2e;
}
footer a {
    color: #2e2e2e;
}


/* -------------- SMARTPHONE ----------------- */


@media screen and (max-width: 600px) {
    main h1 {
        font-size: 60px;
    }

    .rubis-container {
        width: calc(var(--rubis-size) / 2 * 1.414);
        height: calc(var(--rubis-size) / 2 * 1.414);
    }
    
    #rubis {
        width: calc(var(--rubis-size) / 2);
        height: calc(var(--rubis-size) / 2);
    }

    main p {
        font-size: 20px;
    }

}