@media (min-width: 800px){
.sS {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
    .bal { grid-area: 1 / 1 / 2 / 2; }
    .mds { grid-area: 2 / 2 / 3 / 3; }
    .prote { grid-area: 3 / 3 / 4 / 4; }
main div{
    background-color: rgba(255, 255, 255, 0.671);
}
main{
    background-image: url("../Imagenes/Survival.png");
    background-repeat: no-repeat;
    background-size: cover;
}
header img{
    width: 8%;
}
footer{
    background-size: cover;
    text-align: center;
}
.logof{
    width: 20%;
}
}
@media (min-width: 500px) and (max-width: 800px){
    .sS {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        }
        
        .bal { grid-area: 1 / 1 / 2 / 2; }
        .mds { grid-area: 2 / 2 / 3 / 3; }
        .prote { grid-area: 3 / 1 / 4 / 2; }
    main div{
        background-color: rgba(255, 255, 255, 0.671);
    }
    main{
        background-image: url("../Imagenes/Survival.png");
        background-repeat: no-repeat;
        background-size: cover;
    }
    header img{
        width: 8%;
    }
    footer{
        background-size: cover;
        text-align: center;
    }
    .logof{
        width: 20%;
    }
}
@media (max-width:500px){
    main div{
        background-color: rgba(255, 255, 255, 0.671);
    }
    main{
        background-image: url("../Imagenes/Survival.png");
        background-repeat: no-repeat;
        background-size: cover;
    }
    header img{
        width: 8%;
    }
    footer{
        background-size: cover;
        text-align: center;
    }
    .logof{
        width: 20%;
    }
}