@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');

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

:root {
  --hue: 15;
  --bkg: var(--hue) 50% 96%;
  --text: var(--hue) 70% 9%;
  --dark: var(--hue) 70% 3%;
  font-family: 'PT Serif', serif;
}

body {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-family: 'PT Serif', serif;
  animation: fadeInAnimation ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Contenedores */

.wrapper {
  padding: 0;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  }

.regreso {
  position: fixed;
  cursor: pointer;
  background: none;
  transform: scale(0.5);
  right: -5px;
  top: -10px;
  z-index: 1;
}

.control {
  position: fixed;
  cursor: pointer;
  background: none;
  transform: scale(0.15);
  z-index: 2;
  right: -17em;
  bottom: -10em;
}

.image-container {
  display: flex;
  justify-content: center;
  position: relative;
  margin: auto;
  padding: 0;
  width: 700px;
  height: 700px;
}

/*  No se me vayan a mover*/

.image-container * {
  position: absolute;
}

.portada {
  top: 0;
  max-width: 100%;
  width: 78.2%;
  height: 100%;
}

/* Textos referencia de cada link activados */

.image-container>a[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: relative;
    white-space: nowrap;
    font-family: 'PT Serif';
    font-weight: 500;
    left: -40px;
    top: -25px;
    background: none;
    padding: 5px;
    color: #e2a776;
    font-size: 16px;
  }


.image-container>button[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: relative;
    white-space: nowrap;
    font-family: 'PT Serif';
    font-weight: 500;
    left: -20px;
    top: -54px;
    background: none;
    padding: 5px;
    color: #e2a776;
    font-size: 16px;
  }
/* Botones y link definidos */

.btn {
    position: absolute;
    border-radius: 50%;
    appearance: button;
    cursor: pointer;
    background-color: #e5d6d725;
    text-decoration: none !important;
    transition: background-color 0.4s ease-in-out;
}

.btn:is(:hover, :focus) {
    background-color: #fff3f360;
}

#punta-up {
    left: 40%;
    top: 6%;
    width: 14%;
    height: 14%;
}

#punta-left {
    left: 7%;
    top: 35%;
    width: 12%;
    height: 12%;
}

#punta-right {
    left: 82%;
    top: 34.5%;
    width: 12%;
    height: 12%;
}

@media only screen and (min-width: 1400px) and (min-height: 850px) {
  .image-container {
    width: 820px;
    height: 820px;
  }
}