:root {
     --primary: #141414;
     --light: #F3F3F3;
     --dark: 	#686868;
}
   
html, body {
     width: 100vw;
     min-height: 100vh;
     margin: 0;
     padding: 0;
     background-color: var(--primary);
     color: var(--light);
     font-family: Arial, Helvetica, sans-serif;
     box-sizing: border-box;
     line-height: 1.4;
     scroll-behavior: smooth;

}
   
img {
     max-width: 100%;
}
   
h1 {
     padding-top: 60px;  
}
   
.contendor {
     margin: 0;
     padding: 0;
}
   
/* HEADER */
header {
     padding: 20px 20px 0 20px;
     position: fixed;
     top: 0;
     display: grid;  
     grid-gap:5px;
     grid-template-columns: 1fr 4fr 1fr;
     grid-template-areas: 
      "nt mn mn sb . . . "; 
     background-color: var(--primary);
     width: 100%;
     margin-bottom: 0px;  
   }
   
   .netflixLogo {
     grid-area: nt;
     object-fit: cover;
     width: 100px;
     max-height: 100%;
     
     padding-left: 30px;
     padding-top: 0px;  
   }
   
   .netflixLogo img {  
     height: 35px;     
   }
      
   
   .main-nav {
     grid-area: mn;
     padding: 0 30px 0 20px;
   }
   
   .main-nav a {
     color: var(--light);
     text-decoration: none;
     margin: 1vmax;  
		 margin-right: 1vmax;
   }
   
   .main-nav a:hover {
     color: var(--dark);
   }
   
   .sub-nav {
     grid-area: sb;
     padding: 0 40px 0 40px;
   }
   
   .sub-nav a {
     color: var(--light);
     text-decoration: none;
     margin: 5px;
   }
   
   .sub-nav a:hover {
     color: var(--dark);
   }
   
   
   /* MAIN */
   .main-container {
     padding: 50px;
   }
   
   .box {
     display: grid;
     grid-gap: 20px;
     grid-template-columns: repeat(6, minmax(100px, 1fr));
     text-align: center;
   }
   
   .box a {
     transition: transform .3s;
     overflow: hidden;  
     text-align: center;
     text-decoration: none;
     color: white;
   }

   .box a h4 {
	 width: 1fr;
	 overflow: hidden;
     position: absolute;
     transform: translateY(-1.5vmax); 
     transition: .5s;
     opacity: 0;
     font-size: 8px;
    
     text-shadow: 1px 1px 2px black;
		 /*  -webkit-text-stroke-width: 0.5px;
			-webkit-text-stroke-color: grey; */
			text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;
   }
   
   .box a p {
     /* width: 100%; */ 
	 width: 1fr;
	 overflow: hidden;
     /* position: absolute; */
     transform: translateY(-1.5vmax); 
     transition: .5s;
     opacity: 0;
     font-size: 6px;
     text-shadow: 1px 1px 2px black;
		 /* -webkit-text-stroke-width: 0.5px;
			-webkit-text-stroke-color: black; */
				text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;
   }
   
   
   /* sólo para pantallas*/
   @media (hover: hover){
			.box a:hover {
			 transition: transform .3s;
			 -ms-transform: scale(2);
			 -webkit-transform: scale(2);  
			 transform: scale(2);
		   }

		   .box a:hover h4 {
			 opacity: 1;
			 transform: translateY(-7vmax); 
		   }

		   .box a:hover p {
			 opacity: 1;
			 transform: translateY(-3vmax); 
		   }
   }
  /*  para táctil  */
   
		.box a:active {
			 transition: transform .3s;
			 -ms-transform: scale(2);
			 -webkit-transform: scale(2);  
			 transform: scale(2);
		   }

		   .box a:active h4 {
			 opacity: 1;
			 transform: translateY(-7vmax); 
		   }

		   .box a:active p {
			 opacity: 1;
			 transform: translateY(-3vmax); 
		   }
   
   
   
   
   
   .box img {
     border-radius: 2px;
   }

   
   
   /* LINKS */
   .link {
     padding: 50px;
   }
   
   .sub-links ul {
     list-style: none;
     padding: 0;
     display: grid;
     grid-gap: 20px;
     grid-template-columns: repeat(4, 1fr);
   }
   
   .sub-links a {
     color: var(--dark);
     text-decoration: none;
   }
   
   .sub-links a:hover {
     color: var(--dark);
     text-decoration: underline;
   }
   
   .logos {
     padding-left: 10px;
		 padding-top: 50px;
		 margin-top: 50px;
   }
   
   .logo {
     color: var(--dark);
   }
   
   
   /* FOOTER */
   footer {
     padding: 20px;
    
     text-align: center;
     color: var(--dark);
     margin: 10px;
   }

   footer p{
        color: red;
        font-weight: 700;
   }
   
   /* MEDIA QUERIES */
   
   @media(max-width: 900px) {
   
     header {
       display: grid;
       grid-gap: 20px;
       grid-template-columns: repeat(2, 1fr);
       grid-template-areas: 
       "nt nt nt  .  .  . sb . . . "
       "mn mn mn mn mn mn  mn mn mn mn";
     }
   
     .box {
       display: grid;
       grid-gap: 20px;
       grid-template-columns: repeat(4, minmax(100px, 1fr));
     }
   
   }
   
   @media(max-width: 700px) {
   
     header {
       display: grid;
       grid-gap: 20px;
       grid-template-columns: repeat(2, 1fr);
       grid-template-areas: 
       "nt nt nt  .  .  . sb . . . "
       "mn mn mn mn mn mn  mn mn mn mn";
     }
   
     .box {
       display: grid;
       grid-gap: 20px;
       grid-template-columns: repeat(3, minmax(100px, 1fr));
     }
   
     .sub-links ul {
       display: grid;
       grid-gap: 20px;
       grid-template-columns: repeat(3, 1fr);
     }
      
   }
   
   @media(max-width: 500px) {
   
     .contenedor {
       font-size: 15px;
     }
   
     header {
       margin: 0;
       padding: 20px 0 0 0;
       position: static;
       display: grid;
       grid-gap: 20px;
       grid-template-columns: repeat(1, 1fr);
       grid-template-areas: 
       "nt"    
       "mn"
       "sb";
       text-align: center;
     }
   
     .netflixLogo {
       max-width: 100%;
       margin: auto;
       padding-right: 20px;
     }
   
     .main-nav {
       display: grid;
       grid-gap: 0px;
       grid-template-columns: repeat(1, 1fr);
       text-align: center;
     }
   
     h1 {
       text-align: center;
       font-size: 18px;
     }
   
    
   
     .box {
       display: grid;
       grid-gap: 20px;
       grid-template-columns: repeat(1, 1fr);
       text-align: center;    
     }
   
     .box a:hover {
       transition: transform .3s;
       -ms-transform: scale(1);
       -webkit-transform: scale(1);  
       transform: scale(1.2);
     }
   
     .logos {
       display: grid;
       grid-gap: 20px;
       grid-template-columns: repeat(2, 1fr);
       text-align: center;
     }
   
     .sub-links ul {
       display: grid;
       grid-gap: 20px;
       grid-template-columns: repeat(1, 1fr);
       text-align: center;
       font-size: 15px;
     }
   
     
   
     
      
   }