.headertext {font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
font-size: xx-large;
color: blanchedalmond;}

.smallertext {font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
font-size: large;
color: blanchedalmond;
text-align: center;
text-decoration: dotted blanchedalmond;}

.boxtops {display: block;
border-radius: 25px 25px 0px 0px;
border-left: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);
background: linear-gradient(180deg, rgb(19, 18, 41, 0.45), rgb(38, 20, 51))}

.boxbottom {display: block;
border-radius: 0px 0px 25px 25px;
margin-bottom: 30px;
border-left: 5px double rgb(48, 48, 228);
border-bottom: 5px double rgb(48, 48, 228);
border-right: 5px double rgb(127, 21, 189);
color: transparent;
background:linear-gradient(180deg, rgb(38, 20, 51), rgb(19, 18, 41, 0.45))
}

.fullpage {display: flex;
align-items: flex-start;
justify-content: center;
margin: 35px auto;
gap: 15px;}

.leftpage{display: flex;
flex-direction: column;
padding: 20px;
justify-self: left;
width: 100%;
max-width: 430px;}

.box {display: block;
justify-items: center;
padding: 10px;
background-color: rgb(38, 20, 51);
color: blanchedalmond;
border-left: 5px double rgb(48, 48, 228);
border-right: 5px double rgb(127, 21, 189)}

#middlespace{display: flex;
flex-direction: column;
justify-self: center;
padding: 20px;
color: blanchedalmond;
text-align: center;
margin-top: 20px;
width: 100%;
max-width: 950px;}

.tab-content {
    display: none;
}
.tab-content:target {
    display: block;
    max-height: 370px;
    max-width: 600px;
    width: 100%;
    overflow: auto;
    background-color: rgb(68, 39, 85);
    justify-content: center;
    text-align: center;
    padding: 5px 40px 5px 40px;
    border-left: 5px double rgb(48, 48, 228);
border-bottom: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);}

.button {display: block;
background-color: rgb(68, 39, 85);
border-radius: 25px;
border-left: 5px double rgb(48, 48, 228);
border-bottom: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);
font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
font-size: large;
color: blanchedalmond;
text-decoration: none;
padding: 10px;
width: 100px;
height: 40px;}

.buttontext {color: blanchedalmond;
text-decoration: none;
text-align: center;}

.buttonbox {display: flex;
flex-direction: row;
gap: 20px;
margin-bottom: 10px;}

.container {display: flex;
justify-content: space-evenly;
}

.quizbox {display: flex;
flex-direction: column;
gap: 10px;
row-gap: 10px;}

.results {width: 300px; height: 100px; text-align: center;
padding: 5px;
margin: 70px 0px 10px 0px;}

.interestbox {display: flex;
background-color: rgb(68, 39, 85);
border-radius: 25px;
border-left: 5px double rgb(48, 48, 228);
border-bottom: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);
flex-direction: column;}

.characterslist {display:grid;
grid-template-columns: 200px 200px 200px;
column-gap: 15px;
row-gap: 25px;
justify-content: center;}

.characterbox {display:block;
background-color: rgb(38, 20, 51);
border-radius: 25px;
border-left: 5px double rgb(48, 48, 228);
border-bottom: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);
width:200px; height: 200px;
justify-content: center;
text-decoration: none;}

.characterphoto {width: 150px; height: 150px; border-radius: 50%;}

.tab-content::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
	background-color: #9153aa;
}
.tab-content::-webkit-scrollbar
{
	width: 10px;
	background-color: #9153aa;
}
.tab-content::-webkit-scrollbar-thumb
{
	background-color: #0c6bf0;
}

.rightpage{display: flex;
flex-direction: column;
padding: 20px;
justify-self: right;
width: 100%;
max-width: 430px;
font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
font-size: large;
color: blanchedalmond;
text-decoration: none;
padding: 10px;}

.sidenav {display: flex;
flex-direction: column;}

.optionnav {text-decoration: none;
font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
font-size: large;
color: blanchedalmond;
text-align: center;}

.sidenavoption {background-color: rgb(68, 39, 85);
border-radius: 25px;
border-left: 5px double rgb(48, 48, 228);
border-bottom: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);
padding: 10px}