:root {
    --tranquilidad-bg-color: 249, 226, 215;
    --esperanza-bg-color: 216, 226, 159;
    --alegria-bg-color: 204, 204, 74;
    --main-bg-color: 245, 165, 111;
    --focus-bg-color: 155, 50, 113;
}
@font-face { 
    font-family: Comfortaa; 
    src: url('fonts/Comfortaa.ttf'); } 

* {
    margin: 0px;
    padding: 0px;
    font-family: Comfortaa, sans-serif;
}


p {
    margin: 16px 0;
}

a {
    text-decoration: none;
}


.suscribe {
    text-align: center;
    padding: 10px;
    background-color: rgb(var(--esperanza-bg-color));
}

.suscribe input{
    padding: 10px;
    text-align: center;
    margin-top: 10px;
}

@media (min-width: 810px) {
    body {
        padding: 0px 5vw;
    }
    
    .brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 10px 0px;
        border-bottom: 1px solid;
    }
    .brand span {
        text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.6);
        font-style: italic;
    }

    .logo {
        align-content: center;
        max-width: 250px;
    }

    .menu-wrapper span {
        display: none;
    }

    .menu{
        display: flex;
        gap: 15px;
        padding: 1px 0px;
        align-content: center;
        justify-content: center;
        background-color: rgba(50, 50, 50, 0.95);
    }

    .menu-item {
        list-style-type: none;
    }

    .menu-item a {
        color: white;
        display: block;
        padding: 10px;
        background-color: #777;
        text-align: center;
        width: 100px;
    }

    .menu-item a:hover{
        background-color: rgb(var(--alegria-bg-color));
    }

    .main {
        background-color: rgb(var(--main-bg-color));
        padding: 10px 10px;
    }

    #footer {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 10px;
        position: fixed;
        right: -65px;
        top: 400px;
        text-align: center;
        background-color: rgba(var(--focus-bg-color), 0.9);
        color: white;
    }

    #footer h3 {
        writing-mode: vertical-rl;
        text-orientation: upright;
        width: 20px;
    }

    #rss {
        display: flex;
        flex-direction: column;
        width: 50px;
    }

    #rss img{
        width: 50px;
        height: auto;
    }

    #top {
        display: none;
    }

}

@media (max-width: 430px) {
    body {
        padding: 0px;
    }

    #top {
        position: fixed;
        right: 20px;
        bottom: 40px;
        display: none;
        padding: 15px;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        color: white;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        background-color: rgba(var(--focus-bg-color), 0.8);
    }
        
    #header {
        display: flex;
        align-items: center;
        position: fixed;
        height: 120px;
        background-color: rgb(var(--tranquilidad-bg-color));
    }

    #header div{
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .logo {
        margin: 10px;
        max-width: 100px;
    }

    .menu-wrapper {
        position: relative;
        display: inline-block;
    }

    .menu-wrapper span {
        font-size: 50px;
        margin: 0px 10px;
        z-index: 9;
    }
    .menu-wrapper img {
        margin: 0px 10px;
    }

    .menu {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 5px;
        position: fixed;
        background-color: rgba(50, 50, 50, 0.95);
        height: 100%;
        width: 60vw;
        right: -100%;
        transition: all 0.7 ease;
        z-index: 1;
    }
    
    .menu-item {
        list-style-type: none;
    }

    .menu-item a {
        color: white;
        width: 100%;
        display: block;
        background-color: #777;
        padding: 10px;
        text-align: left;
    }

    .main {
        background-color: rgb(var(--main-bg-color));
        padding: 120px 5px 5px;
    }
    #rss {
        border-top: 1px solid #ccc;
        margin: 5px 0px;
        padding-top: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    #footer {
        padding: 10px 5px 0px;
        background-color: rgb(var(--tranquilidad-bg-color));
    }

}