:root {
    --blue-500: #4C78FF;
    --orange-500: #F04925;
    --green-200: #60996A;
    --green-500: #3A8448;
    --cream-500: #FFEFE5;
    --gray-500: #434343;
    --gray-200: #B4B4B4;
    --white: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DynaPuff', cursive;
}

p {
    font-family: 'Open Sans', sans-serif;
}

body{
    background-color: var(--cream-500)!important;
}

.main {
    padding: 3.5rem 0 0 0;
    margin-bottom: -10rem;
}

.main img{
    max-width: 200px;
    margin-bottom: 3rem;
}

.main h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--orange-500);
}

.characters img{
    margin-bottom: -1rem;
}

.social a{
    color: var(--green-500);
}

.social a:hover{
    color: var(--green-200);
}

footer{
    background-color: var(--green-500);
    padding: 3rem 0 2rem 0;
}

footer p{
    color: var(--cream-500);
    font-size: 0.875rem;
    font-weight: 400;
    margin-bottom: 0;
}

@media (max-width: 768px){

    .main{
        padding: 5rem 0 0 0;
        margin-bottom: 5rem;
    }

    .main h1{
        font-size: 1.5rem;
        padding: 0 0.5rem;
    }

    .social p{
        font-size: 0.75rem;
    }

    .characters img{
        width: 100%;
    }

    footer p{
        font-size: 0.75rem;
    }
}