body {
  margin: 0;
  background-color: #1a1b26;
  font-family: cousine, courier;
}

.top_image_holder {
  display: flex;
  justify-content: space-evenly;
}

.top_image_button {
  height: 20vh;
  display: flex;
  background: #1a1b26;
  border: none;
  max-width: 100%;
}

.top_image_button:hover {
  cursor: pointer;
  content: url("shawty-header-fast-loop.gif");
}

.top_image_button img {
    max-width: 100%;
}

.interactable_area {
  height: 75vh;
  display: grid;
  gap: 5rem;
  grid-template-columns: repeat(5, 1fr);
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.vertical_side_panel {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  padding-right: 2rem;
  border-right: solid;
  border-width: 3px;
  border-color: #fd1d75;
  text-align: center;
}

.vertical_side_panel h3 {
  color: cyan;
}

.vertical_side_panel p {
  font-size: 18px;
  color: cyan;
  text-align: left;
}

.vertical_side_linktree {
  padding-left: 2rem;
  border-left: solid;
  overflow-y: auto;
  border-width: 3px;
  border-color: #fd1d75;
  text-align: center;
}

.linktree_button_holder {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vertical_side_linktree p {
  background: #292e42;
  border: solid;
  border-color: #c0caf5;
  border-width: 3px;
  padding: 1rem;
  font-size: 18px;
  color: cyan;
}

.linktree_button {
  background: #292e42;
  border: solid;
  border-color: #c0caf5;
  border-width: 3px;
  padding: 1rem;
  font-size: 18px;
  color: cyan;
  font-family: cousine;
  text-decoration: none;
}

.linktree_button:hover {
  cursor: pointer;
  text-decoration: underline;
  background: #fd1d75;
  color: #c0caf5;
}

.center_panel {
  grid-column: span 3;
  word-wrap: break-word;
}

.center_panel_image {
  height: 10vh;
  border-bottom: solid;
  border-width: 3px;
  border-color: #fd1d75;
  /* width: auto; */
  display: flex;
  justify-content: space-evenly;
}

.center_panel_image img {
  max-width: 100%;
}

.center_panel_welcome_text {
  height: 10vh;
  border-bottom: solid;
  border-width: 3px;
  border-color: #fd1d75;
  width: auto;
  display: flex;
  justify-content: space-evenly;
  font-size: 60px;
  color: #fd1d75;
}

.center_panel_grid {
  padding-top: 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5rem;
  align-content: center;
}

.center_panel_grid button:hover {
  cursor: pointer;
}

.panel_button {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  border: solid;
  border-color: #c0caf5;
  min-width: 0;
  min-height: 0;
  background: #1a1b26;
  text-decoration: none;
  overflow-x: auto;
}

.panel_button_title {
  overflow-wrap: normal;
  color: #3ecdef;
  border-bottom: solid;
  border-color: #fd1d75;
  border-width: 2px;
  font-family: cousine;
}

.panel_button_text {
  font-size: 16px;
  color: cyan;
  font-family: cousine;
  padding-bottom: 1rem;
  overflow-wrap: normal;
}

.panel_button_text p { /*only for lists*/
  color: cyan;
  text-align: left;
  margin: 0px;
}

.panel_button_text h2 {
  color: #c0caf5;
  padding-bottom: 1rem;
  font-size: 16px;
}

.panel_widget img {
  object-fit: contain;
}

.panel_image_widget {
  background: #1a1b26;
  grid-column: span 2;
  grid-row: span 2;
  text-align: center;
  border: none;
  border-color: #c0caf5;
}

.panel_image_widget img {
  max-height: 100%;
  max-width: 100%;
}

/* remove sidebars if not 1920x1080 */
@media (max-width: 1900px) {
  .vertical_side_panel {
    display: none;
  }

  .vertical_side_linktree {
    display: none;
  }

  .center_panel {
    grid-column: span 5;
  }

  .panel_button_title {
    font-size: 10px;
  }

  .panel_button_text {
    font-size: 10px;
  }

  .panel_button_text h2 {
    color: #c0caf5;
    padding-bottom: 1rem;
    font-size: 16px;
  }

  .panel_button_text p { /*only for lists*/
    font-size: 15px;
  }

  .panel_button_text {
    font-size: 15px;
  }
}

/* stack vertically on portrait mobile */
@media (max-width: 760px) {
  /*prevent squashing*/
  .top_image_button img {
    max-height: 50%;
    padding-top: 50px;
  }

  .center_panel_image {
    display: none;
  }

  .center_panel_grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }

  .center_panel_welcome_text {
    display: none;
  }

  .panel_button {
    grid-column: span 2;
  }

  .panel_image_widget img {
    max-height: 100%;
    max-width: 100%;
  }

  .panel_button_text {
    font-size: 15px;
  }

}