:root {
    --gris_metallise: #e5e4e2;
    --bleu_marine: #080838;
    --bleu_paon: #005f69;
    --bleu_graduel: radial-gradient(circle at 74.2% 50.9%, rgb(14, 72, 222) 5.2%, rgb(3, 22, 65) 75.3%);
    --noir: #000000;
    --noir_metallise: #2C2C2B;
    --indigo_electrique: #6F00FF;
    --blanc: white;
    --orange_rouge: #ff4500;
    --olive_drab: #6B8E23;
    --celadon: #ACE1AF;
    --vert_terre: #DADD98;
    --or: #ffd700;
    --or_sombre: #b8860b;
    --artichaut: #8F9779;
    --khaki: #F0E68C;
    --bleu_cambridge: #A3C1AD;
    --rouge: red;
}

@media (max-width: 600px) {

    .content {
        max-width: 90%;/*960px;*/
        margin: auto;
    }

    header {
        background-color: var(--gris_metallise);
    /*    padding: 15px;*/
        position: relative;
        width: device-width%;
        height: 5.5%;
    }

    header .hleft {
        position: absolute;
        top: 12%;
        left: 5%;
        width: 50%;
        text-align: left;
        font-size: 3.2vh;/*30px;*/
        color: var(--noir);
        font-weight: bold;
    }

    
    header .hright {
        position: absolute;
        top: 30%;
        right: 5%;
        width: 40%;
        text-align: right;
        font-size: 1.7vh;/*16px;*/
        color: var(--noir);
    }

    a {
        text-decoration: none;
    }

    header .logoheader {
        width: 10%;
        height: 10%;
        border-radius: 0.3vh 0.3vh 0.3vh 0.3vh;/*px 3px 3px 3px;/* not working for mobile?*/
/*    object-fit: cover;*/
    }

    .vision {
        width: 90%;
    /*    padding: 8px;*/
        position: absolute;
        top: 10%;
        /*left: 0%;*/
        text-align: left;
        color: var(--bleu_marine);
        font-size: 4.9vh;/*45px;*/
    }

    .mission {
        width: 90%;
    /*    padding: 8px;*/
        position: absolute;
        top: 25.7%;
    /*left: 0%;*/
        text-align: left;
        color: var(--bleu_marine);
        font-size: 2.1vh;/*20px;*/
    }

    .slogan {
        width: 90%;
    /*    padding: 8px;*/
        position: absolute;
        top: 94%;
/*    left: 35%;*/
        text-align: center;
        color: var(--rouge);
        font-size: 3.2vh;/*30px;*/
        padding-bottom: 15%;
    }

    .panneau {
        width: 80%;
    /*    border: 30px solid #080838;*/
        padding: 5%;
/*    margin: 100px;*/
        background: var(--bleu_marine);
        position: absolute;
        top: 47%;
    /*left: 75%;*/
        /*right: 0%;*/
        /*transform: translateX(-50%) translateY(-45%);*/
        border-radius: 2.7vh 2.7vh 2.7vh 2.7vh;/*25px 25px 25px 25px;*/
        text-align: left;
    }

    .merci_inscription {
        width: 90%;
        position: absolute;
        top: 20%;
        text-align: center;
        color: var(--bleu_marine);
        font-size: 35px;
    }

    .message_inscription {
        width: 90%;
        position: absolute;
        top: 40%;
        text-align: center;
        color: var(--bleu_marine);
        font-size: 25px;
    }

    .panneau_contact {
        width: 80%;
        border: 0.32vh solid var(--gris_metallise);/*3px*/
        padding: 5%;
/*    margin: 100px;*/
/*    background: var(--gris_metallise);*/
        position: absolute;
        top: 20%;
/*        left: 50%;*/
/*    right: 0%;*/
/*        transform: translateX(-50%) translateY(-45%);*/
        border-radius: 2.7vh 2.7vh 2.7vh 2.7vh;/*25px 25px 25px 25px;*/
        text-align: left;
        color: var(--gris_metallise);
    }

    .message_envoye {
        width: 90%;
        position: absolute;
        top: 30%;
        text-align: center;
        color: var(--gris_metallise);
        font-size: 25px;
    }

    .retouraccueil {
        width: 90%;
    /*    padding: 8px;*/
        position: absolute;
        top: 90%;
/*    left: 35%;*/
        text-align: center;
/*        color: var(--bleu_marine);*/
        font-size: 2.1vh;/*20px;*/
    }

    input[type=text] {
        width: 100%;
    }

    Textarea {
        width: 100%;
    }
}



@media (min-width: 601px) {

    .content {
        max-width: 70%;/*960px;*/
        margin: auto;
    }

    header {
        background-color: var(--gris_metallise);
        padding: 15px;
        position: relative;
        height: 3.5%;
    }

    header .hleft {
        position: absolute;
        /*top: 0px;*/
        left: 15%;
        width: 40%;
        text-align: left;
        font-size: 24px;
        color: var(--noir);
        font-weight: bold;
    }

    header .hright {
        position: absolute;
        top: 23px; /* header padding[15] + (hleft font-size[24] - hright font-size[16]*/ 
        right: 15%;
        width: 40%;
        text-align: right;
        font-size: 16px;
        color: var(--noir);
    }

    a {
        text-decoration: none;
    }

    header .logoheader {
        width: 18px;
        height: 18px;
        border-radius: 3px 3px 3px 3px;
    /*    object-fit: cover;*/
    }

    .vision {
        width: 30%;
    /*    padding: 8px;*/
        position: absolute;
        top: 15%;
        /*left: 0%;*/
        text-align: left;
        color: var(--bleu_marine);
        font-size: 45px;
    }

    .mission {
        width:27%;
    /*    padding: 8px;*/
        position: absolute;
        top: 30%;
    /*left: 0%;*/
        text-align: left;
        color: var(--bleu_marine);
        font-size: 20px;
    }

    .slogan {
        width: 70%;
    /*    padding: 8px;*/
        position: absolute;
        top: 85%;
/*    left: 35%;*/
        text-align: center;
        color: var(--rouge);
        font-size: 30px;
    }

    .panneau {
        width: 28%;
    /*    border: 30px solid #080838;*/
        padding: 30px;
/*    margin: 100px;*/
        background: var(--bleu_marine);
        position: absolute;
        top: 45%;
    /*left: 75%;*/
        right: 0%;
        transform: translateX(-50%) translateY(-45%);
        border-radius: 25px 25px 25px 25px;
        text-align: left;
    }

    .merci_inscription {
        width: 70%;
        position: absolute;
        top: 20%;
        text-align: center;
        color: var(--bleu_marine);
        font-size: 35px;
    }

    .message_inscription {
        width: 70%;
        position: absolute;
        top: 30%;
        text-align: center;
        color: var(--bleu_marine);
        font-size: 25px;
    }

    .panneau_contact {
        width: 28%;
        border: 3px solid var(--gris_metallise);
        padding: 30px;
/*    margin: 100px;*/
/*    background: var(--gris_metallise);*/
        position: absolute;
        top: 45%;
        left: 50%;
/*    right: 0%;*/
        transform: translateX(-50%) translateY(-45%);
        border-radius: 25px 25px 25px 25px;
        text-align: left;
        color: var(--gris_metallise);
    }

    .message_envoye {
        width: 70%;
        position: absolute;
        top: 30%;
        text-align: center;
        color: var(--gris_metallise);
        font-size: 25px;
    }

    .retouraccueil {
        width: 70%;
    /*    padding: 8px;*/
        position: absolute;
        top: 80%;
/*    left: 35%;*/
        text-align: center;
/*        color: var(--bleu_marine);*/
        font-size: 20px;
    }

    input[type=text] {
        width: 100%;
    }

    Textarea {
        width: 100%;
    }

}

body {
    padding: 0px;
    margin: 0px;
    background: url("images/scottish_northcoast.JPG") no-repeat;
    color: #e5e4e2;
}