html {
    font-size: 100%;
    box-sizing: border-box;
    font-family: 'Raleway, sans-serif'
}

*,*::before, *::after {
    box-sizing: inherit;
}

body
{
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
    background-color: darkgray;
}

header, nav, main, footer, ul, li 
{
    font-family: 'Raleway', sans-serif;
}

h1, h2, p, a, button
{
    font-family: 'Raleway', sans-serif;
    text-align: center;
    color: black;
}

a
{
    text-decoration: none;
}

.flexbox-container
{
    display: flex;
    justify-content: space-evenly;
}

button {
    border-radius: 5px;
    border: none;
    color: white;
    text-align: center;
    cursor: pointer;
    width: 280px;
    height: 180px;
}

button:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button1 {
    background-color: #ff0000;
    font-size: 40px;
}

.button2 {
    background-color: #00fffa;
    font-size: 40px;
}

.button3 {
  background-color: #0cff00;
    font-size: 40px;
}

.button4 {
  background-color: #ffc300;
    font-size: 40px;
}

.button1:hover {
  background-color: #ea0000;
}

.button2:hover {
  background-color: #00ede8;
}

.button3:hover {
  background-color: #0ae200;
}

.button4:hover {
  background-color: #e0ab00;
}

h1{
    text-align: center;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
    .flexbox-container{
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    
}