@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&display=swap");

:root {
  --text: #ffffff;
  --background: #1f1f1f;
  --background-secondary: color-mix(in srgb, var(--background) 80%, white);
  --primary: #ffe66d;
  --secondary: #57bcff;
  --accent: #ffbf00;
  --br: 1rem;
}

body {
  background-color: var(--background);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Inter", sans-serif;
}

html {
  color-scheme: dark;
}

h1 {
  text-align: center;
  font-size: clamp(10px, 6vw, 3.125rem);
  font-weight: 600;
}

h2 {
  font-size: clamp(10px, 5vw, 3rem);
  margin-top: 4rem;
}

h3 {
  margin-bottom: 0.5rem;
}

a.button,
button {
  border: none;
  color: var(--background);
  background-color: var(--accent);
  padding: 1rem 2rem;
  border-radius: var(--br);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  border: 0.2rem solid var(--accent);
  transition: transform 0.2s;

  &:hover {
    background-color: var(--background);
    color: var(--accent);
  }
}

.delete {
  background-color: red;
  text-decoration: none;
  color: var(--secondary-grid);
  font-weight: 800;
  padding: 0.2rem 0.4rem;
  border-radius: var(--br);
}

.cta {
  animation: bounce-reverse 0.4s;
}

.cta:hover {
  animation: bounce forwards 0.4s;
}

.center {
  display: flex;
  justify-content: center;
}

.space {
  display: flex;
  justify-content: space-evenly;
  gap: 1rem;
}

nav {
  display: flex;
  width: 90vw;
  justify-content: space-evenly;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
  margin-bottom: 3rem;

  & > a > #logo {
    width: clamp(10px, 20vw, 15rem);
    height: auto;
  }

  & > div {
    flex-grow: 1;
    display: flex;
    justify-content: right;
    gap: 2rem;
  }

  & > div > a {
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 1.2rem;
    transition: transform 0.2s;

    &:hover {
      color: var(--secondary);
    }
  }
}

.card {
  --width: clamp(10px, 80vw, 30rem);
  display: block;
  background-color: var(--background-secondary);
  border-radius: var(--br);
  width: var(--width);
  min-height: calc(var(--width) * 0.8);
  text-decoration: none;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: translate 0.2s;

  & > img {
    aspect-ratio: 1.5;
    object-fit: cover;
    width: 100%;
    border-radius: var(--br) var(--br) 0 0;
  }

  & > h4 {
    text-align: center;
    color: var(--text);
    font-size: 1.5rem;
    margin: 0.5rem;
  }

  &:hover {
    translate: 0 -1rem;
  }
}

form {
  background-color: var(--background-secondary);
  padding: 1rem 4rem;
  border-radius: var(--br);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  button {
    margin-top: 2rem;
  }

  input {
    margin-bottom: 2rem;
  }
}

dialog {
  border: none;
  border-radius: var(--br);
  background-color: var(--background-secondary);
  padding: 0;
  box-shadow: color-mix(in srgb, black 50%, transparent) 0 1rem 29px 0;
}

table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 1rem;
}

#carousel {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  & > div {
    position: relative;
    max-width: clamp(10px, 95vw, 80rem);
    overflow-x: scroll;
    display: flex;
    gap: 1rem;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
    mask-image: linear-gradient(to right, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);

    & > img {
      width: 8.2rem;
      min-width: 8.2rem;
      height: 4.8rem;
      border-radius: var(--br);
      object-fit: cover;
      cursor: pointer;
      border: solid 0.3rem transparent;
    }

    & > img#focus {
      cursor: auto;
      border: solid 0.3rem var(--primary);
    }
  }
  & > img {
    width: clamp(10px, 85vw, 46.125rem);
    height: clamp(10px, 50vw, 27rem);
    border-radius: var(--br);
    object-fit: cover;
    box-shadow: color-mix(in srgb, var(--secondary) 50%, transparent) 0px 0px 29px 0px;
  }
}

#calendar > tbody {
  --free: color-mix(in srgb, var(--secondary) 60%, white);
  --unavailable: gray;
  & > tr > th {
    text-align: center;
    font-size: clamp(10px, 5vw, 2rem);

    & > button {
      background: none;
      border: none;
      padding: 0;
      color: var(--text);
      font-weight: 900;
      font-size: 1.5rem;
      cursor: pointer;

      &:hover {
        color: var(--accent);
      }
    }
  }

  & > tr > td {
    text-align: center;
    width: 4rem;
    height: 1rem;
    border-radius: var(--br);
  }

  & > tr.data > td {
    height: clamp(10px, 8vw, 4rem);
    background-color: var(--free);
    color: black;
    font-size: clamp(1px, 5vw, 2rem);
  }

  & > .legend > td {
    text-align: left;
  }
}

#cost {
  text-align: center;
  & > h4 {
    font-size: 1.6rem;
  }
  & > h5 {
    margin: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
  }
}

#info-grid {
  --length: clamp(10px, 90vw, 60rem);
  width: var(--length);
  margin-bottom: 1rem;
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  gap: 1rem;
  font-size: clamp(1px, 4vw, 1.7rem);

  --primary-grid: color-mix(in srgb, var(--primary) 80%, white);
  --secondary-grid: color-mix(in srgb, var(--secondary) 50%, black);

  & > p,
  & > div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-grid);
    color: var(--background);
    padding: clamp(10px, 2vw, 2rem);
    margin: 0;
    text-align: center;
    border-radius: var(--br);
    font-weight: 700;
    font-size: 1em;

    & > ul {
      margin: 0;
      list-style: none;
    }
  }
}

@media screen and (max-width: 760px) {
  #info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

#activities-list {
  display: flex;
  flex-wrap: wrap;
  width: clamp(10px, 90vw, 100rem);
  justify-content: space-evenly;
  gap: 2rem;
}

@keyframes bounce {
  from {
    scale: 1;
  }

  40% {
    scale: 1.6;
  }

  to {
    scale: 1.4;
  }
}

@keyframes bounce-reverse {
  from {
    scale: 1.4;
  }

  40% {
    scale: 0.8;
  }

  to {
    scale: 1;
  }
}