@font-face {
  font-family: 'Press Start 2P';
  src: url('https://static.igem.wiki/teams/5406/fonts/press-start-2p/pressstart2p-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --color-background: #008080;
  --color-white: #fdffff;
  --color-grey_light: #c3c3c3;
  --color-grey_dark: #818181;
  --color-black: #000000;
  --color-blue: #010081;
  --color-pink: #FF0081;
  --color-dark-blue: #000066;
}

p,ul{
  font-size: 13px;
  color:black;
}
body, button, select {
  font-family: 'Press Start 2P', Arial, sans-serif;
  background-color: var(--color-background);
}

/* Background image */
.hps-background {
  background-image: url('https://static.igem.wiki/teams/5406/images/hps/tetr/hptetris.png');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  position: relative;
}
/* Button styles */
.hps-button {
  position: absolute;
  width: 9%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.hps-button img {
  width: 100%;
  height: auto;
}

.hps-button-caption {
  position: absolute;
  color: var(--color-white);
  text-align: center;
  width: 100%;
  font-size: 0.52vw;
  transition: color 0.3s ease;
}

/* Button hover effects */
.hps-button:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

.hps-button:hover .hps-button-caption {
  color: var(--color-pink);
}

/* Button positions (as you provided) */
#button1 { top: 18%; left: 19%; }
#button2 { top: 27%; left: 32%; }
#button3 { top: 57%; left: 45%; }
#button4 { top: 33%; left: 65%; }
#button5 { top: 23%; left: 49%; }

/* Caption positions (as you provided) */
#button1 .hps-button-caption { top: 46%; }
#button2 .hps-button-caption { top: 75%; }
#button3 .hps-button-caption { top: 47%; }
#button4 .hps-button-caption { top: 47%; text-align: left; }
#button5 .hps-button-caption { top: 5%; }

/* Updated dropdown styles */
.hps-dropdown {
  margin-bottom: 20px;
  position: relative;
}

.hps-dropdown select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  background-color: var(--color-black);
  color: var(--color-white);
  border: 2px solid var(--color-grey_light);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.hps-dropdown::after {
  content: '\25BC';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--color-white);
  pointer-events: none;
}

.hps-dropdown select:focus {
  outline: none;
  border-color: var(--color-pink);
}

.hps-dropdown select option {
  background-color: var(--color-black);
  color: var(--color-white);
}

.hps-dropdown select option:hover,
.hps-dropdown select option:focus {
  background-color: var(--color-blue);
}
/* Faux window styles */
.faux-window {
  position: fixed;
  width: 97%;
  height: 95%;
  background-color: var(--color-white);
  border: 7px solid var(--color-grey_light);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  z-index: 1000;
  display: none;
  transition: top 0.3s ease-out;
}


.window-titlebar {
  background-color: var(--color-blue);
  color: var(--color-white);
  padding: 2px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.window-title {
  color: var(--color-white);
  font-size: 14px;
  margin-right: auto;
}

.close-button {
  width: 24px;
  height: 24px;
  cursor: pointer;
}


.window-content {
  height: calc(100% - 30px);
  overflow-y: auto;
  background-color: var(--color-white);
  border: 2px inset var(--color-grey_light);
}

.content-area {
  padding: 20px;
  color: var(--color-black);
}

/* Scrollbar styles */
.window-content::-webkit-scrollbar {
  width: 16px;
}

.window-content::-webkit-scrollbar-track {
  background-color: var(--color-grey_dark);
  width: 20px;
}

.window-content::-webkit-scrollbar-thumb {
  background-color: var(--color-grey_light);
  width: 6px;
}

.window-content::-webkit-scrollbar-button { 
  display: none;
}

/* Retro-styled dropdown */
.hps-dropdown {
  margin-bottom: 20px;
}

.hps-dropdown select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  background-color: var(--color-black);
  color: var(--color-white);
  border: 2px inset var(--color-grey_dark);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M0 0l4 4 4-4z' fill='%23000000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Carousel styles */
.carousel {
  margin-top: 20px;
  width: 100%;
  max-width: 800px; /* You can adjust this value as needed */
  margin-left: auto;
  margin-right: auto;
}

.carousel-inner {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  position: relative;
  overflow: hidden;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-image-container img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.carousel-counter {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}

/* Header styling */
h1, h2, h3, h4, h5, h6 {
  background-color: var(--color-dark-blue);
  color: var(--color-white);
  padding: 7px 16px;
  border-radius: 13px;
  display: inline-block;
  margin: 20px auto;
  text-align: center;
  width: auto;
  max-width: 80%;
}

/* Center headers */
h1, h2, h3, h4, h5, h6 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Link styles */
a {
  color: var(--color-dark-blue);
}

a:hover {
  color: var(--color-pink);
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.7));
}

.carousel-control-prev,
.carousel-control-next {
  opacity: 1;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.9));
}