:root {
  --verydark #0f2f57;
  --dark #1a3f73;
  --medium #598dba;
  --light: #4caafc;
  --verylight #6bbaff;
}

html {
    will-change: transform;
}

h1 {
  font-size: 1.875rem !important; /* Tailwind's text-3xl */
  font-weight: 700 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
  color: #0f2f57 !important;
}

h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.75rem !important;
  color: #1a3f73 !important;

}

h3 {
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  color: #598dba !important;
}

h4 {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  color:blue;
}

p {
  margin-bottom: 1rem;
}

ul, ol {
  margin-left: 1.25rem;
  padding-left: 1rem;
}

strong {
  font-weight: 600;
}
.penguin {
  animation: wobble 20s linear infinite alternate; 
}
@keyframes wobble {
  0% { transform: rotate(8deg) translate(0,0);}
  50% { transform: rotate(-8deg) translate(-10px,300px); }
  100% { transform: rotate(8deg) translate(0,0);}
}

.penguin .eye {
  animation: lookAround 5s infinite alternate;
}
@keyframes lookAround {
  0% { transform: translateX(0); }
  25% { transform: translateX(5px); } /* Look right */
  50% { transform: translateX(-5px); } /* Look left */
  75% { transform: translateX(0); } /* Back to center */
}

.penguin .blink {
  visibility: hidden;
}

.penguin .leftflipper {
  animation: anim_left-flipper 5s infinite alternate;
}
@keyframes anim_left-flipper {
  0% { transform: translateX(0); }
  25% { transform: translateX(4px); } 
  50% { transform: translateX(-4px); } 
  75% { transform: translateX(0); } 
}

.penguin .rightflipper {
  animation: anim_right-flipper 5s infinite alternate;
}
@keyframes anim_right-flipper {
  0% { transform: translateX(0); }
  30% { transform: translateX(6px); } 
  55% { transform: translateX(-6px); } 
  75% { transform: translateX(0); } 
}