@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root {
   --base-color: #000000;
   --text-color: #00FF00;
   --primary-color: #FF00FF;
   --secondary-color: #FFFF00;
   --color-1: #808080;
   --color-2: #FFA500;
   --color-3: #FF0000;
   --color-4: #00FFFF;
   --color-5: #FFFFFF;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.italic-text {
  font-style: italic;
}

html {
   font-family: Roboto Mono, 'Courier New', Courier, monospace;
   color: var(--text-color);
}

body {
   padding: 1em;
   background-color: var(--base-color);
}


h1, h2, h3 {
   font-family: Roboto Mono, 'Courier New', Courier, monospace;
   color: var(--text-color);
}

nav {
    margin-top: 1em;
    margin-right: auto;
    margin-bottom: 1em;
    margin-left: auto;
    border-bottom: 2px dashed #00FF00; /* Adds a solid, light gray line at the bottom */
    border-top: 2px dashed #00FF00; /* Adds a solid, light gray line at the bottom */
    padding: 10px 0; /* Add padding for space above/below the line */
    margin: 0px; /* Ensures line touches the edge if desired */
}

nav ul {
   display: flex;
   align-items: left;
   list-style-type: none;
   gap: 2em;
   background-color: #000000;
}


nav li:first-child {
   margin-right: auto;
   align-items: left;
   font-weight: bold;
}

nav a {
   text-decoration: none;
   color: var(--text-color)
}

nav a:hover {
   text-decoration: underline;
}

header, section {
   margin: 2em auto;
   width: min(75em, 100%);
   padding: min(2em, 15%);
}

.flex-container {
   display: flex;
   justify-content: left;
   align-items: left;
   flex-wrap: wrap;
   gap: 3em;
}

header img {
   max-width: 100%;
   object-fit: cover;
   object-position: bottom;
}

.text-container {
   flex: 0 1 34em;
}

h1 {
   font-size: 2.5rem;
}

.text-container p {
   margin: .75em 0 1em 0;
   font-size: 1rem;
}

.cta-button {
   display: inline-block;
   text-decoration: none;
   color: var(--color-5);
   background-color: var(--primary-color)
}

.secondary {
   background-color: var(--color-2);
}

.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree {
  --spacing: 1.5rem;
  --radius: 10px;
}

.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}

/* General style for all links */
a {
  color: lime; /* Sets the default color of the link */
  text-decoration: none; /* Removes the default underline */
}

/* A link that the user has visited */
a:visited {
  color: lime;
}

/* A link when the user mouses over it */
a:hover {
  color: lime;
  text-decoration: underline; /* Adds an underline on hover for emphasis */
}

/* A link when it is being clicked */
a:active {
  color: lime;
}

.video-container{
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   height: 100%;
}

.video-container iframe{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* Initial state of the image */
.thumbnail {
    /* Set original size */
    width: auto;
    height: auto; /* Maintain aspect ratio */
    
    /* Add a smooth transition effect */
    transition: transform 0.3s ease; 
    
    /* Optional: Change cursor to a pointer on hover */
    cursor: pointer; 
}

/* State when the mouse hovers over the image */
.thumbnail:hover {
    /* Enlarge the image to 110% (1.1 times its size) */
    transform: scale(1.01); 
}