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

body{
    background-color: #2c2c2c;
}

section{
    min-height: 100vh;
}
/*INICIO CSS BARRA DE NAVEGACIÓN RESPONSIVE SIMPLE*/

header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    transition: all 300ms ease;
    background-color: rgb(29, 28, 28);
}

.nav-container .brand-name{
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(236, 236, 234);
    font-size: 1.5rem;
    font-family: 'Black Han Sans', sans-serif;
    letter-spacing: 2px;
}

.nav-container .brand-name a{
    text-decoration: none;
    color: rgb(236, 236, 234);
}

.nav-container .brand-name img{
    height: 2rem;
    width: 2rem;
    transform: translateY(-5px) translateX(-1px);
}

.nav-container{
    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(29, 28, 28);
    font-family: 'Black Han Sans', sans-serif;
    font-size: 1.5rem;
    line-height: 9vh;
}

.navbar-links ul{
    display: flex;
    line-height: 9vh;
}

.navbar-links li{
    list-style: none;
    line-height: 9vh;   /*EXPERIMENTO parte para submenu*/
    position: relative;   /*EXPERIMENTO parte para submenu*/
}

.navbar-links li a{
    text-decoration: none;
    color: rgb(236, 236, 234);
    padding: 0 2rem 0 2rem;
    display: block;
    letter-spacing: 2px;
}

ul li a{
    transition: all 500ms ease;
}

ul li a:hover{
    /*animation: wiggle2 750ms ease;*/
    color: rgb(47, 163, 240);
}

ul li img{
    transition: all 750ms ease;
    margin-left: 4px;
}

ul li:hover img{
    transform: rotate(180deg);
}

@keyframes wiggle2 {
    0% { transform: rotate(0deg); }
   20% { transform: rotate(15deg); }
   40% { transform: rotate(-15deg); }
   60% { transform: rotate(15deg); }
   80% { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}

.toggle-button{
    position: absolute;
    top: 1.3rem;
    top: 40%;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar{
    height: 3px;
    width: 100%;
    background-color: rgb(236, 236, 234);
    border-radius: 10px;
}

/*FIN CSS BARRA DE NAVEGACIÓN RESPONSIVE SIMPLE, a escepcion de los mediaqueries*/

/*CSS PARA AGREGAR UN DROPDOWN MENU*/

ul{
    list-style: none;
}

.navbar-links .sub-menu{
    display: flex;
    flex-direction: column;
}

.sub-menu{
    width: 10rem;
    display: block;
    position: absolute;
    border-top: 3px solid rgb(47, 163, 240);
    background-color: rgb(29, 28, 28);
    opacity: 0;
    visibility: hidden;
    transition: all 550ms ease;
    z-index: 100;   /*puede no ser necesario, header ya tiene uno de 1001*/
    top: 10rem;
}

.sub-menu::before{
    content: '';
    position: absolute;
    top: -2.5rem;
    left: 3.8rem;
    border: 1.2rem solid transparent;
    border-bottom-color: rgb(47, 163, 240);
}

.navbar-links li:hover > .sub-menu{
    top: 9vh;
    opacity: 1;
    visibility: visible;
} 

/*MEDEIOQUERIES BARRA DE NAVEGACION*/

@media (max-width: 1300px){
    .navbar-links li a{
        padding: 0 1rem 0 1rem;
    }
}


@media (max-width: 1200px){
    .toggle-button{
        display: flex;
        z-index: 1050;
    }
    .navbar-links{
        display: none;
    }
    .nav-container{
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar-links ul{
        width: 100%;
        flex-direction: column;
        line-height: 9vh;  
    }
    .navbar-links{
        position: fixed;    /*experimento full page*/
        top: 0;    /*experimento full page*/
        left: 0;    /*experimento full page*/
        width: 100%;
        height: 100vh;    /*experimento full page*/
        background-color: #111111;   /*experimento full page*/
        z-index: 900;    /*experimento full page*/
    }
    .navbar-links li{
        text-align: center;
        width: 100%;
        line-height: 9vh; 
    }
    .navbar-links.active{
        display: flex;
    }
    .navbar-links li a{
        padding: 1rem 0 1rem 0;
    }
    .sub-menu{
        width: 5rem;
        position: initial;
        border: 3px solid transparent;
        border-top-color: rgb(47, 163, 240);
      /*  margin-left: 10rem;  */
        max-height: 0;
        background-color: #1f1d1d;
    }
    .sub-menu::before{
        top: 8.4vh;
        left: 46.5%;
    }
    .sub-menu a{
        text-align: center;
    }

    .navbar-links li:hover > .sub-menu{
        opacity: 1;
        visibility: visible;
        max-height: initial;
    }
}

/*MEDIA QUERY PARA MARCA FORMATO MOVIL*/

@media (max-width: 500px){
    .nav-container .brand-name{
        font-size: 1rem;
    }
    .toggle-button{
        top: 30%;
    }
}

/*FINAL MEDIAQUERIES BARRA DE NAVEGACION*/


/*SECTION ONE*/

.one{
    min-height: 50rem;
    width: 100%;
    font-family: 'Black Han Sans', sans-serif;
    font-size: 2rem;
   /* background: rgba(224, 216, 216, 1);*/
   /* background: rgb(47, 163, 240); */
    background: linear-gradient(90deg,#5B86E5,#5B86E5, #36D1DC);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 30rem;
}

.centering-one{
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 3rem;
}

.one h1{
    /*color: rgb(47, 163, 240);*/
    color: rgb(10, 9, 9);
    color: rgba(224, 216, 216, 1);
    margin-bottom: 1rem;
    position: relative;
    font-size: 5rem;
    text-align: center;
    text-shadow: 1px 1px 1px rgb(29, 29, 29), 
    1px 2px 1px rgb(29, 29, 29),
    1px 3px 1px rgb(29, 29, 29),
    1px 4px 1px rgb(29, 29, 29),
    1px 5px 1px rgb(29, 29, 29),
    1px 6px 1px rgb(29, 29, 29),
    1px 7px 1px rgb(29, 29, 29);
}

.one h1::after{
    content: 'We are awesome';
    position: absolute;
    width: 11rem;
    height: 4.5rem;
    font-size: 1.6rem;
    bottom: 0;
    text-align: center;
    transform: translateX(-30px) translateY(-40px) rotate(20deg);
    color: #555151;
    /*color: rgba(224, 216, 216, 1);*/
    /*border: 4px solid #2c2c2c;
    z-index: 1;*/
}

.one p{
    color: rgb(10, 9, 9);
    color: rgba(224, 216, 216, 1);
    text-align: justify;
    font-size: 2.5rem;
    text-shadow: 1px 1px 1px rgb(29, 29, 29), 
    1px 2px 1px rgb(29, 29, 29),
    1px 3px 1px rgb(29, 29, 29),
    1px 4px 1px rgb(29, 29, 29);

   /* 1px 5px 1px rgb(29, 29, 29),
    1px 6px 1px rgb(29, 29, 29),
    1px 7px 1px rgb(29, 29, 29);*/
}

.two{
    background-color: #2c2c2c;
    display: grid;
    grid-template-columns: 10% 1fr 10%;
    grid-template-rows: 1fr;
}

.two-container{
    grid-column: 2/3;
    grid-row: 1/2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30rem 30rem 30rem 30rem 30rem;
}

.two-container img{
    width: 15rem;
    height: 15rem;
}

.texto{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 50%;
}

.texto h1{
    color: rgb(47, 163, 240);
    font-size: 3rem;
    font-family: 'Black Han Sans', sans-serif;
    text-align: center;
}

.texto p{
    color: rgba(224, 216, 216, 1);
    font-size: 1.5rem;
    font-family: 'Poppins', sans-serif;
    text-align: justify;
    text-align: center;
}

.pepe{
    grid-column: 1/3;
    grid-row: 1/2;
    margin-top: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 3px solid rgb(235, 235, 235);
}

.martin{
    grid-column: 1/3;
    grid-row: 2/3;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 3px solid rgb(235, 235, 235);
}

.david{
    grid-column: 1/3;
    grid-row: 3/4;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 3px solid rgb(235, 235, 235);
}

.Noteblock{
    grid-column: 1/3;
    grid-row: 4/5;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 3px solid rgb(235, 235, 235);
}

.Capibara{
    grid-column: 1/3;
    grid-row: 5/6;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 3px solid rgb(235, 235, 235);
}

.footer{
    min-height: 35vh;
    width: 100%;
    background-color: #2c2c2c;
    background: linear-gradient(90deg, #373B44, #4286f4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.footer-title{
    height: 60%;
    width: 80%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5vh;
}

.footer-title p{
    font-size: 2rem;
    color: #ececea;
    font-family: 'Black Han Sans', sans-serif;
}

.media{
    height: 40%;
    width: 100%;
    display: flex;
    align-items:flex-start;
    justify-content: center;
}

.media img{
    margin: 0 2rem 0 2rem;
    transition: all 400ms ease;
    cursor: pointer;
}

.media img:hover{
    transform: scale(1.3);
}

/*EFECTO FADE IN*/

.fade-in{
    opacity: 0;
    transition: all 500ms ease-in;
    transform: translateY(30px);
}

.fade-in.appear{    /*Esto quiere decir "una clase fade in que tmb posee la clase appear*/
    opacity: 1;
    transform: translateY(0px);
}


/*MEDIA QUERIES TEAM*/

@media (max-width: 1200px){
    .one h1{
        font-size: 4rem;
    }
    .one p{
        font-size: 2rem;
    }
}

@media (max-width: 950px){
    .media img{
        width: 45px;
        height: 45px;
        margin: 0 1rem 0 1rem;
    }
}

@media (max-width: 900px){
    .one{
        border-bottom-right-radius: 20rem;
    }
    .one h1{
        font-size: 3rem;
    }
}

@media (max-width: 900px){
    .one p{
        font-size: 1.5rem;
    }
    .one{
        min-height: 45rem;
        border-bottom-right-radius: 15rem;
    }
    .texto h1{
        font-size: 2rem;
    }
    .texto p{
        font-size: 1rem;
    }
    .two-container img {
        width: 10rem;
        height: 10rem;
    }
}

@media (max-width: 700px){
    .one p{
        font-size: 1.5rem;
    }
    .one{
        min-height: 45rem;
        border-bottom-right-radius: 15rem;
    }
}

@media (max-width: 682px){
    .one h1::after{
        font-size: 1.4rem;
        transform: translateX(-30px) translateY(-90px) rotate(20deg);
        text-shadow: 1px 1px 1px rgb(29, 29, 29), 
        1px 2px 1px rgb(29, 29, 29),
        1px 3px 1px rgb(29, 29, 29);
    }
    .nav-container{
        line-height: 7.6vh;
    }
  /*  .navbar-links li{
        line-height: 7.6vh;
    }
    .navbar-links ul{
        line-height: 7.6vh;
    }*/
}

@media (max-width:580px){
    .media img{
        width: 35px;
        height: 35px;
        margin: 0 1rem 0 1rem;
    }
    .footer-title p{
        font-size: 1.4rem;
    }
}

@media (max-width: 515px){
    .one{
        min-height: 25rem;
        width: 100%;
        border-bottom-right-radius: 10rem;
    }
    .one h1{
        font-size: 1.5rem;
    }
    .one p{
        font-size: 1rem;
        line-height: 1.5rem;
        /*font-family: 'Poppins', sans-serif;*/
        text-shadow: 1px 1px 1px rgb(29, 29, 29), 
        1px 2px 1px rgb(29, 29, 29),
        1px 3px 1px rgb(29, 29, 29);
       /* font-weight: bold;*/
    }
    .one h1::after{
        font-size: 0.8rem;
        transform: translateX(-30px) translateY(15px) rotate(20deg);
        width: 5rem;
    }
    .two-container{
        grid-template-rows: 20rem 20rem 20rem 20rem 20rem;
    }
    .texto h1{
        font-size: 1.1rem;
        letter-spacing: 1px;
    }
    .texto p{
        font-size: 0.8rem;
    }
    .two-container img {
        width: 8rem;
        height: 8rem;
    }
}