/* press-start-2p-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url('press-start-2p-v16-latin-regular.woff2') format('woff2');
}

html {
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

label {
  text-decoration: 2px dotted underline;
  margin-top: 1rem;
}

img {
  max-width: 100%;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  background: white;
  font-size: 1rem;
  padding: 0.5rem;

  --progress-bar-position: 0%;
  background-image: linear-gradient(to bottom, white 85%, transparent 85%), linear-gradient(to right, #063f25 var(--progress-bar-position), white var(--progress-bar-position));

  &.saving {
    cursor: not-allowed;
    animation: progress-bar 350ms linear infinite;
  }
}

textarea {
  width: 100%;
  resize: vertical;
  min-height: 3rem;
  height: 3rem;
}

select {
  width: 100%;
}

a {
  color: #0094fb;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.15;
}

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 1rem;
}

li {
  margin-bottom: 0.5rem;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Press Start 2P', sans-serif;
  line-height: 1.65;
  background: #063f25;

  & > * {
    width: 780px;
    max-width: 100%;
    background: #daf6f9;
  }
}

header, footer {
  img {
    object-fit: cover;
    max-height: 40vw;
    width: 100%;
  }
}

header {
  background: #fff;

  hgroup {
    position: relative;
    transform: rotate(-3deg);
  }

  h1 {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 0;
    margin: 0;
    padding: 1.5rem 0.5rem;

    /* Background */
    &:nth-child(1) {
      color: #0255f8;
    }
      
    /* Splashy water */
    &:nth-child(2) {
      color: #001141;
      animation: splashy 4s ease-in-out infinite;
    }

    /* Outline */
    &:nth-child(3) {
      color: transparent;
      -webkit-text-stroke: 2px #033223;
    }
    
    /* Just saving space! */
    &:nth-child(4) {
      color: transparent;
      opacity: 0;
      position: relative;
    }

    strike {
      animation: struck 2.4s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
      position: relative;
      text-decoration: none;

      &::before {
        animation: strike 1.1s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
        content: "";
        position: absolute;
        width: 100%;
        height: 10%;
        background: red;
        top: 45%;
      }
    }
  }
}

main {
  section {
    padding: 0.5rem 1.5rem;
  }
}

hr {
  background: #063f25;
  height: 4px;
}

main strong {
  color: #fe8906;
}

footer {
  font-size: 0.875rem;
  text-align: center;
}

.error {
  color: red;
}

.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  input {
    font-size: 1.5rem;
  }

  button {
    font-size: 1.5rem;
    padding: 0.5rem;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
  }
}

@keyframes splashy {
	0%,
	100% {
		clip-path: polygon(
			0% 25%,
			16% 24%,
			13% 30%,
			74% 70%,
			80% 91%,
			84% 109%,
			120% 62%,
			120% 120%,
			0% 100%
		);
	}

	50% {
		clip-path: polygon(
			0% 60%,
			5% 75%,
			24% 76%,
			51% 72%,
			87% 50%,
			104% 35%,
			120% 36%,
			120% 120%,
			0% 100%
		);
	}
}

@keyframes struck {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}

@keyframes strike {
  0% {
    width: 0;
    left: 0;
    right: auto;
  }
  100% {
    left: 0;
    right: auto;
    width: 100%;
  }
}

@keyframes progress-bar {
    0% { --progress-bar-position:   0%; }
   10% { --progress-bar-position:  10%; }
   20% { --progress-bar-position:  20%; }
   30% { --progress-bar-position:  30%; }
   40% { --progress-bar-position:  40%; }
   50% { --progress-bar-position:  50%; }
   60% { --progress-bar-position:  60%; }
   70% { --progress-bar-position:  70%; }
   80% { --progress-bar-position:  80%; }
   90% { --progress-bar-position:  90%; }
  100% { --progress-bar-position: 100%; }
}

@media (max-width: 740px) {
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 2.4rem;
  }

  select {
    font-size: 0.75rem;
  }
}

@media (max-width: 600px) {
  select {
    font-size: 0.6rem;
  }
}