@import url('https://fonts.googleapis.com/css2?family=Scope+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jura&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Beastly:wght@300..700&family=Rubik+Beastly&display=swap');

body {
    margin: 0 auto;
    height: 100%;
    width: 1000px;
    max-width: 100%;
    background-color: black;
    color: white;
        
}

::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
}

h1 {
    font-family: "jura";
    font-size: 13px;
    width: 500px;
    font-family: courier;
    margin: auto;
    padding-top: 5px;
    
}
hr {
    border: dotted 1px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
    color: red;
    padding-bottom: 5px;
}

header {
    max-width: 100;
    width: 900px;
    height: 100px auto;
    text-align: center;
    margin: auto;
    
}

header > img {
    width: 400px;
    max-width: 100%;
    height: auto;
    text-align: center;
    transition: rotate 0s ease;
    margin: auto;
}

header > img:hover {
    rotate: 1deg;
    z-index: 1;

}

img {
    max-width: 100%;
    z-index: 2;
    
}

.main {
    max-width: 100%;
    text-align: center;
    width: 1100px;
    height: 620px;
    font-family: monospace;
    z-index: 1;
    overflow: scroll;
}

iframe {
    display: block;
    margin: 10px auto;
    width: 900px;
    height: 500px;
    border: 1px dotted white;
    border-radius: 3px;
}

 /* Pagination links */
.pagination a {
  color: black;
  float: center;
  padding: 3px 10px;
  text-decoration: none;
  background-color: grey;
}

/* Style the active/current link */
.pagination a.active {
  background-color: lightcoral;
  color: white;
}

/* Add a grey background color on mouse-over */
.pagination a:hover:not(.active) {
    background-color: #ddd;} 


h2 {
    color: grey;
    font-family: "jura";
    font-size: 10px;
}

.character {
    text-align: center;
    
    
}


.footnote {
    color: white;
    font-family: "Jura";
    font-size-adjust: auto;
    font-weight: normal;
    text-align: center;
}

a {
    color: red;
}

a:hover { 
    color: darkred; 
}

a:visited { 
    color: lavender; 

}


.tooltip {
    display: inline-block;
    position: relative;
    top: 65%;
}

.tooltip > img {
    max-width: 100%;
    width: 52px;
    height: 74px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    max-width: 100%;
    width: 100px;
    text-align: center;
    word-wrap: normal;
    position: static;
    display: block;
    color: white;
    font-size: 13px;
    background-color: black;
    border: solid 1px black;
    padding: 5px;
    margin: auto;
    
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    max-width: 100%;
    z-index: 5;
    display: block;
    color: black;
    max-height: auto;
    background-color: grey;
    border-bottom: 1px dotted black;
}