* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

body {
    background-image: url(pizzaboard.png),url('checkers.jpg');
    background-color: black;
    background-size: contain, cover;
    background-position: center, top right;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 1s;
}

.button-container {
    position: fixed;
    top: 20px;
    left: 25%;
    height: 60px;
    width: 60px;
}

.button-sauce {
    position: absolute;
    top: 20px;
    left: 75%;
    width: 500px; 
    height: 500px;
}

.reveal-sauce {
    background-image: url('pizzasauceinbowl.png');
    background-size: cover;
    border: none; 
    width: 300px; 
    height: 300px;
    cursor: pointer; 
}

.sauce {
    position: absolute; 
    width: 500px; 
    height: 500px; 
    z-index: 1;
    display: none;
    left: -121%; 
    top: 80px;
}

.pizza {
    width: 650px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    display: none;
    animation: fadeIn 1s;
    z-index: 10; 
}

.pizza.reveal {
    display: block;
}

button {
    height: 700px;
    width: 700px;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0);
    border-color: rgba(255, 0, 0, 0);
}

.container {
    width: 100%; 
    display: flex;
    justify-content: flex-start; 
    align-items: center; 
}

.platebox2 {
    position: absolute; 
    width: 450px; 
    height: 450px; 
    background-image: url('plate.png');
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center; 
    display: flex;
    justify-content: center;
    align-items: center; 
    top: 40%;
    left: -12px;
    z-index: 2; 
}

.cheese {
    width: 540px;
    height: auto;
    transition: background .3s;
    animation: spin 5s linear infinite;
    animation-play-state: paused;
    position: absolute;
    z-index: 3; 
}

.platebox3 {
    position: absolute; 
    width: 350px; 
    height: 350px; 
    background-image: url('plate.png');
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center; 
    display: flex;
    justify-content: center;
    align-items: center; 
    top: 40%;
    left: 75%;
    z-index: 3;
}

.peppers {
    width: 400px;
    height: 400px;
    transition: background .3s;
    animation: spin 5s linear infinite;
    animation-play-state: paused;
    position: absolute;
    z-index: 4;
}

.platebox {
    position: absolute; 
    width: 250px; 
    height: 250px; 
    background-image: url('plate.png');
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center; 
    display: flex;
    justify-content: center;
    align-items: center; 
    top: 10px;
    z-index: 3; 
}

.pepperoni {
    width: 100px;
    height: 100px;
    transition: background .3s;
    animation: spin 5s linear infinite;
    animation-play-state: paused;
    position: absolute;
    z-index: 4;
}

.box.dark {
    background: darkolivegreen;
}

.box.spin {
    animation-play-state: running;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}