html {margin: 0 auto;}
body {
    display:flex; flex-direction:column; justify-content:center;
    min-height:100vh; margin: 0 auto; max-width: 1777px; font-size: 1.5em; line-height: 1.5em; font-family: sans-serif, Arial, Helvetica; font-weight: 100; 
  }

  h1 {font-size: 4vw; text-align: center;}


  .dark-mode {
    background-color: #333;
    color: #fff;
  }

  button {
    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
    color: white;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.4s;
    z-index: 1;
    margin: 5px;
    background-color: #333;
    opacity: 0.66;
  }


.container {  display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 25px 25px;
    grid-auto-flow: row;
    grid-template-areas:
      ". . . ."
      ". . . ."
      ". . . .";
  
  }

.box {background-color: rgb(253, 253, 253); padding: 1em; box-shadow: rgba(252, 0, 239, 0.12) 0px 14px 40px, rgba(0, 117, 250, 0.22) 0px 10px 10px;}

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
}

.video-container iframe {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;

}

.understand {font-size: .75em;}


/* Style for dark mode links */
.dark-mode 
a:link {
  color: #7bc6e4; /* Unvisited link color */
  text-decoration: none; /* Remove underline */
}

.dark-mode  a:visited {
  color: #a799ac; /* Visited link color */
}

.dark-mode  a:hover {
  color: #ffffff; /* Hover color (white) */
  text-decoration: underline; /* Add underline on hover */
}

.dark-mode  a:active {
  color: #ff4040; /* Active link color (red) */
  font-weight: normal; /* Reset font weight */
}


.dark-mode button {background-color: white; color: black;}

@media (max-width: 1776px) {
  body, .container {display: block; padding: .25em;}
  .understand {padding: 1em;}
}