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

section{
    min-height: 100vh;
    width: 100%;
}

body{
    overflow-y: scroll;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.one{
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#2b1055, #7597de);
    min-height: 110vh;
    font-family: 'Black Han Sans', sans-serif;
}

.one image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.one::before{
    content: '';
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 10rem;
    background: linear-gradient( transparent, #000000);
    z-index: 1000;
}

#stars{
    position: absolute;
}

#layer1{
    z-index: 6;
    position: absolute;
    width: 100%;
    height: 100%;
}

#layer2{
    z-index: 5;
    position: absolute;
    width: 100%;
    height: 100%;
}

#layer3{
    z-index: 1;
    position: absolute;
    height: 100%;
    width: 100%;
}

#layer4{
    z-index: 0;
    position: absolute;
    height: 100%;
    width: 100%;
}

/*TITULO SECTION ONE*/

#text-parallax{
    z-index: 2;
    position: absolute;
    /*font-family: 'Poppins', sans-serif;*/
    font-family: 'Black Han Sans', sans-serif;
    font-size: 7rem;
    color: rgb(216, 216, 216);
    font-weight: bold;
    letter-spacing: 2px;
    z-index: 5;
    transform: translateY(-50px);
    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);
   /* background-image: linear-gradient(180deg, #8e9eab,#eef2f3);
    -webkit-background-clip: text;
    color: transparent;*/
}

#text-parallax::after{
    content: 'games';
    position: absolute;
    height: 3rem;
    width: 100%;
    color: rgb(216, 216, 216);
    font-family: 'Black Han Sans', sans-serif;
    bottom: 0;
    font-size: 2rem;
    transform: translateY(20px) translateX(-130px);
}


/*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);
    background-color: transparent;
}

.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);
    background-color: transparent;
    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;
} 

/*MEDIAOQUERIES 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*/

/*
nav.nav-container ul li.active{
    background-color: rgb(47, 163, 240);
    background-color: rgb(236, 236, 234);
    
    transition: all 500ms ease;
    outline: 1px solid black;
}

nav.nav-container ul li.active a{
    color: rgb(47, 163, 240);
    color: rgb(224, 224, 224);
    color: rgb(29, 28, 28);
    transition: all 500ms ease;
}

*/

/*SHOTTING STARS*/


span{
    position: absolute;
    top: 45%;
    left: 60%;
    width: 4px;
    height: 4px;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1),
    0 0 15px rgba(255, 255, 255, 1);
    animation: star 3000ms linear infinite;
}

span::before{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18.75rem;
    height: 1px;
    background: linear-gradient(90deg, #fff, transparent);
}

@keyframes star{
    0%{
        transform: rotate(315deg) translateX(0);
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    70%{
        opacity: 1;
    }
    100%{
        transform: rotate(315deg) translateX(-50rem);
        opacity: 0;
    }

}

span:nth-child(1){
    top:0;
    right: 100px;;
    left: initial;
    animation-delay: 0;
    animation-duration: 1s;
}

span:nth-child(2){
    top: 0;
    right: 400px;
    left: initial;
    animation-delay: 0.2s;
    animation-duration: 3s;
}

span:nth-child(3){
    top: 0px;
    right: 1000px;
    left: initial;
    animation-delay: 0.75s;
    animation-duration: 2.25s;
}

span:nth-child(4){
    top: 0px;
    right: 450px;
    left: initial;
    animation-delay: 2.75s;
    animation-duration: 2.25s;
}

span:nth-child(5){
    top: 0px;
    right: 1200px;
    left: initial;
    animation-delay: 1s;
    animation-duration: 4s;
}

/*END SHOOTING STARS*/

/*CHANGING HEADER ON SCROLL*/

.nav-scrolled{
    /*background: rgba(224, 216, 216, 1);*/
    background-color: rgb(29, 28, 28);
}

.nav-scrolled li a{
    /*color: rgb(2, 10, 83);*/
    color: rgb(236, 236, 234);
}

/*SECTION 2 TITLE*/

.two-header{
    min-height: 15vh;
    width: 100%;
    letter-spacing: 2px;
    background-image: linear-gradient(90deg, #36D1DC,#5B86E5, #2a4e9a, #5B86E5, #36D1DC);
    background-size: 380%;
    animation: top-animation 10s infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(236, 236, 236);
    font-size: 2rem;
    font-weight: bold;
    font-family: 'Black Han Sans', sans-serif;
}

.two-title h1{
    text-align: center;
}

@keyframes top-animation{
    0%{
        background-position: left;
    }
    100%{
        background-position: right;
    }
}

/*SECTION 2*/

/*TESTING SECTION 2*/

.two{
    min-height: 75vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 1.5rem;
    font-family: 'Poppins', sans-serif;
    color: rgb(230, 230, 230);
}

.centering{
    width: 80%;
    z-index: 5;
}

.two h2{
    font-size: 3rem;
    color: rgb(236, 236, 234);
    text-align: center;
}

.two .welcome{
    color: rgb(47, 163, 240);
    font-weight: bold;
    font-size: 5rem;
    font-family: 'Black Han Sans', sans-serif;
}

.two .centering p{
    text-align: center;
}

.company{
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}

.company-shader{
    background-image: url(./DreamPotion-img/about-bg2.png);
    /*background-image: url(test2-mago.png);*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.overlay{
    height: 100%;
    width: 100%;
    background: linear-gradient(360deg,#000000, #000000c7, transparent);
   /* background:   #000000c4;*/
}

/*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);
}


/*SECTION 3*/

.three{
    min-height: 80rem;
    font-family: 'Poppins', sans-serif;
    font-family: 'Black Han Sans', sans-serif;
    background-color: #002244;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 15vh 36.51rem 1fr;
}

.three-title{
    grid-column: 1/3;
    grid-row: 1/2;
    height: 100%;
    width: 100%;
    letter-spacing: 2px;
    background-image: linear-gradient(90deg, #36D1DC,#5B86E5, #2a4e9a, #5B86E5, #36D1DC);
    background-size: 380%;
    animation: top-animation 10s infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(236, 236, 236);
    font-size: 2rem;
    font-weight: bold;
    outline: 1px solid black;
}

@keyframes top-animation{
    0%{
        background-position: left;
    }
    100%{
        background-position: right;
    }
}

.mago-container{
    grid-column: 1/2;
    grid-row: 2/3;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.mago-display{
    height: 100%;
    width: 100%;
   /* object-fit: 100% 100%;*/
    position: relative;
    outline: 2px rgb(15, 15, 15) solid;
    overflow: hidden;
}

.mago-display img{
    height: 100%;
    width: 100%;
    /*object-fit: 100% 100%;*/
    transition: all 500ms ease;
    cursor: pointer;
}

.mago-display .text{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15rem;
    /*background-color: rgba(0, 0, 0, 0.548);*/
    background: linear-gradient(360deg,#000000ef, #000000e7,#000000c2, transparent);
    padding: 2rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    text-align: justify;
    transition: all 500ms ease;
    transform: translateY(90%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mago-display .text p{
    color: rgb(224, 224, 224);
}

.mago-container:hover img{
    transform: scale(1.2);
}

.mago-container:hover .text{
    transform: translateY(0);
}

.vulcan-container{
    grid-column: 2/3;
    grid-row: 2/3;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.vulcan-display{
    height: 100%;
    width: 100%;
   /* object-fit: 100% 100%;*/
    position: relative;
    outline: 2px rgb(15, 15, 15) solid;
    overflow: hidden;
}

.vulcan-display img{
    height: 100%;
    width: 100%;
    /*object-fit: 100% 100%;*/
    transition: all 500ms ease;
    cursor: pointer;
}

.vulcan-display .text{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15rem;
    background: linear-gradient(360deg,#000000ef, #000000e7,#000000c2, transparent);
    padding: 2rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    text-align: justify;
    transition: all 500ms ease;
    transform: translateY(90%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vulcan-display .text p{
    color: rgb(224, 224, 224);
}

.vulcan-container:hover img{
    transform: scale(1.2);
}

.vulcan-container:hover .text{
    transform: translateY(0);
}

.footer{
    grid-column: 1/3;
    grid-row: 3/4;
    background-color: #2c2c2c;
    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;
}

.footer-title p{
    font-size: 4rem;
    color: rgb(47, 163, 240);
    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);
}

/*MEDIA SECTION 3*/

@media (max-width: 1300px){
    .three{
        grid-template-rows: 15vh 32rem 1fr;
    }
    .mago-display .text{
        transform: translateY(100%);
        font-size: 1.2rem;
    }
    .vulcan-display .text{
        transform: translateY(100%);
        font-size: 1.2rem;
    }
}

@media (max-width: 1100px){
    .three{
        grid-template-rows: 15vh 25rem 1fr;
        min-height: 65rem;
    }
    .footer-title p{
        font-size: 3rem;
    }
    .mago-display .text{
        font-size: 1rem;
        height: 13rem;
    }
    .vulcan-display .text{
        font-size: 1rem;
        height: 13rem;
    }
}

/*MEDIA SECTION 2 y 3*/

@media (max-width: 900px){
    .footer-title p{
        font-size: 2rem;
    }
    .two-header{
        font-size: 1.5rem
    }
    .two{
        min-height: 70vh;
    }
    .three{
        min-height: 80rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 15vh 25rem 25rem 1fr;
    }
    .three-title{
        font-size: 1.5rem;
        grid-column: 1/2;
        grid-row: 1/2;
    }
    .mago-container{
        grid-column: 1/2;
        grid-row: 2/3;
    }
    .vulcan-container{
        grid-column: 1/2;
        grid-row: 3/4;
    }
    .footer{
        grid-column: 1/2;
        grid-row: 4/5;
    }
}


/*MEDIA SECTION 1*/

@media (max-width: 1200px){
    #text-parallax{
        font-size: 5.5rem;
    }
    #text-parallax::after{
        transform: translateY(27px) translateX(-130px);
    }
}

/*MEDIA SECTION 1 y 2*/

@media (max-width: 850px){
    #text-parallax{
        font-size: 4rem;
    }
    #text-parallax::after{
        transform: translateY(32px) translateX(-130px);
    }
    #layer1{
        width: 110%;
    }
    #layer2{
        width: 120%;
    }
    #layer3{
        width: 110%;
    }
    .two h2{
        font-size: 2rem;
    }
    .two .welcome{
        font-size: 4rem;
    }
    .two .centering p{
        font-size: 1.4rem;
        margin-top: 0.3rem;
    }
}

/*MEDIA SECTION 1*/

@media (max-width: 650px){
    .one{
        min-height: 80vh;
    }
    #text-parallax{
        font-size: 2.1rem;
    }
    #text-parallax::after{
        transform: translateY(39px) translateX(-100px);
        font-size: 1.5rem;
    }
    #layer1{
        width: 110%;
    }
    #layer2{
        width: 120%;
    }
    #layer3{
        width: 110%;
    }
    .two-header{
        min-height: 10vh;
    }
    .two-header h1{
        font-size: 1.5rem;
    }
    .two h2{
        font-size: 1.4rem;
    }
    .two .welcome{
        font-size: 2.5rem;
    }
    .two .centering p{
        font-size: 1.3rem;
        text-align: justify;
    }
    .three{
        grid-template-rows: 10vh 25rem 25rem 1fr;
        grid-template-columns: 1fr;
    }
    .three-title h1{
        font-size: 1.5rem;
    }
    .media img{
        width: 35px;
        height: 35px;
        margin: 0 1rem 0 1rem;
    }
    .three .mago-container .text{
        display: none;
    }
}

@media (max-width: 500px){
    .two .centering p{
        font-size: 1.1rem;
    }
    #text-parallax::after {
        transform: translateY(43px) translateX(-76px);
        font-size: 1.1rem;
    }
    .three{
        min-height: 50rem;
        grid-template-rows: 10vh 15rem 15rem 1fr;
    }
    .footer-title p {
        font-size: 1.4rem;
    }
    span{
        top: 35%;
        left: 55%;
        animation: star 5000ms linear infinite;
    }   
}