@charset "utf-8";

@import url(https://db.onlinewebfonts.com/c/38a367caf669011075e5d4107ee090a3?family=TitlingGothicFBExtended-Medium
);


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

body {
    font-family: "TitlingGothicFBExtended-Medium";
    text-align: center;
    font-size: 1em;


    background-image: url('fondodemantel.svg');
    /* Ruta de imagen de fondo */
    background-size: cover;
    /* Cubre completamente el fondo */
    background-repeat: repeat;

}

#retos {
    display: grid;
    grid-template-areas:
        "A B C"
        "D E F"
        "G H I"
        "J K L"
        "M N O"
        "P Q R";
    gap: 8px;

}


@media screen and (min-width: 700px) {
    /* Reglas para tablets si es necesario */
    #retos{
        display: grid;
        grid-template-areas: 
        "A B C D E F"
        "G H I J K L"
        "M N O P Q R";
    }
}

@media screen and (min-width: 1280px){
    #retos{
        grid-template-areas: 
        "A B C D E"
        "F G H I J"
        "K L M N O"
        "P Q R S T";
    }
}


header{
    display: flex;
    justify-content: space-between;
    margin: 0;
    margin-top: 1em;
}

main{
    margin: 3%;
}

#hachedos {
    background: rgb(248,211,19);
    background: linear-gradient(90deg, rgba(248,211,19,1) 0%, rgba(253,127,9,1) 50%, rgba(251,37,0,1) 100%);
    border-radius: 8em 0  0  8em ;
    padding: 1em;
    display: flex;
    justify-content: flex-end;
    border: 6px solid white;;
    margin-bottom: 1em;
    margin-top: 0.5em;
}

#volver {
    margin: 10px;
    width: 5em;
}

.icono1 {
    grid-area: A;
    width: 100%;
}

.icono2 {
    grid-area: B;
    width: 100%;
}

.icono3 {
    grid-area: C;
    width: 100%;
}


.icono4 {
    grid-area: D;
    width: 100%;
}


.icono5 {
    grid-area: E;
    width: 100%;
}


.icono6 {
    grid-area: F;
    width: 100%;
}


.icono7 {
    grid-area: G;
    width: 100%;
}


.icono8 {
    grid-area: H;
    width: 100%;
}


.icono9 {
    grid-area: I;
    width: 100%;
}


.icono10 {
    grid-area: J;
    width: 100%;    
}

.icono11 {
    grid-area: K;
    width: 100%;    
}

.icono12 {
    grid-area: L;
    width: 100%;    
}

.icono13 {
    grid-area: M;
    width: 100%;    
}

.icono14 {
    grid-area: N;
    width: 100%;    
}

.icono15 {
    grid-area: O;
    width: 100%;    
}

.icono16 {
    grid-area: P;
    width: 100%;    
}

.icono17 {
    grid-area: Q;
    width: 100%;    
}

.icono18 {
    grid-area: R;
    width: 100%;    
}