@font-face {
  font-family: 'Girlie';
  src: url('/assets/fonts/girlie.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/bricolage.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  font-family: 'Bricolage', sans-serif;
  /*background-image: url("/assets/images/background.png");*/
  /*background-size: cover;*/
  /*background-position: center;*/
  background-color: #133152;
  height: 100dvh;
  width: 100dvw;
  color: white;
  text-align: center;
}

.header {
  height: 25dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header h1 {
  font-family: 'Girlie', cursive;
  font-size: 5rem;
}

.content {
  height: 75dvh;
  position: relative;
  overflow: hidden;
}

.whale {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 2rem;
}

.whale img {
  width: 100%;
  max-width: 600px;
}

.coral-1 {
  position: absolute;
  left: -125px;
  bottom: -50px;
  transition: left 0.3s ease-in-out;
}

.coral-1 img {
  width: 300px;
}

.coral-2 {
  position: absolute;
  right: -100px;
  bottom: -50px;
  transition: right 0.3s ease-in-out;
}

.coral-2 img {
  width: 300px;
}

.coral-3 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
}

.coral-3 img {
  width: 350px;
}

.fish-1 {
  position: relative;
  top: 35px;
  left: 275px;
  right: 0;
}

.fish-1-1 {
  translate: 44px 64px;
  width: 32px;
}

.fish-1-2 {
  translate: 14px 36px;
  width: 12px;
}

.fish-1-3 {
  translate: 10px 20px;
  width: 8px;
}

.fish-1-4 {
  translate: -8px 4px;
  width: 4px;
}

.fish-1-5 {
  translate: -2px 48px;
  width: 50px;
}

.fish-2 {
  position: absolute;
  left: 0;
  right: 50px;
  bottom: 135px;
}

.fish-2 img {
  width: 50px;
}

.fish-3 {
  position: absolute;
  left: 230px;
  right: 0;
  bottom: 190px;
}

.fish-3 img {
  width: 50px;
}