@import url('https://fonts.googleapis.com/css2?family=Arima:wght@100..700&display=swap');

:root{
    --rojo: #ff1d1d;
    --verde: #5ee913;
    --azul:#1da7ff;
    --amarillo :#FFC300;
    --morado:#af3cf1;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: "Arima", system-ui;
    background: linear-gradient(90deg, #f08080, #3f95ca);
    max-height: 80vh;
}

/* tablet */
.grid-container{
    display: grid;
    grid-template-areas:  
                'header'
                'sidebar'
                'main'
                'footer';

    grid-template-rows: 100px 50px minmax(500px,1fr) 100px;

    /* Selectores Anidados (Clases)*/
    .header {
        grid-area: header;
    }

    .navbar {
        grid-area: navbar;
        background-color: #c39bd3;
    }

    .sidebar {
        grid-area: sidebar;
        background:linear-gradient(180deg,#2bbfe4,#eaecc6);
        border-radius: 10px;
    }

    .footer {
        grid-area: footer;
        background-color: #283747;
    }

    @media (min-width:768px) {
        .sidebar{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px 50px 20px 0px;
        }

        .sidebar button{
            width: 100px;
            height: 50px;
            color: white;
            font-size: 20px;
            font-weight: bold;
        }

        .footer{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
        }
        grid-template-areas:  
                'header header'
                'main sidebar'
                'footer footer';

    grid-template-rows: 100px minmax(500px,1fr) 100px;
    grid-template-columns: auto 200px;
    }
}