svg { cursor: url('default.cur'), default; }
g#vectors { cursor: url('action.cur'), default; } 

html {
  background-color: black;
}

body {
  margin: 0;
  overflow: hidden;
}

div {
  /* Responsive On All Screens */
  width: 100vw; 
  height: calc(100vw * 3 / 4);
  box-sizing: border-box;

  /* Align Center */
  margin: auto;
  position: absolute;
  right: 0px; left: 0px;

 /* Change Font Size Responsively For Small Screens */
 font-size: calc(1vw * 4 / 3);
}

/* Responsive On All Screens */
@media (min-width:calc(100vh * 4 / 3)) {
  div {
    height: 100vh;
    width: calc(100vh * 4 / 3);

/* Change Font Size Responsively For Large Screens */
    font-size: calc(1vh * 4 / 3 * 4 / 3);
  }
}

span.footer { 
  position: absolute;
  color: white;
  top: 85%; 
  left: 50%;
  right: 5%; 
}

span.dynamicpage{
  position: absolute;
  color: #d8d4c9ff;
  top: 15%;
  left: 60%;
  right: 8%;
  bottom: 10%;
}
#aoesvg {
  height: 100%;
}

/* ======================================================== */

.thumbnail {
    width: 50%; /* Each thumbnail takes up half of the width */
    display: inline-block;
    margin-bottom: 20px; /* Adjust as needed */
}

.thumbnail img {
    width: 100%; /* Ensure the image fills the container */
}

.thumbnail-title {
    margin-top: 10px; /* Adjust as needed */
    font-weight: bold;
}