@import url('https://fonts.googleapis.com/css2?family=Gugi&family=Lato&family=Major+Mono+Display&family=Montserrat&family=Pacifico&family=Piedra&family=Roboto&display=swap');

:root {
    font-family: 'Roboto', sans-serif;
    
    --bg-white: white;
    --theme-primary: #FBBF24;
    --theme-secondary: #FEF3C7;
    --text-primary: #000000;
    --text-secondary: #ffffff;
    --text-blue: #3B82F6;
    
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #FEF3C7;
}

h1 {
    margin: 0;
}

/* navbar */
nav {
    background-color: var(--theme-primary);
    color: var(--text-blue);
    padding: 0 1rem 0.2rem 1rem;
}

.heading-nav {
    font-family: 'Pacifico', cursive;
    font-size: 2rem;
    text-align: center;
    padding-top: 1rem;
    margin-bottom: 0;
}

nav p {
    font-size: 1.3rem;
}

/* list */
ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    text-align: center;
}

ul li {
    display: inline-block;
    margin: 0 0.5rem 1rem 0.5rem;
}

/* link */
a {
    text-decoration: none;
    color: var(--text-blue);
}

/* button */
button {
    display: block;
    margin: auto;
    border: 3px solid var(--text-blue);
    background-color: var(--theme-primary);
    color: var(--text-blue);
    font-size: 1.5rem;
    font-weight: 900;
    padding: 0.5rem 1rem;
    border-radius: 0.4rem;
}

/* text area */
.text-area {
    display: block;
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--theme-secondary);
    border: 2px solid var(--text-primary);
    width: 80%;
    height: 15vh;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    font-size: 1rem;
}

/* footer */
footer {
    background-color: var(--theme-primary);
    padding-top: 1rem;
    margin-top: 1rem;
    width: 100%;
    color: var(--text-blue);
}

.heading-footer {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    text-align: center;
}

/* section */
section {
    background-color: var(--theme-secondary);
    padding: 1rem;
}

/* desktop */ 
@media only screen and (min-width: 768px) {
    nav {
        padding: 0 20rem 0.5rem 20rem;
    }
    
    footer {
        position: absolute;
        bottom: 0;
    }
    
    .text-area {
        width: 50%;
    }
}