@font-face {
    font-family: 'Press Start 2P'; 
    src: url('font/PressStart2P.ttf') format('woff2'); /* Ruta y formato de la fuente */
    font-weight: normal;
    }


/*--------------------------------------Media 450px ------------------------*/

@media (width < 450px) {
html{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

body{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
    font-family: 'Press Start 2P';
}

/*--------------------------------------Encabezado-----------*/


header{
    width: 100%;
    height: 100px;
    background: darkcyan;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    color: whitesmoke;
    border: 10px silver outset;
    box-sizing: border-box;
    justify-content: space-between;
}

header h1{
    height: 100%;
    margin: 0;
    padding: 10px;
    position: relative;
    font-size: 4vw;
    text-decoration: none;
    align-content: center;
    box-sizing: border-box;
}

header h1 a{
    text-decoration: none;
    color: white;
}

header ul{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: none;
    top: 100px;
    position:absolute;
    flex-direction: column;
    z-index: 10;
}

header ul li{
    width: 100%;
    height: 75px;
    margin: 0;
    padding: 12.5px;
    background:silver;
    position:relative;
    flex-direction: column;
    text-decoration: none;
    border-style: double;
    box-sizing: border-box;
}

header ul li a{
    text-decoration: none;
    color:white;
    justify-content: space-between;
}

header ul li a span img{
    width: 50px;
}

header button{
    width:20vw;
    background: darkcyan;
    padding: 10px;
    border: none;
}

header button img{
    width: 100%;
}



/*--------------------------------------Cuerpo-----------*/

.body{
    width: 100%;
    height: auto;
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    border: 10px silver groove;
    box-sizing: border-box;
}

h3{
    width: 100%;
    position: relative;
    margin: 10px auto;
    color: aqua;
    -webkit-text-stroke: .2px black;
}

a{
    text-decoration: none;
    width: 100%;
}

/*--------------------------------------Inicio-----------*/

.start{
    width: 100%;
    height:300px;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}   

.start div{
    width: 600%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: blue;
    position: relative;
    display: flex;
    box-sizing: border-box;
    animation: slide 10s infinite alternate ease-in-out;
}

.art01{
    width:16.66%;
    height: 100%;
    background: black;
}

.art01 img{
    width: 100%;   
    padding:50px 0 ;
    align-items: center;
}

.art01 h2{
    width:16.66%;
    height: auto;
    margin: 0;
    top:0;
    padding: 25px;
    position: absolute;
    font-size: 5vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.art01 p{
    width:16.66%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 2vw;
    text-align:justify;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}


/*--------------------------------------Emulador-----------*/

.Emulator{
    width: 100%;
    height:300px;
    margin: 0;
    padding: 0;
    position: relative;
    margin:0;
    overflow: hidden;
}   

.Emulator div{
    width: 600%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: blue;
    position: relative;
    display: flex;
    box-sizing: border-box;
    animation: slide 10s infinite alternate ease-in-out;
}


/*--------------------------------------Pack-----------*/

.Pack{
    width: 100%;
    height:300px;
    margin: 0;
    padding: 0;
    position: relative;
    margin:0;
    overflow: hidden;
}   

.Pack div{
    width: 600%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: blue;
    position: relative;
    display: flex;
    box-sizing: border-box;
    animation: slide 10s infinite alternate ease-in-out;
}

.artp1{
    width:16.66%;
    height: 100%;
    background: black;
}

.artp1 img{
    width:100%; 
    height: 100%;
    align-items: center;
}

.artp1 h2{
    width:16.66%;
    height: auto;
    margin: 0;
    top:0;
    padding: 25px;
    position: absolute;
    font-size: 5vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp1 p{
    width:16.66%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 2vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

.artp2{
    width:16.66%;
    height: 100%;
    background: black;
}

.artp2 img{
    width:100%; 
    height: 100%;
    align-items: center;
}

.artp2 h2{
    width:16.66%;
    height: auto;
    margin: 0;
    top:0;
    padding: 25px;
    position: absolute;
    font-size: 5vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp2 p{
    width:16.66%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 2vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

.artp3{
    width:16.66%;
    height: 100%;
    background: black;
}

.artp3 img{
    width:100%; 
    height: 100%;
    align-items: center;
}

.artp3 h2{
    width:16.66%;
    height: auto;
    margin: 0;
    top:0;
    padding: 25px;
    position: absolute;
    font-size: 5vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp3 p{
    width:16.66%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 2vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

.artp4{
    width:16.66%;
    height: 100%;
    background: black;
}

.artp4 img{
    width:100%; 
    height: 100%;
    align-items: center;
}

.artp4 h2{
    width:16.66%;
    height: auto;
    margin: 0;
    top:0;
    padding: 25px;
    position: absolute;
    font-size: 5vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp4 p{
    width:16.66%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 2vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

.artp5{
    width:16.66%;
    height: 100%;
    background: black;
}

.artp5 img{
    width:100%; 
    height: 100%;
    align-items: center;
}

.artp5 h2{
    width:16.66%;
    height: auto;
    margin: 0;
    top:0;
    padding: 25px;
    position: absolute;
    font-size: 5vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp5 p{
    width:16.66%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 2vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

.artp6{
    width:16.66%;
    height: 100%;
    background: black;
}

.artp6 img{
    width:100%; 
    height: 100%;
    align-items: center;
}

.artp6 h2{
    width:16.66%;
    height: auto;
    margin: 0;
    top:0;
    padding: 25px;
    position: absolute;
    font-size: 5vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp6 p{
    width:16.66%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 2vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

@keyframes slide {
    0% {margin-block: 0;}
    20% {margin: 0;}

    25% {margin-left: -100%;}
    35% {margin-left: -100%;}

    40% {margin-left: -200%;}
    55% {margin-left: -200%;}

    60% {margin-left: -300%;}
    70% {margin-left: -300%;}
    
    75% {margin-left: -400%;}
    85% {margin-left: -400%;}
    
    90% {margin-left: -500%;}
    100% {margin-left: -500%;}
}

footer {
    display: none ;
}




}

/*--------------------------------------Media 451px-----------------------------------*/

@media (width > 450px) {

html{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}
    
body{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
    font-family: 'Press Start 2P';
    }    

/*--------------------------------------Encabezado-----------*/

header{
    width: 100%;
    height: 100px;
    background: darkcyan;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    color: whitesmoke;
    border: 10px silver outset;
    box-sizing: border-box;
    justify-content: space-between;
    overflow: hidden;
}

a{
    text-decoration: none;
    color: white;
}

header h1{
    height: 25%;
    margin: 0;
    padding: 30px 10px;
    position: relative;
    font-size: 2vw;
    text-decoration: none;
    align-content: center;
    box-sizing: border-box;
}

header ul{
    width: 75%;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    top: 100px;
    list-style: none;
    text-align: center;
    justify-content: space-between;
}

header ul li{
    width: 17%;
    display: block;
}

header ul li a{
    text-decoration: none;
    font-size: 1.5vw;
}

header ul li a img{
    width: 40px;
    padding: 10px;
}

header button{
    display: none;
}

/*--------------------------------------Cuerpo-----------*/

.body{
    width: 100%;
    height: auto;
    position: relative;
    margin: 0;
    padding: 0 5%;
    display: block;
    border: 10px silver groove;
    box-sizing: border-box;
}

h3{
    width: 100%;
    padding: 10px 50px;
    position: relative;
    margin: 10px auto;
    color: darkcyan;
    -webkit-text-stroke: .2px black;
}

a{
    text-decoration: none;
    width: 100%;
}
/*--------------------------------------Inicio-----------*/

.start{
    width: 100%;
    height: 400px;
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}   

.start div{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: blue;
    position: relative;
    display: flex;
    box-sizing: border-box;
    animation: slide 10s infinite alternate ease-in-out;
}

.art01{
    width: 20%;
    height: 100%;
    background: black;
}

.art01 img{
    width: 100%;   
    align-items: center;
}

.art01 h2{
    width:100%;
    height: auto;
    margin:0;
    top:0;
    padding: 10px;
    font-size: 2vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.art01 p{
    width:100%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 0 2%;
    font-size: 1vw;
    text-align:justify;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}


/*--------------------------------------Emulador-----------*/

.Emulator{
    width: 100%;
    height:400px;
    margin: 0;
    padding: 0;
    position: relative;
    margin:0;
    overflow: hidden;
}   

.Emulator div{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: blue;
    position: relative;
    display: flex;
    box-sizing: border-box;
    animation: slide 10s infinite alternate ease-in-out;
}

/*--------------------------------------Pack-----------*/

.Pack{
    width: 100%;
    height:400px;
    margin: 0;
    padding: 0;
    position: relative;
    margin:0;
    overflow: hidden;
}   

.Pack div{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: blue;
    position: relative;
    display: flex;
    box-sizing: border-box;
    animation: slide 10s infinite alternate ease-in-out;
}

.artp1{
    width: 20%;
    height: 100%;
    background: black;
}

.artp1 img{
    width: 100%; 
    height: 100%;
    align-items: center;
}

.artp1 h2{
    width:20%;
    height: auto;
    margin: 0;
    padding: 25px;
    top: 0;
    position: absolute;
    font-size: 2vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp1 p{
    width:20%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 1vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

.artp2{
    width: 20%;
    height: 100%;
    background: black;
}

.artp2 img{
    width: 100%; 
    height: 100%;
    align-items: center;
}

.artp2 h2{
    width:20%;
    height: auto;
    margin: 0;
    padding: 25px;
    top: 0;
    position: absolute;
    font-size: 2vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp2 p{
    width:20%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 1vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

.artp3{
    width: 20%;
    height: 100%;
    background: black;
}

.artp3 img{
    width: 100%; 
    height: 100%;
    align-items: center;
}

.artp3 h2{
    width:20%;
    height: auto;
    margin: 0;
    padding: 25px;
    top: 0;
    position: absolute;
    font-size: 2vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp3 p{
    width:20%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 1vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

.artp4{
    width: 20%;
    height: 100%;
    background: black;
}

.artp4 img{
    width: 100%; 
    height: 100%;
    align-items: center;
}

.artp4 h2{
    width:20%;
    height: auto;
    margin: 0;
    padding: 25px;
    top: 0;
    position: absolute;
    font-size: 2vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp4 p{
    width:20%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 1vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

.artp5{
    width: 20%;
    height: 100%;
    background: black;
}

.artp5 img{
    width: 100%; 
    height: 100%;
    align-items: center;
}

.artp5 h2{
    width:20%;
    height: auto;
    margin: 0;
    padding: 25px;
    top: 0;
    position: absolute;
    font-size: 2vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp5 p{
    width:20%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 1vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

.artp6{
    width: 20%;
    height: 100%;
    background: black;
}

.artp6 img{
    width: 100%; 
    height: 100%;
    align-items: center;
}

.artp6 h2{
    width:20%;
    height: auto;
    margin: 0;
    padding: 25px;
    top: 0;
    position: absolute;
    font-size: 2vw;
    text-align: center;
    color: white;
    -webkit-text-stroke: .2px black;
    box-sizing: border-box;
}

.artp6 p{
    width:20%;
    height: auto;
    margin: 0;
    bottom: 0;
    padding: 25px 2%;
    position: absolute;
    font-size: 1vw;
    text-align:center;
    color: white;
    -webkit-text-stroke: .1px black;
    box-sizing: border-box;
}

}