* {
    margin: 0;
}

html {
    scroll-behavior: smooth; /* Effet de défilement fluide */
}

/************* INTEGRATION POLICE D'ÉCRITURE **************/
@font-face {
    font-family: "Pixelade";
    src: url("../fonts/Pixelade.TTF");
    font-weight: normal;
    font-style: normal;
}

body {
    overflow-x: hidden;
    background-color: black;
}

#matrix {
    position: fixed; /* Le canvas est fixé à l'écran */
    top: 0;
    z-index: -2; /* Envoyer le canvas à l'arrière-plan */
    pointer-events: none; /* Empêcher le canvas d'interférer avec les clics */
}

#logo_cp {
    display: block;
    width: 3.5rem;
    padding-left: 8vw;
}

.menu {
    position: fixed;
    width: 100%;
    margin-top: 1rem;
    display: block;
    top: 0;
}

.menu-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-listing {
    display: flex;
    align-items: center;
    list-style: none;
    padding-right: 7vw;
}

.menu-listing a {
    text-decoration: none;
    color: white;
    padding: 1rem 2rem;
    font-family: "anta"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
    filter: drop-shadow(#00C8FF 3px 3px 1.25px); /* Ombres pour l'écriture */
    font-size: 1.5vw;    
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 80px;
    color: white;
    z-index: 9999;
    padding-right: 2rem;
    display: flex;
    align-items: center;
    display: none;
}

#Accueil {
    text-align: center;
}

h1 {
    color: white;
    font-family: "anta"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
    font-size: 5vw; /* Modification de la taille du texte */
    margin-top: 14vw;
    filter: drop-shadow(#00C8FF 3px 3px 1.25px); /* Ombres pour l'écriture */
    font-weight: 300;
}

h2 {
    color: white;
    font-family: "Pixelade"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
    font-size: 4vw; /* Modification de la taille du texte */
    font-weight: 100; /* Réduction de l'épaisseur de mon texte */
    margin-top: 2vw;
    filter: drop-shadow(#00C8FF 2px 3px 1.25px); /* Ombres pour l'écriture */
}

#button_vp {
    margin-top: 4vw;
    padding: 1.25vw 2.5vw;
    font-size: 2vw; /* Modification de la taille du texte */
    font-family: "anta"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
    background-color: rgba(0, 0, 0, 0.678); /* Fond de mon bouton transparent */
    border: 3px solid #00C8FF;
    border-radius: 0.60rem; /* Arrondissement des bordures */
}

#button_vp a {
    text-decoration: none; /* Suppression du soulignement de texte */
    color: white;
    filter: drop-shadow(#00C8FF 2px 3px 1.25px); /* Ombres pour l'écriture */
}

#button_vp:hover {
    background-color: rgba(255, 255, 255, 0.849); /* Change la couleur du fond du bouton en blanc au survol */
}

#button_vp:hover a {
    color: black; /* Changer la couleur du texte en noir au survol */
}

#Infos {
    margin-top: 20vw;
    color: white;
}

h3 {
    text-align: center;
    font-family: "Pixelade"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
    font-size: 60px; /* Modification de la taille du texte */
    font-weight: 100; /* Réduction de l'épaisseur de mon texte */
    margin-top: 2rem;
    filter: drop-shadow(#00C8FF 2px 3px 1.25px); /* Ombres pour l'écriture */
    color: white;
}

#code_style_container {
    margin-top: 8rem;
    margin-bottom: 15rem;
    margin-left: 10vw;
    width: 90%;
    word-spacing: 0.15vw; /* Modification de l'espace entre les mots */
}

pre {
    width: 95%;
    margin-top: 5rem;
    line-height: 1.75rem; /* Modification de l'espace entre les lignes de mon texte */
    white-space: pre-wrap; /* Permet au texte de passer à la ligne si nécessaire */
    word-wrap: break-word; /* Casse les longs mots si nécessaire */
    overflow-wrap: break-word;
}

.blue_color {
    color: #4996D6;
    font-size: 20px; /* Modification de la taille du texte */
}

.grey_color {
    color: #848484;
    font-size: 20px; /* Modification de la taille du texte */
}

.blue_color2 {
    color: #00C8FF;
}

.text_modif {
    font-family: "Pixelade"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
    font-size: 28px; /* Modification de la taille du texte */
}

.text_with_margin {
    font-family: "Pixelade"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
    font-size: 28px; /* Modification de la taille du texte */
}

#skills {
    font-family: "anta"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
    color: white;
    font-size: 28px; /* Modification de la taille du texte */
}

#skills_container {
    margin-top: 5rem;
    display: flex; /* Utilisation de flexbox pour créer 2 colonnes */
    justify-content: center; /* Centre les div horizontalement */
    gap: 20.5vw; /* Ajoute un espace entre les deux sections Front-End et Back-End */
}

#skills_container progress {
    width: 20.5vw;
}

.skills_class {
    text-align: center;
    margin-bottom: 3rem;
}

#skills_class2 {
    text-align: center; /* Alignement de mon texte au centre du conteneur */
    margin-bottom: 3rem;
    margin-top: 5rem;
}

.name_skills {
    font-size: 18px; /* Modification de la taille du texte */
}

#skills_container2 {
    width: 20.6vw; /* Modification de la largeur de ma barre de progression */
    margin: auto; /* Alignement de mon texte au centre de ma page */
    margin-bottom: 5rem;
}

progress::-webkit-progress-bar {
    background-color: white; /* Couleur de la barre non remplie */
}

progress {
    background-color: white; /* Couleur de la barre non remplie */
}

progress::-webkit-progress-value {
    background-color: #00C8FF; /* Couleur de la partie remplie */
}

progress::-moz-progress-bar {
    background-color: #00C8FF; /* Couleur de la partie remplie */
}

progress {
    height: 0.75rem; /* Modification de la hauteur de ma barre de progression */
    width: 100%;
    border-radius: 0.4vh; /* Arrondit les bordures */
    overflow: hidden; /* Empêche les coins arrondis de dépasser */
    margin-bottom: 2rem;
}

#projects {
    width: 70%; /* Permet de modifier la largeur de mon conteneur */
    margin: auto; /* Permet de centrer la section "Projects" */
}

figure {
    text-align: center; /* Centre le texte de la légende */
}

figcaption {
    margin-top: 1rem; /* Espace au-dessus de la légende */
    font-size: 20px; /* Ajuste la taille de la police selon tes préférences */
    color: #ffffff; /* Couleur pour le texte de la légende */
    font-family: "anta"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
}

.image_container {
    margin-top: 5rem;
    display: grid; /* Utilise Grid pour organiser les images */
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes de même taille */
    justify-items: center; /* Permet de centrer les images */
    column-gap: 1rem; /* Ajuste l'espace entre les colonnes */
}

.image_container img {
    height: 17rem; /* Modifie la taille de l'image */
    width: 90%; /* Permet de modifier la largeur de mon conteneur */
    object-fit: fill; /* Remplit l'espace sans déformer l'image */
    border: 4px solid #00C8FF; /* Ajout de bordure à l'image */
}

#contact {
    margin-top: 15rem;
    width: 100%;
}

#form {
    color: white;
    text-align: center; /* Permet de centrer mon texte au milieu de la page */
    font-family: "anta"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
    font-size: 18px; /* Modification de la taille du texte */
    width: 45vw;
    margin: auto; /* Permet de mettre mon bloc au centre */
    margin-top: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 2rem; /* Arrondit les bords */
    background-color: rgba(0, 200, 255, 0.384);
}

.form-container {
    display: flex;
    justify-content: space-between; /* Position entre les colonnes */
    gap: 2rem; /* Espace entre les colonnes */
}

.form-left,
.form-right {
    flex: 1; /* Chaque colonne occupe la moitié de l'espace */
    padding: 1.5rem 2rem;
}

.form-left div,
.form-right div {
    margin-bottom: 1rem;
    margin-left: -1rem;
}

form label {
    display: block; /* Permet de mettre le label au-dessus de l'input */
    text-align: left;
}

form input {
    width: 70%; /* Les inputs prennent toute la largeur de la colonne */
    padding: 0.5rem;
    border: 2px solid #00C8FF; /* Ajout de bordure sur les input avec leur couleur */
    border-radius: 0.5rem; /* Arrondit les bordures */
    box-sizing: border-box; /* Pour s'assurer que padding et largeur ne causent pas de débordement */
    background-color: transparent; /* Fond des input transparent */
}

form textarea {
    width: 85%; /* Les inputs prennent toute la largeur de la colonne */
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 2px solid #00C8FF; /* Ajout de bordure sur le textarea avec sa couleur */
    box-sizing: border-box; /* Pour s'assurer que padding et largeur ne causent pas de débordement */
    background-color: transparent; /* Fond du textarea transparent */
    height: 8rem; /* Modifie la hauteur du champ de text */
    margin-right: 2rem;
}

/***************************** SELECTION DE LA 2ÈME DIV DE MON FORMULAIRE *****************************/
.form-left div:nth-child(2) {
    margin-left: 3rem;
    margin-top: 2.8rem;
    width: 102%;
}

/***************************** SELECTION DE LA 3ÈME DIV DE MON FORMULAIRE *****************************/
.form-left div:nth-child(3) {
    margin-top: 2.8rem;
    width: 102%;
}

/***************************** SELECTION DE LA 4ÈME DIV DE MON FORMULAIRE *****************************/
.form-left div:nth-child(4) {
    margin-left: 3rem;
    margin-top: 2.8rem;
    width: 102%;
}

/***************************** SELECTION DU 1ER LABEL DE MON FORMULAIRE *****************************/
.form-left div:nth-child(1) label {
    margin-left: 3.7rem;
}

/***************************** SELECTION DU 2ÈME LABEL DE MON FORMULAIRE *****************************/
.form-left div:nth-child(2) label {
    margin-left: 3.6rem;
}

/***************************** SELECTION DU 3ÈME LABEL DE MON FORMULAIRE *****************************/
.form-left div:nth-child(3) label {
    margin-left: 3.7rem;
}

/***************************** SELECTION DU 4ÈME LABEL DE MON FORMULAIRE *****************************/
.form-left div:nth-child(4) label {
    margin-left: 3.5rem;
}

#icone_mail {
    height: 2vh; /* Modification de la taille de l'image avec son id */
    margin-top: 0.2rem;
    margin-left: 0.7rem;
    padding-right: 0.3rem;
}

#icone_phone {
    height: 2.5vh; /* Modification de la taille de l'image avec son id */
    width: 2.4vh; /* Modification de la largeur de l'image */
    margin-left: 0.7rem;
    padding-right: 0.5rem;
}

#num_phone {
    font-size: 15px; /* Modification de la taille de la police avec son id */
}

#icone_house {
    height: 2.5vh; /* Modification de la taille de l'image avec son id */
    width: 2.4vh; /* Modification de la largeur de l'image */
    margin-left: 0.7rem;
    padding-right: 0.5rem;
}

#adress {
    font-size: 17px; /* Modification de la taille de la police avec son id */
    margin-top: 0.1rem;
}

#postal_code {
    font-size: 15px; /* Modification de la taille de la police avec son id */
}

/***************************** SELECTION DE LA 2ÈME DIV DE MA COLONNE DE DROITE (FORMULAIRE) *****************************/
.form-right .contact-container:nth-of-type(2) {
    margin-top: 1.7rem;
    margin-right: 2.5rem;
}

/***************************** SELECTION DE LA 3ÈME DIV DE MA COLONNE DE DROITE (FORMULAIRE) *****************************/
.form-right .contact-container:nth-of-type(3) {
    margin-top: 1.5rem;
    margin-right: 2rem;
}

/***************************** SELECTION DE LA 4ÈME DIV DE MA COLONNE DE DROITE (FORMULAIRE) *****************************/
.form-right .contact-container:nth-of-type(4) {
    margin-top: 1.5rem;
    margin-right: 1.9rem;
}

.form-right label {
    margin-left: 1rem;
}

.form-right p {
    text-align: center;
}

#logo_socials {
    display: flex; /* Permet de mettre mes 3 images sur la même ligne en utilisant le flexbox */
    justify-content: space-evenly; /* Permet de gérer l'espace entre mes 3 images */
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

#logo_socials img {
    height: 3rem; /* Modifie la taille de base de mes 3 images */
    display: block;
}

/***************************** SELECTION DE LA 1ÈRE IMAGE DES LOGOS (FORMULAIRE) *****************************/
#logo_socials img:nth-child(1) {
    height: 3.2rem; /* Modifie la taille plus précisément de l'image 1 */
}

/***************************** SELECTION DE LA 2ÈRE IMAGE DES LOGOS (FORMULAIRE) *****************************/
#logo_socials img:nth-child(2) {
    height: 3.4rem; /* Modifie la taille plus précisément de l'image 2 */
}

footer ul {
    padding: 3rem;
    list-style-type: none; /* Suppression du style des listes */
    display: flex; /* Utilisation de flexbox pour aligner mes éléments cote à cote */
    justify-content: center; /* Centre tous mes élements */
    white-space: nowrap; /* Empêche le retour à la ligne des éléments */
}

footer li {
    color: white;
    text-decoration: none; /* Suppression du soulignement de texte */
    font-family: "anta"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
    font-size: 20px;
    padding: 0 2vw;
    margin-top: 1.2rem;
}

footer a {
    text-decoration: none;
    color: white;
}

.dividing_bar {
    margin-bottom: 15rem;
    margin-left: 30%;
    margin-right: 30%;
    box-shadow: 0px 0px 10px 5px #00C8FF; /* Ajout d'ombres autour de ma barre de séparation */
}

.dividing_bar2 {
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 15rem;
    box-shadow: 0px 0px 10px 5px #00C8FF; /* Ajout d'ombres autour de ma barre de séparation */
}

.form-right button {
    margin-left: -3rem;
    background-color: transparent;
    border: 2px solid #00C8FF;
    color: white;
    border-radius: 5px;
    padding: 0.5rem 2rem;
    font-size: 16px;
    font-family: "anta"; /* Appel d'une de mes police d'écriture venant d'être intégrer */
}

.form-right button:hover {
    margin-left: -3rem;
    background-color: black;
    border: 2px solid #00C8FF;
    color: #00C8FF;
    border-radius: 5px;
    padding: 0.5rem 2rem;
}

.grow { 
    transition: all .2s ease-in-out; 
}
  
.grow:hover { 
    transform: scale(1.5); 
}

.download-btn {
    display: inline-block;
    font-family: "anta";
    padding: 0.75rem 1.5rem;
    background-color: #00C8FF;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0.5rem;
    transition: background-color 0.3s;
    position: relative;
    top: -5vh;
    left: 44.5vw;
    margin-bottom: 2rem;
}

.download-btn:hover {
    color: black;
}


@media (max-width: 1644px) {
    #code_style_container {
        margin-left: 15vw; /* Réduit la marge gauche sur les petits écrans */
        width: 75%;
    }

    pre {
        margin-top: 5rem;
        line-height: 1.75rem; /* Modification de l'espace entre les lignes de mon texte */
        white-space: pre-line; /* Permet au texte de passer à la ligne si nécessaire */        
    }

    .text_with_margin {
        display: block; /* Permet de faire en sorte que le span occupe toute la largeur */
        margin-left: 11.5rem; /* Ajuste l'espace à gauche selon tes besoins */
        margin-bottom: -1rem;
    }

    .margin_left_side1 {
        margin-left: 3rem;
    }

    .margin_left_side2 {
        margin-left: 6rem;
    }

    .margin_left_side3 {
        margin-left: 9rem;
    }

    .margin_left_side4 {
        margin-left: 20rem;
    }
}

@media (max-width: 1440px) {
    .image_container {
        grid-template-columns: repeat(2, 1fr);
    }

    .image_container img:nth-child(3) {
        margin-top: 3.5rem;
    }
}

@media (max-width: 1280px) {
    #form {
        min-width: 755px;
    }

    .form-container {
        display: block;  
        padding-right: 3.5rem;      
    }

    .form-left {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .responsive-left:nth-child(1) {
        margin-top: 2.8rem;
    }

    .form-left div,
    .form-right div {
        margin-top: 2.8rem;
        margin-right: -1rem;
    }

    form input {
        width: 90%;
    }

/***************************** SELECTION DU 1ER INPUT DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(1) input {
        width: 80%;
    }
    
/***************************** SELECTION DU 1ER LABEL DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(1) label {
        margin-left: 2.6rem;
    }

/***************************** SELECTION DU 2ÈME LABEL DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(2) label {
        margin-left: 1.5rem;
    }

/***************************** SELECTION DU 3ÈME LABEL DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(3) label {
        margin-left: 2.6rem;
    }

/***************************** SELECTION DU 4ÈME LABEL DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(4) label {
        margin-left: 1.5rem;
    }

/***************************** SELECTION DU 3ÈME INPUT DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(3) input {
        width: 86%;
        margin-left: 1.5rem;
    }

    .form-right label {
        margin-left: 2.6rem;
        margin-top: -3.5rem;
    }
    
    .form-right textarea {
        width: 98%;
        margin-left: 2.2rem;
    }

    .form-right .contact-container {
        margin-left: 6rem;
    }

    .form-right button {
        margin-left: 4rem;
    }
}

@media (max-width: 1024px) {
    footer li {       
        font-size: 17px;
    }
}

@media (max-width: 768px) {
    body {        
        background-repeat: no-repeat; /* Empêche l'image de fond de se répéter. */
        width: 100%;
    }

    h3 {
        font-size: 48px; /* Modification de la taille du texte */
    }

    #Infos {
        margin-left: -3rem;
        margin-bottom: -5rem;
    }

    #skills {
        margin-top: -5rem;
        margin-bottom: -5rem;
    }

    .skills_class {
        font-size: 26px;
    }

    .name_skills {
        font-size: 14px;
    }

    #skills_class2 {
        font-size: 26px;
    }

    #projects {
        margin-top: -5rem;
        margin-bottom: -2rem;
    }

    #contact {
        margin-top: 9rem;
    }

    #form {
        min-width: 450px;
    }

    .form-left div:nth-child(1) input {
        width: 72.2%;
        margin-left: -0.2rem;
    }

    .form-left div:nth-child(2) input {
        width: 80%;
    }

    .form-left div:nth-child(3) input {
        width: 80%;
    }

    .form-left div:nth-child(4) input {
        width: 80%;
    }

    footer {
        text-align: center;
    }

    footer ul {
        display: inline-block;
        text-align: center;
    }

    footer li {
        padding: 1rem 0;
    }

    .menu {
        display: none;
    }

    .menu-container {
        width: 100%;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        position: relative; /* Ajoutez ceci ici */
        z-index: 10; /* Assurez-vous qu'il soit supérieur */
        background-color: rgba(0, 0, 0, 0.87);
        margin-top: -1rem;
    }

    .menu-listing {
        flex-direction: column;
    }

    .menu-listing a {
        box-sizing: border-box;
        display: block;
        font-size: 1.7rem;
    }

    #logo_cp {
        margin-bottom: 4rem;
        margin-top: -7rem;
        width: 5rem;
        padding-left: 0;
    }

   .mobile-menu {
        display: flex;
        justify-content: center;
   }
}

@media (max-width: 566px) {
    .form-container {
        display: flex;
        flex-direction: column; /* Organise les éléments en colonne */
        align-items: center; /* Centre les éléments horizontalement */
        text-align: center; /* Centre le texte */
    }

    .form-right .contact-container {
        text-align: center; /* Centre le texte dans chaque contact-container */
    }

    .form-right label {
        margin-top: -5rem;
    }
}

@media (max-width: 455px) {
    #form {
        min-width: 345px;
    }

    .blue_color {
        font-size: 12px; /* Modification de la taille du texte */
    }
    
    .grey_color {
        font-size: 12px; /* Modification de la taille du texte */
    }

    .text_modif {
        font-size: 20px; /* Modification de la taille du texte */
    }
        
    .margin_left_side1 {
        margin-left: 1.5rem;
    }

    .margin_left_side2 {
        margin-left: 3.5rem;
    }

    .margin_left_side3 {
        margin-left: 5.5rem;
    }

    .text_with_margin {
        font-size: 20px; /* Modification de la taille du texte */
        margin-left: 7.5rem;
        width: 50%;
    }

    #pre_container {
        width: 80%;
    }

    #code_style_container {
        margin-left: 5rem;
        width: 90%;
    }

    .image_container {
        display: flex;
        flex-direction: column; /* Aligne les images en colonne */
        align-items: center; /* Centre les images horizontalement */
    }

    .image_container img {
        width: 90%; /* Ajustez la largeur des images si nécessaire */
        margin-bottom: 2rem; /* Espace entre les images */
    }

    .image_container img:nth-child(3) {
        margin-top: 0;
    }

    #skills_container {
        display: flex;
        flex-direction: column; /* Aligne les compétences en colonne */
        align-items: center; /* Centre les compétences horizontalement */
        text-align: center;
    }

    #skills_container2 {
        display: flex;
        flex-direction: column; /* Aligne en colonne */
        align-items: center;
        text-align: center;
        margin-top: 2rem;
    }

    #skills_container2 progress {
        width: 293%; /* Ajuste la largeur des barres de progression */
        margin-bottom: 1;
    }

    #skills_container div {
        width: 100%;
    }

    #skills_container progress {
        width: 60%;
    }

    .form-left {
        width: 100%; /* Prendre toute la largeur */
        display: flex;
        flex-direction: column; /* Colonne pour les inputs */
        align-items: center; /* Centrer les inputs */
    }

    .form-left {
        padding: 0;
        margin-left: 1rem;
        display: block;
    }

/***************************** SELECTION DE LA 2ÈME DIV DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(1) input {
        margin-left: 2.6rem;
        width: 70.5%;
    }

/***************************** SELECTION DU 1ER LABEL DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(1) label {
        margin-left: 4.7rem;
    }

/***************************** SELECTION DE LA 2ÈME DIV DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(2) {
        margin-left: 1.5rem;
        width: 98%;
    }

/***************************** SELECTION DU 2ÈME LABEL DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(2) label {
        margin-left: 2.2rem;
    }

/***************************** SELECTION DE LA 2ÈME DIV DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(3) {
        margin-left: 0.75rem;
        width: 98%;
    }
    
/***************************** SELECTION DU 3ÈME LABEL DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(3) label {
        margin-left: 2.95rem;
    }

/***************************** SELECTION DE LA 4ÈME DIV DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(4) {
        margin-left: 1.5rem;
        width: 97.5%
    }
    
/***************************** SELECTION DU 4ÈME LABEL DE MON FORMULAIRE *****************************/
    .form-left div:nth-child(4) label {
        margin-left: 2.1rem;
    }

    .form-right textarea {
        width: 80%;
        margin-left: 4rem;
    }

    .form-right label {
        margin-left: 4.3rem;
    }

}

@media (max-width: 360px) {
    #form {
        min-width: 90%;
    }

    .form-right textarea {
        width: 70%;
        margin-left: 5.2rem;
    }
}