/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.2s ease-in-out;
}

/* Variables */
:root {
  --bg-rgb: 29, 35, 38; /* #1D2326 */
  --bg-alt-rgb: 36, 43, 45; /* #242B2D */
  --fg-rgb: 230, 231, 230; /* #E6E7E6 */
  --fg-alt-rgb: 206, 211, 220; /* #CED3DC */
  --primary-rgb: 126, 154, 171; /* #7E9AAB */
  --secondary-rgb: 190, 66, 52; /* #BE4234 */
  --tertiary-rgb: 150, 176, 136; /* #96B088 */

  --bg: rgb(var(--bg-rgb));
  --bg-alt: rgb(var(--bg-alt-rgb));
  --fg: rgb(var(--fg-rgb));
  --fg-alt: rgb(var(--fg-alt-rgb));
  --primary: rgb(var(--primary-rgb));
  --secondary: rgb(var(--secondary-rgb));
  --tertiary: rgb(var(--tertiary-rgb));
}

/* Base styles */
body {
  background-color: var(--bg-alt);
  color: var(--fg);
  font-family: sans-serif;
  line-height: 1.5;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4em;
  gap: 3em;
}

/* Container styles */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 15em;
  padding: 2em 1em;
  border-radius: 1em;
  background-color: var(--bg);
  box-shadow: 0 3px 8px -4px rgba(0, 0, 0, 0.15);
}

.container:hover {
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.2);
}

/* Headings */
.container h2 {
  font-size: 1.2rem;
  text-transform: uppercase;
  margin: 0.6em;
  font-weight: 700;
}

.general-container h2 {
  color: var(--tertiary);
}
.swimming-container h2 {
  color: var(--primary);
}
.lacrosse-container h2 {
  color: var(--secondary);
}

/* Links */
.container a {
  width: 100%;
  padding: 0.3em;
  margin: 0.2em 0;
  color: var(--fg);
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0.5em;
  position: relative;
  z-index: 1;
}

.container a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: -1;
  border-radius: 0.5em;
  transition: 0.2s ease-in-out;
}

.container a:hover::before {
  width: 100%;
}

.general-container a:hover::before {
  background: rgba(var(--tertiary-rgb), 0.05);
}

.swimming-container a:hover::before {
  background: rgba(var(--primary-rgb), 0.05);
}

.lacrosse-container a:hover::before {
  background: rgba(var(--secondary-rgb), 0.05);
}

.general-container a:hover {
  color: var(--tertiary);
}

.swimming-container a:hover {
  color: var(--primary);
}

.lacrosse-container a:hover {
  color: var(--secondary);
}

/* Clock */
.clock {
  text-align: center;
  margin-top: 4em;
}

.clock-time {
  font-size: 5rem;
  font-weight: 500;
  letter-spacing: 4px;
}

.clock-date {
  font-size: 1.2rem;
  margin-top: 0.3em;
  letter-spacing: 2px;
}

/* Search */
.search {
  position: relative;
  width: 550px;
  margin: 3em auto;
}

.search-input {
  width: 100%;
  padding: 0.8em 1.2em;
  font-size: 1.1rem;
  color: var(--fg);
  background: var(--bg);
  border: none;
  border-radius: 1em;
  outline: none;
  box-shadow: 0 3px 8px -4px rgba(0, 0, 0, 0.15);
}

.search-input:hover {
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.2);
}

.search-input:focus {
  background: linear-gradient(
    145deg,
    var(--bg),
    rgba(var(--primary-rgb), 0.05)
  );
}

.search-input::placeholder {
  color: var(--fg-alt);
  opacity: 0.7;
}

/* Icon styles */
.container a i {
  margin-right: 0.5em;
  width: 1.2em; /* Makes icons align better */
}

.container h2 i {
  margin-right: 0.5em;
}

.search-icon {
  position: absolute;
  right: 1.2em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-alt);
  opacity: 0.7;
}

.shortcut-hints span i {
  margin-right: 0.4em;
  width: 1.2em;
}

.clock-date i {
  margin-right: 0.5em;
}

/* Media queries */
@media (max-width: 880px) {
  main {
    flex-direction: column;
    padding: 2em 1em;
    gap: 2em;
  }

  .container {
    width: 100%;
  }

  .search {
    width: 90%;
  }
}