@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  overflow: hidden;
  font-family: "Oswald", sans-serif;
  background-color: burlywood;
  background-image: url(images/barrel.png);
  background-repeat: repeat;
  background-size: 5%;
  border-radius: 50px;
}
.container {
  margin: 7.5% 10%;
  position: relative;
}
.pirate {
  height: 75vh;
}
#pirate {
  height: 100%;
  width: 100%;
}
#sprechblase {
  position: absolute;
  top: -15%;
  left: 65%;
  height: 300px;
  width: 600px;
  transform: rotate(180deg);
}
#sprechblase2 {
  position: absolute;
  top: -17%;
  left: 7%;
  height: 400px;
  width: 600px;
  z-index: 10;
}
#cta {
  position: absolute;
  top: -10%;
  left: 69%;
  height: 300px;
  width: 600px;
  font-size: 1.4rem;
  text-align: center;
}
#cta2 {
  position: absolute;
  top: -10%;
  left: 5%;
  height: 300px;
  width: 600px;
  font-size: 1.4rem;
  text-align: center;
  z-index: 10;
}
button {
  text-decoration: none;
  font-family: sans-serif;
  font-size: 20px;
  padding: 2px 4px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  margin-top: 5px;
  font-size: 1.4rem;
  font-family: "Oswald", sans-serif;
}
#button {
  background-color: #f4b925;
}
#button2 {
  background-color: rgb(223, 96, 11);
  border: white;
}
#button:before {
  content: "";
  background-color: white;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  position: absolute;
  transform: translateX(-100%) rotate(45deg);
  transition: all 0.3s;
  animation: animateEffect 2s ease-in-out infinite;
}

@keyframes animateEffect {
  from {
    transform: translateX(-100%) rotate(45deg);
  }
  to {
    transform: translateX(100%) rotate(45deg);
  }
}
#button2:before {
  content: "";
  background-color: white;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  position: absolute;
  transform: translateX(100%) rotate(45deg);
  transition: all 0.3s;
  animation: animateEffect2 2s ease-in-out infinite;
}

@keyframes animateEffect2 {
  from {
  }
  to {
    transform: translateX(-100%) rotate(45deg);
  }
}

.hide {
  display: none;
}
.translation {
  position: absolute;
  top: 5%;
  left: 1%;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 25px;
  border-radius: 5px;
}
.translation a {
  font-size: 1.25rem;
  text-decoration: none;
  color: white;
  font-weight: bold;
}
.translation a:hover {
  color: rgb(231, 198, 8);
}
/* Mobile Message */
.mobile-message {
  display: none;
}

/* Media Query: Mobile Devices */
@media screen and (max-width: 800px) {
  .mobile-message {
    position: absolute;
    height: 100vh;
    width: 100%;
    background-color: rgb(0, 0, 0);
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 100;
  }
}