html, body {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
border: 10px double black;
background-color: #fafafa;
font-family: "Lexend Deca", sans-serif;
font-weight: 200;
font-size: 13px;
overflow: hidden;
}
.menu {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: flex-start;
width: 508.16px;
margin-top: 200px;
gap: 10px;
}
.menu a {
text-decoration: none !important;
}
.txt1,
.txt2 {
color: black;
cursor: pointer;
transition: color 0.3s;
}
.txt1:hover,
.txt2:hover {
color: red;
}
.pry {
display: flex;
align-items: center;
gap: 70px;
transform: scale(0.7);
}
.num1,
.num2 {
font-size: 17px;
font-weight: 400;
cursor: default;
margin-right: -50px;
padding-bottom: 250px;
}
.pr1m {
display: none;
}
.pr2 {
position: relative;
display: flex;
align-items: center;
width: 300px;
height: 300px;
}
.pr2 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
}
.pr2:hover img {
animation-play-state: paused;
}
.f1 {
animation: pp1 4.5s infinite;
}
.f2 {
animation: pp2 4.5s infinite;
}
.f3 {
animation: pp3 4.5s infinite;
}
@keyframes pp1 {
0%, 33.333% {
opacity: 1;
}
33.334%, 100% {
opacity: 0;
}
}
@keyframes pp2 {
0%, 33.333% {
opacity: 0;
}
33.334%, 66.666% {
opacity: 1;
}
66.667%, 100% {
opacity: 0;
}
}
@keyframes pp3 {
0%, 66.666% {
opacity: 0;
}
66.667%, 100% {
opacity: 1;
}
}
.name {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: flex-start;
width: 508.16px;
margin-bottom: 100px;
}
.name a {
    color: black;
    text-decoration: none !important;
}
.name a:hover {
    color: red;
}
@media (max-width: 800px) {
header {
display: none;
}
html,
body {
flex-direction: column;
overflow: hidden;
}
.pry {
flex-direction: column;
gap: 0;
}
.num1,
.num2 {
color: transparent;
position: relative;
margin: 0;
padding: 0;
}
.num1::after {
content: "Ayuda a Cuentos";
color: black;
font-weight: 400;
}
.num2::after {
content: "Flan de Uevo";
color: black;
font-weight: 400;
}
.pr1 video {
display: none;
}
.pr1m {
display: block;
margin: 10px 0 50px;
}
.pr2 img {
width: 100%;
height: auto;
margin-top: 10px;
}
.name {
display: none;
}
}
.safari .pr1 video {
display: none !important;
}
.safari .pr1 .pr1m {
display: block !important;
margin: 10px 0 50px;
}