@import url('https://fonts.googleapis.com/css?family=Raleway|Montserrat&display=swap');

@font-face{
    src: url('../fonts/Allison_Script.otf');
    font-family: "Alison";
}

body{
    font-family: 'Montserrat','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: whitesmoke;
}

main{
    width: 80%;
    margin: 2em auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.781);
}

.center{
    text-align: center;
}

/* ----------- En tete de la lettre ------------------- */

header{
    display: grid;
    grid-template-areas: 
    "bg-blue bg-blue"
    "address date"
    "receiver receiver";
}

.bg-blue{
    background-color: rgba(5, 23, 63, 0.959);
    height: 50px;
    grid-area: bg-blue;
}

time{
    grid-area: date;
    text-align: end;
    box-sizing: border-box;
    padding: 10px;
}

address{
    grid-area: address;
    font-style: normal;
}

address > ul{
    list-style: none;
}

address > ul li:first-child{
    text-transform: uppercase;
    font-family: 'Raleway','Courier New', Courier, monospace,sans-serif;
    line-height: 2px;
    font-size: 0.5em;
}

address a{
    text-decoration: none;
    color: #03183f;
}


header > ul{
    grid-area: receiver;
    list-style: none;
    width: 92%;
    text-align: center;
}

/* ---------- main content -------------- */

section{
    padding: 1em 1.6em;
}

section span{
    text-decoration: underline;
}

section > footer{
    text-align: right;
}

#signature{
    font-family: 'Alison',serif;
    font-size: 1.8em;
    padding-right: 2em;
}

@media all and (max-width:600px){

    main{
        width: 98vw;
    }

    header{
        display: flex;
        flex-direction: column;
    }

    header > ul{
        width: 80%;
    }

}