@font-face {
    font-family : "mmbnthin";
    src : url('../fonts/mmbnthin.ttf')
}

@font-face {
    font-family :"retrofunk";
    src : url('../fonts/Retrofunkscriptpersonaluse-v6XO.otf')
}

body {
    background-image: url(../images/sunset.jpeg);
    background-blend-mode:color-dodge;
    background-size:2000px;
    width: 1200px;
    height:1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    
}

p {
    text-decoration: none;
    color:white;
    font-family:'mmbnthin';
    align-self:center;
}

li {
    text-decoration: none;
    color:white;
    font-family:'mmbnthin';
    text-align: left;
    list-style-image: url(../images/u19-icon-circle.png);
}

h1 {
    text-decoration:dotted;
    color:white;
    font-family:'retrofunk';
    font-size:50px;
}

.tout {
    border-color:white;
    border-style:groove;
    border-width:5px;
    border-spacing: 5px;
    background-color: black;
    background-size:100px;
    background-image:url(../images/e06-bg-twinkle.gif);
    background-repeat:repeat;
    align-self:left;
    width:1200px;
    height:1000px;
    margin:auto;
    display: grid;
    grid-template-rows:1fr 2fr 1fr;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;
    padding:8px;
    grid-template-areas:
    "header header header"
    "gauche big droit"
    "gauche updates droit"
    ;
}

.header {
    background-image:url('https://foollovers.com/mat/twinkle/c04-bg-twinkle.gif');
    background-color:darkmagenta;
    height:100px;
    border: 3px double white;
    border-color: white;
    text-align:center;
    align-self: center;
    grid-area: header;
}
.gauche {
    background-image:url('https://foollovers.com/mat/star/k01-bg-star.gif');
    background-color:deeppink;
    border-width:2px;
    border-style: solid;
    border-color: white;
    text-align:center;
    align-self: center;
    grid-area: gauche;
}

.big {
    background-color:blueviolet;
    border-width:2px;
    border-style: solid;
    border-color: white;
    text-align:center;
    text-anchor: middle; 
    align-self: center;
    grid-area: big;
}

.droit {
    background-image:url('https://foollovers.com/mat/star/k01-bg-star.gif');
    background-blend-mode:hard-light;
    background-color:salmon;
    border-width:2px;
    border-style: solid;
    border-color: white;
    text-align:center;
    align-self: center;
    grid-area: droit;
}

.updates {
    background-image:url('https://foollovers.com/mat/star/k01-bg-star.gif');
    background-color:rebeccapurple;
    border-width:2px;
    border-style: solid;
    border-color: white;
    text-align:left; 
    padding:4px;
    align-self: center;
    grid-area: updates;
}