* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --fire-brick: hsla(0, 68%, 42%, 1);
  --bistre: hsla(28, 28%, 13%, 1);
  --baby-powder: hsla(100, 100%, 99%, 1);
  --old-gold: hsla(51, 48%, 52%, 1);
  --drab-dark-brown: hsla(42, 28%, 19%, 1);
}

@media screen and (max-width: 500px) {
  body .container {
    grid-template-rows: 200px 2fr;
    grid-template-columns: 1fr;
  }

  body .sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row: 1 / 2;
    align-content: center;
    justify-content: center;
  }

  body .sidebar-nav {
    margin: 20px;
    display: grid;
    gap: 10px;
  }

  body .sidebar-nav li {
    padding: 5px;
    font-size: 1.5rem;
    border: 3px solid var(--fire-brick);
    border-radius: 5px;
  }

  body .mainarea {
    grid-row: 2 / 3;
  }

  body form {
    width: 100%;
  }
}

html {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  color: var(--bistre);
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

p,
li {
  font-size: 1.25rem;
  font-weight: 400;
}

.container {
  margin: 15px;
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(100px, 200px) 1fr;
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background: var(--baby-powder);
  color: var(--drab-dark-brown);
}

.side-img {
  width: 80%;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
}

.sidebar-nav li {
  padding: 10px;
  border-radius: 5px;
  font-size: 1.5rem;
  font-weight: 700;
}

.sidebar-nav li:hover {
  background: var(--fire-brick);
  color: var(--baby-powder);
}

.sidebar-nav li a {
  display: block;
  width: 100%;
  height: 100%;
}

.lineup-info {
  margin: 10px;
}

table {
  border-collapse: collapse;
}

.lineup-table {
  font-family: inherit;
  border: 1px solid var(--fire-brick);
  margin: 10px;
  width: clamp(300px, 65%, 700px);
}

.lineup-table thead {
  background: var(--fire-brick);
  color: var(--baby-powder);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  border-bottom: 2px solid var(--bistre);
}

.lineup-table td {
  padding: 5px;
  font-size: 1.25rem;
  border-top: 1px dotted var(--old-gold);
  border-bottom: 1px dotted var(--old-gold);

}

.lineup-table th {
  padding-top: 8px;
  padding-bottom: 8px;
}

.lineup-table th:hover {
  color: var(--old-gold);
}

.show-name {
  font-size: 1.4rem;
  font-weight: 700;
}

.show-name a {
  color: var(--fire-brick);
  display: block;
  width: 100%;
  height: 100%;
}

.show-name:hover {
  background: var(--old-gold);
  color: var(--fire-brick);
}

form {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 2px solid var(--fire-brick);
  border-radius: 10px;
  width: clamp(300px, 50%, 800px);
}

label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 700;
}

.special-text {
  color: red;
  font-weight: 700;
}

.form-group {
  font-size: 1.25rem;
  display: flex;
  justify-content: space-between;
}

.form-control {
  padding: 5px;
  width: 80%;
  font-size: 1.25rem;
  border-radius: 5px;
  font-family: inherit;
}

.submit-btn {
  font-family: inherit;
  font-size: 1.25rem;
  background: var(--fire-brick);
  color: var(--baby-powder);
  border: none;
  border-radius: 10px;
  width: 25%;
  height: 50px;
  align-self: flex-start;
}

.show-detail-list {
  margin-bottom: 15px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
}

.delete-btn, .update-btn {
  font-family: inherit;
  font-size: 1.25rem;
  padding: 10px;
  margin: 10px;
  border: none;
  border-radius: 5px;
}

.delete-btn {
  background: var(--fire-brick);
  color: var(--baby-powder);
}

.update-btn {
  background: var(--old-gold);
  color: var(--drab-dark-brown);
}

.delete-form {
  border: none;
}

.welcome {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fire-brick);
}

.show-archive-link {
  padding: 20px;
  display: flex;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fire-brick);
}