*{
   box-sizing: border-box;  
   margin: 0%;
   padding: 0%;  
}
.contenedor01{
    font-size: 1rem;
    width: 100%;
    display: grid;
    grid-template-areas:"nav nav"
                        "header header"
                        "main main"
                        "aside aside"
                        "section section"
                        "temas temas"
                        "article article"
                        "contenedor2 contenedor2"
                        "footer footer";
}
/*Barra de navegación*/
nav{
    grid-area: nav;
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: flex-end;
}
#btn-menu{
    display: none;
}
label{
    display: none;
}
 .cont{
    width: 60%;
    display: flex;
    
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
    font-size: 1em;
    color: #060A24;
    letter-spacing: 0;
    line-height: 1.6em;
    font-family: 'IBM Plex Mono', monospace;
}
.cont ul li{
    
    list-style: none;
}
.cont ul{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.cont li a{
    text-decoration: none;
    color: #060A24;
    
}
.cont li a:hover{
    font-size: 1rem;
    letter-spacing: 0;
    text-decoration: line-through;
    line-height: 1em; 
    color: #00F3BB; 
}
.cont li a:active{
    text-decoration: line-through;
    color: #060A24;
}
#icncont{
    width: 40%;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
 .icono{
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 5%;
}

/* ***Hello Word*** */
header{
    box-sizing: border-box;
    width: 100%;
    grid-area: header;
    height: 26.25rem;
    width: 100%;
    align-content: center;   
    margin-top: 0; /* para que me quede separado el header del nav*/
    padding-left: 15%;
}
.hello{
    display: inline-block;
    font-size: 2.6em;
    color: #060A24;
    letter-spacing: 0
}
.header{
    
    line-height: 5em;
}
#punto{
    font-family: IBMPlexSans;
    font-size: 4em;
    color: #0000EC;
    letter-spacing: 0;
}
#world{
    text-decoration: line-through;
    line-height: 5em;
}
div p {
    font-size: 1em;
    color: #060A24;
    letter-spacing: 0;
    line-height: 1.5em;
    display: block;
    width: 50vw;
    height: 10vh;
    position: relative;
    top: -1.25rem;
    font-family: 'IBM Plex Mono', monospace;
}
#CONOCEMAS{
    background-color: #00f3bb;
    position: relative;
    width: 14.125em;
    height: 3.5em;
    font-family: 'IBM Plex Mono', medium;
    color: #060A24;
    font-size: 1em;
    letter-spacing: 0px;
    text-align: center;
    line-height: 1.5em;
    border: transparent ;   
}
#CONOCEMAS:hover{
    background-image: linear-gradient(225deg, #0000FE 0%, #00F0B8 100%);
}

/* *** Enlaces*** */
main{
    display: flex;
    flex-wrap: wrap;
    grid-area: main;
    width: 100%;
    height: 71.875rem;
    background-image: linear-gradient(225deg, #0000FF 0%, #0000A3 100%);
    clip-path:polygon(0 15%, 100% 0, 100% 85%, 0% 100%);
}

.imagenes{
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-evenly;
    padding: 0;
    margin: 0px;
    position: relative;
    top: -12.5rem;
}
iframe{
    background-color: transparent;
    border: transparent ;   
}
main #ep{
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-size: 3rem;
    color: #FFFFFF;
    letter-spacing: 0;
    margin-top: 15%;
    width: 13.0625rem;
    height: 3.875rem;
    padding-left: 15%;
}

/* ***De dónde venimos *** */
aside{
    grid-area: aside;
    position: relative; z-index:1 ;/* desplazamiento en el eje y de la seccion aside*/
    top: -12.5rem;
}
.contenedor03 {
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    margin: 0px;
    
}
.row{
    padding-left:8% ;
    width: 28.6rem;
    height: 41.25rem;
}
.column{
    justify-content: center;
    align-self: center;
    padding-left: 10%;
    width: 29rem;
    height:16.625rem ;
}
.parrafo{
    width: 29rem;
    height: 12.75rem;
    position: relative;
    left: 0.9375rem;
    top: 1.25rem;
}
#titulo{
    width: 24.9375rem;
    height: 3.875rem;
    font-size: 3rem;
    color: #060A24;
    letter-spacing: 0;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
}

/* *** Imágenes*** */
section{
    grid-area: section;
    width: 100%;
    position: relative; z-index:1 ;/* desplazamiento en el eje y de la seccion section*/
    top: -6.25rem;
}
.invitados{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 0;
    margin: 0px;
}
#estelares{
    font-size: 3rem;
    color: #060A24;
    letter-spacing: 0;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    height: 3.875rem;
    padding-left: 15%;
    
}
/* ***Algunos de nuestros temas *** */
article{
    grid-area: article;
    width: 90%;
    display:flex;
    flex-wrap: wrap;
    height:12.5rem;
    justify-content: space-around;
    position: relative; z-index:1 ;/* desplazamiento en el eje y de la seccion section*/
    top: -6.25rem;
    margin: 0px;
    padding: 0px;
    
}
.tem{
    width: 100%;
    height: 12.5rem;
    padding-top: 6.25rem;
    position: relative; z-index:1 ;/* desplazamiento en el eje y de la seccion section*/
    top: -6.25rem;
}
#temas{
    grid-area: temas;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-size: 3rem;
    color: #060A24;
    letter-spacing: 0;
    width: 36.625rem;
    height: 3.875rem;
    position: relative;
    margin: 0px;
    left: 200px;
    display:inline; 
}
article{
    display: flex;
    justify-content: center;
    align-items: center;
}
.descr {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-size: 1.4em;
    color: #060A24;
    letter-spacing: 0;
    position: relative;
    left: 50px;
    margin: auto; 
    font-weight:bold;
    display: block;  
}
.imagen{
    display: flex;
    margin-left: auto; 
    margin-right: auto;   
}
.caja1{
   width:15rem ;
   height:8.125rem ;
   display: inline-block;
   justify-content: center;
}
/* ***Escuchá los episodios *** */
 #contenedor2{
     grid-area: contenedor2;
     width: 100%;
    height:32.375rem ;
    display: flex;
    align-items: center;
    clip-path: polygon(0 30%, 100% 0%, 100% 100%, 0% 100%);
    background-image: linear-gradient(225deg, #0000FF 0%, #0000A3 100%);
    position: relative; z-index:1 ;/* desplazamiento en el eje y de la seccion section*/
    top: -6.25rem;
}

.novedades{
    color: white;
    width: 100%;
    height:6.25rem ;
    letter-spacing: 0;
    display: inline-block;
    /*padding-left: 30vw;*/
    align-content: center;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    align-items: center; 
}
#cont2{
    display: inline;
    width: 100%;
    height: 3.875rem;
    align-items: center;
    font-size: 2rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-family: 'IBM Plex Sans Condensed';  
}
#ESCUCHÁLOSEPISODIOS{
    background-color: #00f3bb;
    display: flex;
    justify-content: center;
    width: 21.5625rem;
    height: 3.5rem;
    font-family: 'IBM Plex Mono', medium;
    color: #060A24;
    font-size: 1.125rem;
    letter-spacing: 0px;
    text-align: center;
    line-height: 1.5rem;   
    margin-top: 3.125rem;
    margin-right: auto;
    margin-left: auto; 
    border: transparent ;   
}
#ESCUCHÁLOSEPISODIOS:hover{
    background-image: linear-gradient(225deg, #0000FE 0%, #00F0B8 100%);
}
footer{
    grid-area: footer;
    
    display: flex;
   justify-content: flex-end;
   align-items: center;
   justify-content: center;
   width: 100%;
   height:5rem ;
   position: relative; z-index:1 ;/* desplazamiento en el eje y de la seccion section*/
   top: -6.25rem;
   border-bottom: 1px solid black;
}
 div footer{
    font-size: 1rem;
    color: #060A24;
    letter-spacing: 0;
    line-height: 1.75rem;
    /*display: flex;
    justify-content: flex-start;*/
    position: relative;
    right: 500px;  
}
footer div{
    position: relative;
    right: 300px;  
}
footer #redes{
    position: relative;
    right: -300px;  
}
.fab{
   width: 1.125rem;
   height: 1.75rem; 
   padding-right: 5vw;
}
#redes a{
    text-decoration: none;
    color: black;
}


@media screen and (max-width: 20rem){

    *{
        margin: 0px;
        padding: 0px;
        box-sizing: content-box;
    }
    body{
        font-size: 0.875rem;
    }
    /***** Menú hamburguesa/ barra de navegación************/
    nav{
        width: 100%;
        height: 3.75rem;
        
    }
    #chek{
        display: flex;
        justify-content: flex-start;
        width: 30%;
    }
    #icncont{
        display: flex;
        justify-content: flex-start;
        margin-right: auto;
        width: 20%;
        align-items: flex-start;
    }
    .icono{
        width: 1.25rem;
        height: 1.25rem;
        position: relative;
        top: 15px;
        left: 10px;
    }
    #dib{
        width: 2.125rem;
        height: 2.125rem;
        margin: 0;
        padding: 0;
        display: flex;
        position: relative;
        top: 5px;
    }
    #la-btn{
        position: relative;
        top: 0px;
        right: 1.25rem;
        padding: 0;
        margin: 0;
    }
     nav label{
        display: block;
        width: 1.875rem;
        height: 1.875rem;
        padding: 0.625rem;
    }
    .cont{
         display: block;
         width: 20rem;
         height: 13.375rem;
         background: #0000EC;
         margin-right: -20rem;
         padding: 0%;
         position: absolute; z-index:1 ;/*desplazamiento en el eje y de la seccion section*/
         top: 3.75rem;
         
    }
     .cont ul{
        flex-direction: column;
        list-style: none;
       
    }
    .cont li a {
        display: block;
        padding: 0.9375rem 1.25rem ;
        color: white;  
    }
    #btn-menu{
        display:none; 
    }
    #btn-menu img:hover{
        cursor: pointer;
    }
    #btn-menu:checked ~ .cont {
        margin:0px;
        display: block;
    }
    /*******Hello World ********/

    header{
        width: 100%;
        grid-area: header;
        height: 25rem;
        width: 100%; 
        display: block; 
        margin-top: -4.375rem;
        padding: 0.25rem;
        
    }
    .hello{
        display: inline-block;
        font-size: 2.4em;
        color: #060A24;
        letter-spacing:0;
        margin-left: 2%;
        height: 2.625rem;
    }
    .header{
        
        line-height: 5em;
    }
    #punto{
        font-family: IBMPlexSans;
        font-size: 4em;
        letter-spacing: 0; 
        color: black;
        position: relative;
        top: -30px;
    }
    #world{
        text-decoration: line-through;
        line-height: 5em;
        height:2.625rem ;
        width: 6.3125rem;
    }
    #inform{
        width: 100%;
        height: 4.375rem;
        margin: 0.1875rem;
        padding-right: 0.1875rem;
    }
    #pale{
        position: relative;
        top: -30px;
    }
    div p {
        margin-left: 2%;
        font-size: 0.875rem;
        color: #060A24;
        letter-spacing: 0;
        line-height: 1.375rem;
        display: inline-block;
        width: 18.75rem;
        height: 4.125rem;
        justify-content: center;
        font-family: 'IBM Plex Mono', monospace;
    }
    #CONOCEMAS{
        background-color: #00f3bb;
        display: flex;
        margin-left: 2%;
        width: 18rem;
        height: 3rem;
        font-family: 'IBM Plex Mono', medium;
        color: #060A24;
        font-size: 1em;
        letter-spacing: 0px;
        text-align: center;
        line-height: 1.5em;
        top: 30px;
    }
    #CONOCEMAS:hover{
        background-image: linear-gradient(225deg, #0000FE 0%, #00F0B8 100%);
    }
    
    /* *** Enláces *** */
    main{
        box-sizing: content-box;
        grid-area: main;
        width: 100%;
        height: 800px;
        background-image: linear-gradient(225deg, #0000FF 0%, #0000A3 100%);
        clip-path:polygon(0 15%, 100% 0, 100% 85%, 0% 100%);
    }
     iframe{
        width: 100%;
        height: 14.6875rem;
        margin-left: 3%;
        position: relative;
        top: 8.75rem;
     }
    main #ep{
        font-family: 'IBM Plex Sans Condensed', sans-serif;
        font-size: 3rem;
        color: #FFFFFF;
        letter-spacing: 0;
        margin-top: 15%;
        width: 13.0625rem;
        height: 3.875rem;
        padding-left: 1.5625rem;
    }
    main{
        box-sizing: content-box;
        grid-area: main;
        width: 22.5rem;
        height: 76rem;
        background-image: linear-gradient(225deg, #0000FF 0%, #0000A3 100%);
        clip-path:polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
    }
    main #ep{
        font-family: 'IBM Plex Sans Condensed', sans-serif;
        font-size: 2.25rem;
        color: #FFFFFF;
        letter-spacing: 0;
        margin-top: 15%;
        width: 9.8125rem;
        height: 3.125rem;
       
    }
    .imagenes{
        display: block;
        
    }
    /* *** Imágen con texto*** */

    aside{
        grid-area: aside;
        width: 100%; 
        position: relative; z-index:1 ;/* desplazamiento en el eje y de la seccion aside*/
        top: -8.5rem;
    }
    .contenedor03{
        display: block;
    }
    .row img{
        width:20rem;
        height: 32.4375rem; 
        position: relative;   
        left: -1.5625rem;
    }
    .row{
        width: 22.5rem;
        height: 32.4375rem; 
    }
    .column{
        position: relative;
        left: -1.875rem;
    }
    .parrafo{
        width: 18rem;
        height: 15.875rem;
        padding-left: 0.525rem;
        margin: 0;
    }
    #titulo{
        display: block;
        width: 17.1875rem;
        height: 5.625rem;
        font-size: 2.25rem;
        color: #060A24;
        letter-spacing: 0;
        font-family: 'IBM Plex Sans Condensed', sans-serif;
        padding-left: 1.25rem;
        
    }

    /* ***Imágenes ****/
    section{
        grid-area: section;
        width: 100%;
        margin: auto;
        margin-top: 6.25rem;  
    }
    .invitados{
        display:block;
        margin:auto;
        width: 100%;
    }
    #estelares{
        font-size: 2rem;
        color: #060A24;
        letter-spacing: 0;
        font-family: 'IBM Plex Sans Condensed', sans-serif;
        width: 17.1875rem;
        height: 5.625rem;
        position: relative;
        left: -1.875rem;
    } 
     .invitados img{
        display: block;
        width: 100%;
        height: 15.1875rem;
        padding: 0;
        margin: 0;
    } 

    /* ***Alguno de nuestros temas*** */

    article{
        grid-area: article;
        width: 100%;
        display:flex;
        flex-wrap: wrap;
        height:43.75rem;
        align-items:flex-end;
        justify-content: space-evenly;  
        padding: 0;
        margin: 0;
    }
    .tem{
        display: block;
        width: 17.1875rem;
        height: 7.5rem;
        position: relative;
        top: -9.375rem;
    }
    #temas{
        grid-area: temas;
        font-family: 'IBM Plex Sans Condensed', sans-serif;
        font-size: 2.25rem;
        color: #060A24;
        letter-spacing: 0;
        width: 17.1875rem; ;
        height: 6.25rem;
        display:inline;  
        position: relative;
        left: 30px;
        top: 50px;
    }
    .caja1{
        width: 100%;
        position: relative;
        left: 0px;
    }
    .imagen{
        width: 6.5rem;
        height: 6.5rem;
        display: block;
        padding-left: 0.625rem; 
     }
    .descr{
        font-family: 'IBM Plex Sans Condensed', sans-serif;
        font-size: 1.5rem;
        color: #060A24;
        letter-spacing: 0;
        display: flex;
        align-items: center;
        text-align: center;
        position: relative;
        left: 10px;
        width: 50%;
        height: 4rem;
    }  

    /* ***Escuchá los episodios *** */

    #contenedor2{
        grid-area: contenedor2;
        width: 100%;
       height:18.125rem ;
       display: flex;
       clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0% 100%);
       background-image: linear-gradient(225deg, #0000FF 0%, #0000A3 100%);
       position: relative;
       top: -3.125rem;
   }
   .novedades{
       color: white;
       width: 100%;
       letter-spacing: 0;
       display: inline-block;
       font-family: 'IBM Plex Sans Condensed', sans-serif; 
   }
    #cont2 h1{
        position: relative;
        font-size:2em ;
        top: -3.125rem;
    }
   #cont2{
       width: 18rem;
       height: 18.75rem;
       font-size: 1.5rem;
       color: #FFFFFF;
       letter-spacing: 0;
       text-align: center;
       margin-right: auto;
       margin-left: auto;
       font-family: 'IBM Plex Sans Condensed';  
       line-height: 2.625rem;
       margin-top: 31.25rem;
   }
   #escucha{
        position: relative;
        top:-4.375rem ;
   }
   #ESCUCHÁLOSEPISODIOS{
       background-color: #00f3bb;
       display: flex;
       justify-content: center;
       width: 18rem;
       height: 3rem;
       font-family: 'IBM Plex Mono', medium;
       color: #060A24;
       font-size: 1.125rem;
       letter-spacing: 0px;
       text-align: center;
       line-height: 1.5rem;   
       margin-top: 3.125rem;
       margin-right: auto;
       margin-left: auto;
   }
   #ESCUCHÁLOSEPISODIOS:hover{
    background-image: linear-gradient(225deg, #0000FE 0%, #00F0B8 100%);
}
   /* ***Footer *** */

   footer{
        grid-area: footer;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        width: 100%;
        height:1.875rem ;
        padding: 0;
        margin: 0;
        position: relative;
        top: 0px;
    }
     footer div{
        font-size: 0.75rem;
        color: #060A24;
        letter-spacing: 0;
        line-height: 1.75rem;
        /*display: inline;*/
        width:14.1875rem ;
        height: 1.375rem;
        position: relative;
        top: -2.5rem;
        left: 0%;
    }
    .fab{
        width: 1.25rem;
        height: 1.75rem; 
        padding-right: 5vw;
        display: inline;
    }
    #redes{
        display: inline;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -1.875rem;
        left: 0px;
    }
}