body {
  background-image: url(../foticos/green&pinkplaid.jpg);
  background-repeat: repeat;
  color: black;
  font-family: Verdana;
  margin: 40px 20px 20px 20px;
}  

@font-face {
  font-family: "KidDos";
  src: url("../foticos/kiddos-regular-webfont.woff") format("woff"),
   url("../foticos/kiddos-regular-webfont.woff2") format("woff2"), url("../foticos/KIdDOS-Regular.ttf") format("truetype");
   }

@font-face {
  font-family: "Notie";
  src: url("../foticos/hello-notie-webfont.woff") format("woff"),
    url("../foticos/hello-notie-webfont.woff2") format("woff2"), url("../foticos/Hello-Notie.otf") format("opentype");
}

h1, h3, h4 {
  text-align: center;
  font-family: Notie;
  font-weight:lighter;
  letter-spacing:1.5px;
  color:rgb(237, 183, 189);
  text-shadow: 4px 3px 6px #f5f7b7;
  transform: scale(1.7);
  transition: 03s;
}

h2 {
  text-align: center;
  font-family: Notie;
  font-weight:lighter;
  letter-spacing:1.5px;
  text-shadow: 4px 3px 6px #f5f7b7;
  transform: scale(1.7);
  color: #bd3e68;
  transition: 0.4s;
}

h3 {
  padding-top: 20px;
  padding-bottom: 7px;
}

h2:hover {
  color:rgb(237, 183, 189);
}

h1:hover, h3:hover, h4:hover {
  color:#f5c4c4;
  opacity: 1;
}

p, a {
  margin-top:0;
  font-family: KidDos;
  font-size:18px;
  color:#3b290b;
  line-height:1.5;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color:rgb(237, 183, 189);
  cursor: pointer;
}

button {
  color: white;
  transition: 0.3s;
  padding: 1px 6px;
  border-radius: 22px;
  border-color:white;
  border-style: solid;
  background-color: rgb(237, 183, 189);
}

button:hover {
  background-color:white;
  color:rgb(237, 183, 189);
  transform: scale(1.1);
  cursor:pointer;
}

.apple-button {
  position: relative;
  display: inline-block;
  left: 22.5px;
  padding: 11px;
  padding-left:35px;
  background-color: white;
  color: rgb(237, 183, 189);
  border-color: rgb(237, 183, 189);
  border-radius: 22px;
  border-style: solid;
  cursor: pointer;
  transition: transform .6s, color .6s, background-color .6s;
  /* Agregado por chat */
  font-weight: bold;
  font-size: 14px;
  z-index: 1;
}

.apple-button:hover{
  background-color: rgb(237, 183, 189);
  color: white;
  border-color:white ;
  transform: scale(1.1) rotate(5deg);
}

.apple-button:active, a:active, button:active{
  opacity: 0.9;
}

.apple-button::before {
   content: "";
   background-image: url("foticos/appleparche.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   position: absolute;
    top: 50%;
   width: 92px;
   height: 92px;
    transform: translateY(-75%) rotate(7deg);
    left:-40px;
   z-index: 2;
   transition: transform .6s;
}

.apple-button:hover::before{
  transform: translateY(-75%) rotate(-17deg)
} 

#photowrapper {
  max-width:95%;
  margin:0 auto;
  display: grid;
  grid-template-areas:
    "one two three four five"
    ;
  grid-template-columns:repeat(5, 1fr);
  gap:12px;
  padding:10px ;
  box-sizing:border-box;
  overflow: hidden;
}

.one, .two, .three, .four, .five {
  display: flex;
  flex-direction:column;
  overflow: hidden;
  gap: 10px;
}
.one {
  grid-area:one;
}
.two {
  grid-area: two;
}
.three {
  grid-area:three;
}
.four {
  grid-area:four;
}
.five {
  grid-area:five;
}

.horizontal, .vertical, .screenshot, .video {
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position:center;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height:auto;
}

.vertical .content {
  transform:scale(0.95);
  transform-origin:center;
}

.video .content {
  transform:scale(0.85);
  transform-origin:center;
}

img, iframe, video {
    width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.frame {
  position:absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index:2;
  transform: scale(1.05);
  transform-origin: center;
  pointer-events: none;
}