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

}

html {
    height: 100%;
}

body {
    min-height: 100%;
    font-family: "Montserrat", sans-serif;
    

}

.grid-container {
    box-shadow: -1px 1px 7px 0px rgb(0, 0, 0, 0.75);
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

.grid-container {
    display: grid;
    gap: 0px;
    grid-template-areas:
        "header"
        "navbar"
        "carrusel"
        "main"
        "sidebar"
        "footer"
        "colibri"
        "parachico"
        "footer22";
}

.header {
    grid-area: header;
    background-color: #5B208A;

}

.header img {
    width: 50px;
}


/*------navar menu-------*/
.navbar {
    grid-area: navbar;
    background-color: #5B208A;
   
}

/*---navbar final-----*/
.carrusel {
    grid-area: carrusel;
    background-color: #F80161;
    color: #ffffff;
}
/*---------------Main-Img--Txt------------------ */
.main {
    grid-area: main;
    background-color: #F80161;
    color: #ffffff;
   
}

.sidebar {
    grid-area: sidebar;
    background-color: #F80161;
    color: #ffffff;
}

.footer {
    grid-area: footer;
    background-color: #F80161;
    color: #ffffff;
}
.parachico{
    grid-area: parachico;
    background-color: #F80161;
    color: #ffffff;
}

.colibri{
    grid-area: colibri;
    background-color: #F80161;
    color: #ffffff;
}
.footer22{
    grid-area: footer22;
    background-color: dimgray;
    color: white;
}


@media (min-width: 301px) {
  
    .carrusel img{
        width: 40%;
    }
    .sidebar img {
        width: 50%;
    }
    .header img{
        width: 90px;
    }
    .main img{
        width: 50%;
    }
    .footer img{
        width: 50%;
    }
    .colibri img{
        width: 50%;
    }
    .parachico img{
        width: 50%;
    }
    .proyecto-1 button{
        
        background-color: #5B208A;
        color: white;
        border-radius: 3px;
        border: none;
        font-weight: 400;
        width: 35%;
        height: 30px;
    }
    .proyecto-2 button{
        
        background-color: #5B208A;
        color: white;
        border-radius: 3px;
        border: none;
        font-weight: 400;
        width: 35%;
        height: 30px;
    }
    .proyecto-3 button{
        
        background-color: #5B208A;
        color: white;
        border-radius: 3px;
        border: none;
        font-weight: 400;
        width: 35%;
        height: 30px;
    }
    .proyecto-4 button{
        
        background-color: #5B208A;
        color: white;
        border-radius: 3px;
        border: none;
        font-weight: 400;
        width: 35%;
        height: 30px;
    }
    .proyecto-5 button{
        
        background-color: #5B208A;
        color: white;
        border-radius: 3px;
        border: none;
        font-weight: 400;
        width: 35%;
        height: 30px;
    }
    .grid-container {
        grid-template:
            "header header" 50px
            "navbar navbar" auto
            "carrusel carrusel" auto
            "sidebar sidebar" auto
            "main main" auto
            "footer footer" auto
            "colibri colibri" auto
            "parachico parachico"auto
            "footer22 footer22" auto/
            200px auto;

    }

}

@media (min-width: 500px) {
    .header img {
        width: 70px;
    }
    .grid-container {
        grid-template:
            "header header" 50px
            "navbar navbar" 80px
            "carrusel carrusel" auto
            "sidebar sidebar" auto
            "main main" auto
            "footer footer" auto
             "colibri colibri" auto
            "parachico parachico" auto
            "footer22 footer22" auto/
            200px auto;
    }

}

/*----------Lap mia------------ */
@media (min-width: 900px){
    .header img {
        width: 100px;
    }
    
    .carrusel p{
        font-size: 30px;
        font-weight: 800;
    }
    .carrusel img{
        width: 20%;
    }
    .sidebar p{
        font-size: 25px;
        font-weight: 700;
        padding-top: 180px;
    }
    .sidebar img{
        width: 25%;
        float: left;
        margin-left: 300px;
    }
    .proyecto-1{
        padding-right: 300px;
    }
    .main p{
        font-size: 25px;
        font-weight: 700;
        padding-top: 150px;
    }
    .main img{
        width: 23%;
        float: right;
        margin-right: 300px;
    }
    .proyecto-2{
        padding-left: 300px;
    }
    .footer p{
        font-size: 25px;
        font-weight: 700;
        padding-top: 160px;
    }
    .footer img{
        width: 25%;
        float: left;
        margin-left: 300px;
    }
    .proyecto-3{
        padding-right: 300px;
    }
    .colibri p{
        font-size: 25px;
        font-weight: 700;
        padding-top: 150px;
    }
    .colibri img{
        width: 25%;
        float:right;
        margin-right: 300px;
    }
    .proyecto-4{
        padding-left: 300px;
    }
    .parachico p{
        font-size: 25px;
        font-weight: 700;
        padding-top: 150px;
    }
    .parachico img{
        width: 25%;
        float: left;
        margin-left: 300px;
        filter: drop-shadow(1px 1px 10px rgb(0, 0, 0))
    }
    .proyecto-5{
        padding-right: 300px;
    }
    .proyecto-1 button{
        background-color: #5B208A;
        color: white;
        border-radius: 3px;
        width: 20%;
        height: 30px;
        border: none;
        font-weight: 600;
    }
    .proyecto-2 button{
        
        background-color: #5B208A;
        color: white;
        border-radius: 3px;
        width: 20%;
        height: 30px;
        border: none;
        font-weight: 600;
    }
    .proyecto-3 button{
        
        background-color: #5B208A;
        color: white;
        border-radius: 3px;
        width: 20%;
        height: 30px;
        border: none;
        font-weight: 600;
    }
    .proyecto-4 button{
        
        background-color: #5B208A;
        color: white;
        border-radius: 3px;
        width: 20%;
        height: 30px;
        border: none;
        font-weight: 600;
    }
    .proyecto-5 button{
        
        background-color: #5B208A;
        color: white;
        border-radius: 3px;
        width: 20%;
        height: 30px;
        border: none;
        font-weight: 600;
    }

    .grid-container {
        grid-template:
            "header header header" 70px
            "navbar navbar navbar" 80px
            "carrusel carrusel carrusel" auto
            "sidebar sidebar sidebar" auto
            "main main main" auto
            "footer footer footer" auto
             "colibri colibri colibri"auto
            "parachico parachico parachico"auto
            "footer22 footer22 footer22"/
            200px auto;

    }

}
@media screen and (max-width: 768px) {
    
  }