@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Rubik+Moonrocks&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    
    body {
     font-family: Rubik Moonrocks;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100%;
     background-color: #2522eb;
     margin-top: 10%;
    }

    p {
        font-family: Arial, Helvetica, sans-serif;
        padding-bottom: 50px;
        font-weight: 900;
        text-align: center;
    }
    
    .colour {
     color: #FFF;
     font-size: 72px;
     font-weight: 200;
     margin-bottom: 2rem;
     text-transform: uppercase;
    }
    
    .generate {
     appearance: none;
     background: none;
     outline: none;
     border: 5px solid #FFF;
     border-radius: 10px;
     padding: 1rem 2rem;
     font-size: 2rem;
     color: #FFF;
     font-weight: 700;
     background-image: linear-gradient(to bottom, transparent 50%, red 50%);
     background-size: 100% 200%;
     transition: 0.5s ease-out;
     cursor: pointer;
     height: 20%;
     width: 50%;
    }
    
    .generate:hover {
     background-position: 0 100%;
     box-shadow: inset 4px 4px rgba(0,0,0,0.2);
     text-shadow: 4px 4px rgba(0,0,0,0.2);
    }

    /* Responsive media queries
==================================================*/

@media (min-width: 500px) {
    p {
        font-size: 2.5em;
        height: 20%;
    }
}