* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    text-align: center;
    padding: 4em;
}

body {
    background-image: url("../img/bg.svg");
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
}
#friteuse {
    position: relative;
    width: calc(30vmin + 12px);
    height: calc(30vmin + 12px);
    max-width: 429px; 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    margin: auto;
    top: 4rem;

}

#friteuse::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10.67rem;
    width: 100%;
    height: 100%;
    background-image: url("../img/friteuse.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    scale: 2.7;

}

#friteuse .case {
    border: solid rgb(172, 170, 170) 1px;
    display: grid;
    place-items: center;
    height: 10vmin;
    width: 10vmin;
    margin: 1px;
    z-index: 1;
}

#friteuse .case:hover {
    background: rgb(255, 198, 198);
}

nav {
    margin-top: 1em;
    
}

#message {
    text-align: center;
    margin: 1em;

}

#replay {    
    align-content: center;
    display: block;
    margin: 0 auto;

}