.signInButton {
  background-color: var(--primary-button);
  padding: 0.4rem 3rem;
  border-style: none;
  border-radius: 9px;
  margin-top: 1rem; 
  text-decoration: none;
}

.signInButton:hover {
  cursor: pointer; }

.buttonContainer {
  text-align: center; 
}

.imgContainer > div {
  width: 100%;
  justify-self: left;
  display: grid;
  justify-content: start;
}

.imgContainer > div h2 {
  margin: 0;
  padding: 0;
  height: fit-content; 
}

.carouselContainer {
  width: 100%;
  height: 500px;
  display: grid;
  position: relative;
  margin-top: 1rem;
}

.imgContainer {
  background-color: var(--carouselBackground);
  display: grid;
  vertical-align: middle;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  align-content: center;
  align-items: center;
  margin-top: 1rem;
  gap: 1rem;
  transition: 1.5s;
  position: absolute;
  height: 500px;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out;
}

@media only screen and (max-width: 900px) {
  .imgContainer{
    grid-template-columns: 1fr; 
    justify-items: center;
  } 

  .imgContainer > div {
    justify-content: center;
  } 

  .imgContainer > img {
    width: 300px !important;
    margin: 0;
    justify-self: center !important;
  }
}

@media only screen and (max-width: 310px) {
  .imgContainer > img {
    width: 100% !important;
  }
}
.first {
  opacity: 1; }

.imgContainer > img {
  width: 500px;
  justify-self: right;
  display: inline-block; 
}

.carouselItem {
  display: inline-block;
  width: 100%; }

input[type="radio"] {
  display: none; }

#radio0:checked ~ .first {
  opacity: 100%;
  visibility: visible;
}

#radio0:not(checked) ~ .first {
  opacity: 0; 
  visibility: hidden;
}

#radio1:checked ~ .second {
  opacity: 100%; 
  visibility: visible;
}

#radio2:checked ~ .third {
  opacity: 100%;
  visibility: visible;
 }

#radio3:checked ~ .fourth {
  opacity: 100%;
  visibility: visible;
 }

#radio4:checked ~ .fifth {
  opacity: 100%;
  visibility: visible;
 }