@import url('https://fonts.googleapis.com/css?family=Varela+Round');

:root {
    --color1: rgb(132, 197, 184);
    --color2: #393D3F;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Varela Round', sans-serif;
}


/*////////////////////////////////////////////          NAVIGATION/TOP SECTION*/
header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    background: var(--color2);
    color: white;
}

header h1 {
    font-size: 3rem;
}

.navbar {
    right: 8px;
}

/*////////////////////////////////////////////////      Main*/
main {
    position: relative;
    max-width: 800px;
    margin: auto;
    margin-top: 20px;
    color: var(--color2);
}

main #top {
    display: flex;
}

#top img {
    border-radius: 50%;
    border: 2px var(--color2) solid;
    transition: 1s all;
}

main img:hover {
    transform: rotate(360deg);
}

main h3 {
    margin-top: 20px;
    margin-left: 15px;
    font-weight: bold;
    font-size: 1.85rem;
}

p {
    line-height: 1.4em;
    margin-top: 10px;
    font-size: 18px;
}

main h4 {
    font-size: 28px;
}

#tips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1.5em;
}

#tips > div {
    margin-top: 10px;
}

main #play-btn {
    background: var(--color1);
    transform: scale(1.3);
    margin-left: 13px;
    position: absolute;
    transition: .45s all;
}

main #play-btn:hover {
    background: transparent;
    color: var(--color1);
}

footer {
    position: fixed;
    bottom: 0;
    left: 4px;
}