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

:root {
  --negCloudWidth: -1024px;
  --negCloudHeight: -1024px;
}

/* Body **********************************/
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  
  overflow: hidden; /* Hide scrollbars */
  background-color: #4cabff;
  color: blue;
  font-family: "Verdana", sans-serif;
}

/* Heading 1 **********************************/
h1 {
  display: inline-block;
  position: relative;
  
  color: DarkGreen;
  font-family: "Rubik Bubbles";
  font-size: 500%;
  
  transition: 0.1s;
}
.bob {
  animation: bob 2s alternate infinite ease-in-out;
}
@keyframes bob {
  to { transform: translatey(5%);}
}
h1:hover {
  font-size: 550%;
}

.hover-container {
    display: inline-block;
    position: relative;
}

/* Frogs **********************************/
.frogs {
  align-items: center;
  position: absolute;
  top: 60%;
}

/* Clouds **********************************/
.clouds {
  left: var(--negCloudWidth);
  position: absolute;
  animation: cloudMovement 60s linear;
  z-index: 100; /* Brings to the front */
  pointer-events: none; /*stops interaction*/
}
@keyframes cloudMovement {
  from {left: var(--negCloudWidth);}
  to {left: 100%;}
}

/* Font **********************************/
.rubik-bubbles-regular {
  font-family: "Rubik Bubbles", system-ui;
  font-weight: 400;
  font-style: normal;
}