/**************************** ESTILO GENERAL ****************************/

@font-face {
    font-family: titulos;
    src: url(../fonts/Downcome/DOWNCOME.TTF);
}

@font-face {
    font-family: textos;
    src: url(../fonts/Merriweather/Merriweather-Regular.ttf);
}

* {box-sizing: border-box;}

html {scroll-behavior: smooth;}

body {margin: 0; padding: 0;
      font-family: textos;
      background-color: black;
}

#wrapper {width: 90%;
          background-color: rgb(58, 58, 58);
          margin: auto;
}

section{padding: 4% 0;}

.titulo-seccion {font-family: titulos;
                 font-size: 4rem;
                 color: darkred;
                 text-align: center;
                 padding-bottom: 4%;
}

/****************************** ESTILO DE NAV ******************************/

nav {position: sticky;
     top: 0;
     z-index: 999;
}

.topnav {background-color: grey;
         overflow: hidden;
}

.topnav a {float: left;
           display: block;
           text-decoration: none;
           color: white;
           text-align: center;
           padding: 14px 16px;
           font-family: titulos;
           font-size: 25px;
           transition: 0.3s;
}

.topnav a:hover {background-color: black;
                 color: darkred;
}

.topnav .icon {
  display: none;
  padding: 0px;
}

@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/****************************** HERO SECTION ******************************/

#hero {background-image: url(../images/Tokyo_Ghoul.jpg);
       height: 100vh;
       background-repeat: no-repeat;
       background-size: cover;
       padding-left: 3%;
}

#titulo {font-family: titulos;
         font-size: 7rem;
         color: darkred;
}

/****************************** SYNOPSIS ******************************/

.grid6 {display: grid;
        grid-template-columns: 50% 50%;
        padding-left: 10%;
        padding-right: 10%;
}

.col6 {padding-left: 3%;
       padding-right: 3%;
       padding-bottom: 13%;
       color: white;
       text-align: justify;
       font-size: 1.5rem;
}

.col6 img {width: 100%;}

/****************************** GRID TEMPORADAS ******************************/

.grid4 {display: grid;
        grid-template-columns: 50% 50%;
}

.col4 {padding: 3%;}

.container-16-9 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.col4 p {color: white;
         font-size: 2rem;
         text-align: center;
}

/****************************** GRID PERSONAJES ******************************/

.grid10 {display: grid;
         grid-template-columns: 20% 20% 20% 20% 20%;
}

.col10 {padding: 8%;}

/****************** Estilo de la card de W3school ********************/

.card {
    /* Añadir sombras para crear el "efecto card" */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    padding: 5%;
  }
  
  /* Con el ratón encima, añade una sombra más amplia */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  /* Añadir padding dentro del container de la card */
  .container {
    padding: 2px 16px;
    background-color: lightgray;
  }

.card img {width: 100%;
           opacity:0.75;
           transition: 0.5s;
}

.card img:hover {opacity: 1;}

.boton {text-decoration: none;
        color: white;
        background-color: rgb(133, 133, 133);
        padding: 5px 10px;
        border-radius: 5px;
        transition: 0.3s;
}

.boton:hover {background-color: black;
              color: darkred;
              font-weight: bold;
}

/**************************** GALERÍA ****************************/

.col4 img {width: 100%;}

/**************************** GRID FOOTER ****************************/

footer {background-color: rgb(85, 85, 85);}

.grid3 {display: grid;
    grid-template-columns: 25% 25% 50%;
}

.col3 {padding: 6%;}

.col3 img {width: 50%;/* Para que no se salga de su cuadro */
           display: block; /* La convierte en bloque */
           margin: auto;
}

#indice {text-align: center;}

#follow {color: white;}

/* Style all font awesome icons */
.fa {box-sizing: content-box;
     padding: 15px;
     font-size: 30px !important;
     width: 30px;
     height: 30px;
     text-align: center;
     text-decoration: none;
     border-radius: 50%;
}

/* Add a hover effect if you want */
.fa:hover {
 opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
 background: #3B5998;
 color: white;
}

/* Twitter */
.fa-twitter {
 background: #55ACEE;
 color: white;
}

/* Instagram */
.fa-instagram {
 background: #125688;
 color: white;
}

.enlace {text-decoration: none;
         color: white;
         transition: 0.3s;
         border-radius: 10%;
         padding: 1%;
}

.enlace:hover {color: darkred;
               font-weight: bold;
               background-color: black;
}

/**************************** MEDIA QUERIES ****************************/

@media only screen and (width<=1050px){
    #wrapper {width: 90%;}
    #titulo {font-size: 0rem;}
    .grid10 {grid-template-columns: 50% 50%;}
    #hero {background-image: url(../images/Tokyo_Ghoul2.jpeg);}
    .grid3 {grid-template-columns: 50% 50%;}
    .grid4 {grid-template-columns: 100%;}
    .grid6 {grid-template-columns: 100%;}
}

@media only screen and (width<=600px){
    #wrapper {width: 100%;}
    #titulo {font-size: 6rem;
             text-align: center;
             color: rgb(39, 39, 39);}
    .grid10 {grid-template-columns: 100%;}
    #hero {background-image: url(../images/Tokyo_Ghoul3.jpg)}
    .grid3 {grid-template-columns: 100%;}
    .grid4 {grid-template-columns: 100%;}
    .col4 p {font-size: 1.5rem;}
    .grid6 {grid-template-columns: 100%;}
    .col6 p {font-size: 1rem;}
}