:root {
  --primary-colour: #b81f14;
  --primary-colour-layer2: #990a00;
  --secondary-colour: #6d76c5;
  --secondary-colour-layer2: #505aaf;
  --primary-bg-colour: #787887;
  --secondary-bg-colour: #4b4b4e;
  --range-colour: #b1b1b9;
  --range-colour-secondary: #62626a;
}

.visualiser-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 0 auto;
}

h1 {
  margin-top: 0;
  font-size: 30px;
  text-align: center;
}

body {
  overflow-x: hidden;
}

.visualiser-container {
  min-width: 200px;
}

p,
ul,
span {
  font-size: 18px;
}

.doors {
  width: 100%;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

.door {
  /* width: 30vw; */
  aspect-ratio: 0.6;
  background-color: var(--primary-colour);
  cursor: pointer;
}

.door:hover {
  background-color: var(--primary-colour-layer2);
}

.chosen-door {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 10px dashed #660700;
}

.first-choice::after {
  color: white;
  content: "Your current choice";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
  width: 80%;
  font-size: 15px;
  margin: 0 auto;
  text-align: center;
}

.switch-choice::after {
  color: white;
  content: "Your switched choice";
  display: flex;
  margin-top: 10px;
  justify-content: center;
  align-items: center;
  height: 50%;
  width: 80%;
  font-size: 15px;
  margin: 0 auto;
  text-align: center;
}

.goat {
  background-color: #b1b1b9;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MiA3MiI+PGcgc3Ryb2tlPSJub25lIj48cGF0aCBkPSJNMTUgMTYuNnMtNC4xLTIuMi01LjItLjVsMS42IDIuNi00IDQtLjggMi4yIDEgMS44IDIuOS0uMiAxIDEuMi0uNSA0LjdzNC42LjIgMi43LTYuN0gxNmwuMiAyLjIuNyAzLjVzLjkgMy44IDEuNSAzLjdjLjcgMCAzLjIgMi40IDMuMiAyLjRsLjYgNCAzLjIgMy41czMuNCAxMS42IDIuNSAxNC41Yy0xIDMtLjggMy40LS44IDMuNGwyLjYuNyAyLjEtNC41LS44LTE0LjlzNyA2IDE1LjIgMS40YzAgMCAuNSA1LjQgMi40IDYuM2wtMS4xIDYuOS0yIDMuNSAxLjQgMSAxLjgtLjQgMy02IDEuMS0xMSAxLjItMi42IDUuNC03LjFzLjItMi42LTEuMy00YTM5LjggMzkuOCAwIDAgMC02LjYtNGwtMTIuNy0uNi0xMS40IDEuNUwyMSAxOWwtMi43LTIuMXMtMi44LS42LTMuNC0uMnoiIGZpbGw9IiNBNTc5MzkiLz48cGF0aCBkPSJNNTkuMyAzNi4ycy0xLjggNy41LTIuMyAxMC4zbC0uNyAzLjggMS4xIDJMNTMuMiA2NHMtMy45LjUtNC40LS43bDMtNC43LjUtNS42LjUtNy43IDEuMS0yIDUuNC03LjF6TTE0LjYgMThsMy4zLTQgNS4zLS41IDQuMyAzLjdzLTYuOC00LjQtOS4yIDEuNGwtMy43LS42em0xMS44IDMwLjYgNC42LjcuOCA4LjQtMiA1LjRoLTMuNGwxLjgtNC44eiIgZmlsbD0iIzZBNDYyRiIvPjxwYXRoIGQ9Im01Mi4zIDUzLTMuOS41LTEuNSA2LjEtMS41IDIuNy40LjggMi40LjUgMi43LTQuNXpNNjUgMjYuNXMyIDEwLjMtNS45IDEwLjJjMCAwIDAtMy0xLjEtNC42bDIuNC0yLjUgMS45LTIuMyAyLjctLjh6IiBmaWxsPSIjNkE0NjJGIi8+PC9nPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiI+PHBhdGggZD0iTTExIDMxLjRjMi4xLTQuMi0uOS01LS45LTUtMS43LjgtMi44LS4zLTIuOC0uMy0xLjgtMS43IDAtMy41IDAtMy41IDQuMS0yLjggNC00IDQtNEw5LjcgMTZzMi41LTIuNCA1IDFjMCAwIDUuOS04LjQgMTIuNC0uNiIvPjxwYXRoIGQ9Ik0xNCAyNS43czMuOS41IDQtMy43bS4zLTQuM3MyLjMuMyA0IDMuOWMuNyAxLjggNC4zIDcuNSA0LjcgNy43IDAgMCAyNS41LTUuNiAzMC42IDIuOCAwIDAgMS43LjUgMi44LTIuM2E1IDUgMCAwIDEgMy42LTMuMyIvPjxwYXRoIGQ9Ik00Ni40IDQ1LjRjLTkgNC45LTE1LjYtMS40LTE1LjYtMS40bC41IDkgLjUgNi0xLjYgMy43YTEgMSAwIDAgMS0xIC42aC0xLjRhMSAxIDAgMCAxLTEtMS41bDEuMi0zczAtMS43LS41LTUuNC0yLjMtOC43LTIuMy04LjdjLTQuNS0yLjUtMy43LTcuMi0zLjctNy4yLTUuNy00LjEtNS40LTEyLjMtNS40LTEyLjMiLz48cGF0aCBkPSJNNDguNyAzOS4ycy01IDYuNC0uMiAxMi43YzAgMCAuMSA1LjQtMS44IDhsLTEuMiAxLjhhMSAxIDAgMCAwIC45IDEuNmgxLjRjLjMgMCAuNi0uMi44LS40IDEtMSAzLjUtNC41IDMuNS05LjggMC01LjMgMS05IDEtOSA1LTQuNSA1LjMtOCA1LjMtOE01NiA0Ni42cy0xIDMuMyAxLjQgNS40bC00LjIgMTEiLz48L2c+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: center;
  cursor: auto;
}

.goat:hover {
  background-color: #b1b1b9
}

.car {
  background-color: #29a37a;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MiA3MiI+PGcgc3Ryb2tlPSJub25lIj48cGF0aCBkPSJtNjQuOCA0NC0xLjEtLjZjLS40LS4yLS42LS42LS41LTEgLjMtMS45LjUtOC41LTkuNy0xMS41bC0uNi0uMS0xOS42LjFhMiAyIDAgMCAwLTEuMS4zbC0xMC4zIDYuOS0uNi4yYy0xLjktLjEtMy43LjEtNS42LjQtNS40IDEuMS03LjYgNC04LjQgNS41LS4yLjMtLjIuNy0uMiAxIC4xIDIuNC0xLjUgNS4xLjkgNy4zbDE5LjQtLjEgMjAuNC0uNSAxNi4xLS4yYy45LS4xIDIuNC0xLjQgMi44LTIuMiAxLjctMi43LTEuNy01LjQtMS45LTUuNXoiIGZpbGw9IiNlYTVhNDciLz48cGF0aCBkPSJNMTcuMyA0Ni40YTQgNCAwIDAgMC00IDRjMCAyLjIgMS44IDQgNCA0czQtMS44IDQtNGE0IDQgMCAwIDAtNC00em0zOS44IDBhNCA0IDAgMCAwLTQgNCA0IDQgMCAwIDAgNCA0IDQgNCAwIDAgMCA0LTQgNCA0IDAgMCAwLTQtNHoiIGZpbGw9IiM5YjliOWEiLz48cGF0aCBkPSJNNTYuMSAzOS4zVjM1YzAtLjktLjgtMS43LTEuNy0xLjdIMzMuMmwtLjIuMS04IDUuN2MtLjIuMS0uMi40LS4xLjZsLjMuMmM1LjYgMCAyNy4yLS4yIDMwLjQtLjEuMyAwIC41LS4yLjUtLjUgMCAuMSAwIC4xIDAgMHoiIGZpbGw9IiM5MmQzZjUiLz48cGF0aCBkPSJtOC45IDQwLjUgNCAxLjYtMi4xIDIuOS01IC4xeiIgZmlsbD0iI2ZjZWEyYiIvPjwvZz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIj48cGF0aCBkPSJtNDcuNiA1MS0yMC42LjRtLTE4LjkgMGMtLjktLjItMS43LS41LTEuOC0xYTc0IDc0IDAgMCAxLS4zLTUuMWMwLS41LjEtMS4xLjQtMS41IDEuMS0yIDQuOC02LjggMTQuOS02LjRsMTAuMy02LjljLjUtLjMgMS4xLS41IDEuNi0uNWwxOS42LS4xLjkuMWMyLjIuNiAxMS43IDQgMTAuNCAxMi42bDEuMS42Yy41LjIuOS43IDEgMS4yYTcgNyAwIDAgMS0uMiA0LjMiLz48cGF0aCBkPSJtMjQuOSAzOS45IDMwLjItLjJ2LTQuNSIvPjxjaXJjbGUgY3g9IjE3LjMiIGN5PSI1MC40IiByPSI1Ii8+PGNpcmNsZSBjeD0iNTcuMSIgY3k9IjUwLjQiIHI9IjUiLz48cGF0aCBkPSJtMTIuMyA0Mi45LTEuOCAyLjItMy43LS4xIi8+PC9nPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: center;
  cursor: auto;
}

.car:hover {
  background-color: #29a37a
}


button {
  display: inline-block;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  min-width: fit-content;
  transition: background-color 0.3s ease;
}

.open-door,
.stay-door,
.switch-door,
.run-sim {
  background-color: var(--primary-colour);
  color: #fff;
}

.open-door:hover,
.switch-door:hover,
.stay-door:hover,
.run-sim:hover {
  background-color: var(--primary-colour-layer2);
}

.reset {
  background-color: var(--primary-bg-colour);
  color: #fff;
}

.reset:hover {
  background-color: var(--secondary-bg-colour);
}

.hidden {
  visibility: hidden;
}

.span-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 120px;
}

.buttons-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}


ul {
  padding-left: 1rem;
}

li {
  margin: 5px 0;
}



@media (max-width: 399px) {

  button {
    font-size: 14px
  }

  h1 {
    font-size: 20px;
  }

  p,
  ul,
  span {
    font-size: 14px;
  }

}