*, *::before, *::after {
  box-sizing: border-box;
}

a{
  font-family: Arial, sans-serif;
  line-height: 1.6;
  padding: 12px;
  border-radius: 3px;
  border: solid 1px rgb(211, 233, 253);
  margin: 5px;
  color: #333;
  background-color: aliceblue;
}
a:hover{
  animation: hov 100ms forwards;
}
/* a:not(hover){
  animation: hov 100ms backwards;
} */

.container {
  margin: 0;
  display: grid;
  place-items: center;
  width: 97vw;
  height: 90vh;
}

#carousel{
  width: 80vw;
  height: 80vh;
  position: relative;
  margin: 20px;
  background-color: #0000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
              0 32px 64px -48px rgba(0,0,0,0.5);
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
  gap: 0px;
  grid-template-columns: min-content min-content;
  justify-content: space-between;
  align-items: center;
  min-width: 800px;
  grid-row-start: 1;
  grid-row-end: 1;
}
#carousel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel-btn {
  border: none;
  font-size: 2.5rem;
  background: none;
  color: #aaa7;
  height: 100%;
  padding: 0 .5rem;
  background-color: #0001;
  cursor: pointer;
}

.carousel-btn:hover,
.carousel-btn:focus{
  color: white;
  background-color: #0003;
  box-shadow: none;
}

.carousel-btn:focus{
  outline: 1px solid black;
}
.carousel-btn.prev {
  position: relative;
  bottom: auto; /* Ensure it's at the initial position */
  grid-column: 1;
  box-shadow: inset 10px 0px 20px #8884;
}
.carousel-btn.next {
  position: relative;
  bottom: auto; /* Ensure it's at the initial position */
  grid-column: 10;
  box-shadow: inset -10px 0px 20px #8884;
}


@keyframes hov {
  from {scale: 1; background-color: aliceblue;}
  to{scale: 1.05; background-color: rgb(211, 233, 253);}  
}

@media only screen and (max-width: 900px) {
  #carousel{
    max-width: 800px;
    margin: 10px;
    min-width: 560px;
    width: 100%;
  }
}
@media only screen and (max-width: 700px) {
  #carousel{
    width: 100%;
    max-width: 560px;
    grid-template-columns: 49.7% 49.7%;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto;
    margin: 10px;
    min-width: 300px;
  }
  .carousel-btn{
    font-size: 2rem;
    height: 40px;
    top: 20%;
    background-color: #0000;
    color: #666;
  }
  .carousel-btn.prev{
    grid-column: 1;
    grid-row: 11;
    box-shadow: inset 30px 0px 30px #8886;
  }
  .carousel-btn.next{
    grid-column: 2;
    grid-row: 11;
    box-shadow: inset -30px 0px 30px #8886;
  }
}