* {
    margin: 0;
    padding: 0;
}

body {
    box-sizing: border-box;
}

.container {
    width: 90%;
    margin: 0 auto;
    font-family: monospace;
}

h1 {
    display: inline-block;
    margin: 80px auto;
    padding: 5px;
    width: 150px;
    border: solid 2px;
    border-radius: 10px;
    text-align: center;
    letter-spacing: 5px;
    animation-name: tumble;
    animation-timing-function: linear;
    animation-duration: 10s;
    /* animation-direction: alternate; */
    animation-iteration-count: infinite;
    cursor: pointer;
}

article {
    display: none;
    color: white;
    text-shadow: 4px 4px 8px rgb(15, 101, 129);
}

/* keyframes animation */
@keyframes tumble {
    0% { 
        background-color: white; 
        color: black; 
    }
    20% { 
        background-color: greenyellow; 
        color: black; 
        transform: rotate(72deg); 
    } 
    40% { 
        background-color: indigo; 
        color: white; 
        left: 80%; 
        transform: rotate(144deg); 
    }
    60% { 
        background-color: lightslategray; 
        color: black; 
        left: 100%; 
        transform: rotate(216deg); 
    }
    80% { 
        background-color: mediumorchid; 
        transform: rotate(288deg); 
    }
    100% { 
        background-color: white; 
        transform: rotate(360deg); 
    }
}