* {cursor: url(https://www.rw-designer.com/cursor-view/194681.png), auto !important;}
A:hover{cursor: url(https://www.rw-designer.com/cursor-view/204430.png), auto !important;}

        @font-face{
font-family: "Study Night";
src:url(https://vanillamilkshake.neocities.org/fonts/Study%20Night.otf);
} 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  body {
    background-image: url('https://img.freepik.com/free-photo/empty-blackboard_53876-31358.jpg?semt=ais_hybrid&w=740&q=80');
    color: white;
    }
    
    /* thank you to w3schools for this */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #5d805c; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #364d36; 
}

.headereverything {
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

/* the navi is inspired and help was taken from repth's themes, specifically https://repth.neocities.org/themeq also..lina's template helped me a lot */
.navi {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.navi ul {
  display: flex;
  justify-content: space-around;
  padding: 0;
  margin: 0;
}
.navi li {
  display: inline;
  border: 2px white groove;
  color: white;
}

.section {
  display: none;
}

.section.active {
  display: block;
}

.core {
  display: flex;
flex-direction: row;
}
.header {
  font-size: 30px;
}
.header2 {
  font-size: 22px;
}

 @media (max-width: 700px) {
   .container {flex-direction:column;max-width:700px;}
   .images {display:none;}
   .etc {max-width:700px;}
  }

.container {
display:flex;
width: 65rem;
height: 40rem;
margin:auto;
border: 2px dotted green;
}

.images {
  width: 350px;
  text-align:center;
  height:auto;
}

.etc {
  width:630px;
  overflow-y: scroll;
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Study Night"; 
}

a {
  color: white;
}

table img {
  width: 300px;
  height: 500px;
}

.slide {
  display: none;
}

table button, table button:hover{
  color: #ffffff;
  border: none;
  font-size: 30px;
  background: none;
}

footer {
margin:auto;
height:10%;
}

.spoiler {
  position: relative;
  box-decoration-break: clone;
  border-radius: 0.25em;
  /* Apply the border radius when the label wraps to multiple lines */
  transition: background-color 0.15s ease-in;
}

/* Hide the native checkbox and position it over the spoiler; see https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/ */
.spoiler input {
  position: absolute;
  opacity: 0;
}

/* When the checkbox has focus, display focus styles on the spoiler. */
.spoiler:has(input:focus-visible) {
   outline: 2px solid blue;
  outline-offset: 2px;
}

/* Handle hidden state */
.spoiler:has(input:not(:checked)) {
  filter:blur(0.25em);
  color: transparent;
  background-color: black;
  user-select: none;

  /* Hide all text children, including links */
  & * {
    color: transparent;
  }

  /* Make the checkbox cover up links and other elements within */
  & input {
    inset: 0;
  }
}

/* Handle revealed state */
.spoiler:has(input:checked) {
  cursor: auto;

  /* Position the checkbox out of the way */
  & input {
    width: 1px;
    height: 1px;
  }
}

 /* credits to https://codepen.io/kavt89/pen/OPPJoXm for the tooltip code! */
.tooltip {
		position: relative;
		display: inline-block;
		cursor: pointer;
}

.tooltip .tooltiptext { visibility: hidden;
    width: 180px;
    background-color: #49912f;
    color: #ffffff;
    text-align: center;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 100%;
    margin-top: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
}