body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family:sans-serif;
    height: fit-content;
}

#scoreDisplay{
  font-size: 23px;
}

#answerInput{
  font-size: 15px;
}

.background{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    background-image: url('../Media/Images/Misc/Bkg.jpg');
    filter: blur(0px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner{
    display:flex;
    text-align:center;
    background-color: white;
    justify-content: center;
    align-items: center;
    position: fixed;
    border: 5px solid aliceblue;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 15%;
    z-index:999;
}

#title{
  font-size: 290%;
}

.centercontent{
    position:absolute;
    background-color: white; 
    padding: 5px;
    border: 15px solid aliceblue;
    border-radius: 0;
    text-align:center;
    top: 15%;
    left:22%;
    width: 50%;
    height:100%;
}

p{
    color: black;
    display: inline;
    font-family: Helvetica;
    font-size: 17px;
}

.centrato{
    text-align: center;
}

h3{
    color: #4b5320;
}

a{
    color: blue;
}

.color-a{
  color:darkblue;
}

h1{
    color: #4b5320;
    text-align: center;
}

td{
    border: 0px solid #ddd;
}

.white{
    border: 0px solid #fff;
}

.centertitle{
    text-align: center;
    border: 0px solid #fff;
}

.transparent:hover{
    background-color: transparent;
}

img{
    max-width: 100%;
    Height:auto;
}

table{
    width: 100%;
    height:100%;
}

#footer{
  position: fixed;
  left:22.65%;
  bottom:-51.5%;
  width:50%;
  height:60%;
  background-color: white;
  border:10px solid rgb(91, 119, 145);
  overflow: hidden;
  transition: bottom 0.2s;
}

#footer:hover {
  bottom:0;
}

.smaller{
  transform: scale(0.9);
}

main#carousel {
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 200px;
  --items: 12;
  --middle: 5;
  --position: 1;
}

div.item {
  position: absolute;
  width: 300px;
  height: 400px;
  background-color: #fff;
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r));
  transition: all 0.25s linear;
  transform:rotateY(calc(-10deg * var(--r))) 
  translateX(calc(-300px * var(--r)));
  z-index: calc((var(--position) - var(--abs)));
  margin: auto;
  padding: 10px;
}
  
div.item:nth-of-type(1) {
  --offset: 1;
  background-color: aliceblue;
}

div.item:nth-of-type(2) {
  --offset: 2;
  background-color: aliceblue;
}

div.item:nth-of-type(3) {
  --offset: 3;
  background-color: aliceblue;
}

div.item:nth-of-type(4) {
  --offset: 4;
  background-color: aliceblue;
}

div.item:nth-of-type(5) {
  --offset: 5;
  background-color: aliceblue;
}

div.item:nth-of-type(6) {
  --offset: 6;
  background-color: aliceblue;
}

div.item:nth-of-type(7) {
  --offset: 7;
  background-color: aliceblue;
}

div.item:nth-of-type(8) {
  --offset: 8;
  background-color: aliceblue;
}

div.item:nth-of-type(9) {
  --offset: 9;
  background-color: aliceblue;
}

div.item:nth-of-type(10) {
  --offset: 10;
  background-color: aliceblue;
}

div.item:nth-of-type(11) {
  --offset: 11;
  background-color: aliceblue;
}

div.item:nth-of-type(12) {
  --offset: 12;
  background-color: aliceblue;
}

input:nth-of-type(1):checked ~ main#carousel {
  --position: 1;
}

input:nth-of-type(2):checked ~ main#carousel {
  --position: 2;
}

input:nth-of-type(3):checked ~ main#carousel {
  --position: 3;
}

input:nth-of-type(4):checked ~ main#carousel {
  --position: 4;
}

input:nth-of-type(5):checked ~ main#carousel {
  --position: 5;
}

input:nth-of-type(6):checked ~ main#carousel {
  --position: 6;
}

input:nth-of-type(7):checked ~ main#carousel {
  --position: 7;
}

input:nth-of-type(8):checked ~ main#carousel {
  --position: 8;
}

input:nth-of-type(9):checked ~ main#carousel {
  --position: 9;
}

input:nth-of-type(10):checked ~ main#carousel {
  --position: 10;
}

input:nth-of-type(11):checked ~ main#carousel {
  --position: 11;
}

input:nth-of-type(12):checked ~ main#carousel {
  --position: 12;
}

::selection{
  background-color: #4b5320;
  color: white;
}

input:nth-of-type(1):checked ~ main#carousel div.item:nth-of-type(1):hover,
input:nth-of-type(2):checked ~ main#carousel div.item:nth-of-type(2):hover,
input:nth-of-type(3):checked ~ main#carousel div.item:nth-of-type(3):hover,
input:nth-of-type(4):checked ~ main#carousel div.item:nth-of-type(4):hover,
input:nth-of-type(5):checked ~ main#carousel div.item:nth-of-type(5):hover,
input:nth-of-type(6):checked ~ main#carousel div.item:nth-of-type(6):hover,
input:nth-of-type(7):checked ~ main#carousel div.item:nth-of-type(7):hover,
input:nth-of-type(8):checked ~ main#carousel div.item:nth-of-type(8):hover,
input:nth-of-type(9):checked ~ main#carousel div.item:nth-of-type(9):hover,
input:nth-of-type(10):checked ~ main#carousel div.item:nth-of-type(10):hover,
input:nth-of-type(11):checked ~ main#carousel div.item:nth-of-type(11):hover
input:nth-of-type(11):checked ~ main#carousel div.item:nth-of-type(12):hover{
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.btn-content{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width:10.8%;
  height:fit-content;
  z-index: 1;
  border: 5px solid aliceblue;
}

.btn-content a {
  color: black;
  text-decoration: none;
  display: block;
  padding: 7px;
}

.d-content:hover .btn-content {
  display: block;
}

.drop{
  background-color: transparent;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.drop:hover{
  background-color: black;
  transition: background-color 0.3s ease;
  color:white;
}

#btnenl:hover{
  transform: scale(1.3);
  transition: transform 0.2s ease;
}

.btn-content li:hover a{
  transition: color 0.3s ease;
  color:red;
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.btn-content li:hover{
  background-color: aliceblue;
  transition: background-color 0.3s ease;
}

.nodot{
  list-style-type: none;
}

li{
  margin: 0;
}