/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
    text-align: center;
    background-image: url("cdmcreativebackground2.png");
    background-size: 1550px;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
  parent {
  text-align: center;
}
.left {
  text-align: left;
}
.logo {
  width: 500px;
}
.screen {
  width: 100px;
}
.scrollbox {
  height: 250px;
  width: 500px;
  border: 1px solid #ccc;
  font: 16px/26px Georgia, Garamond, Serif;
  overflow: auto;
  margin: 0 auto;
  background-color: rgba(100, 100, 100, 0.3);
}
.yt {
  width: 560px;
  height: 315px;
}
a:link {
  color: #ff8c00;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: #ff8c00;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: #fca635;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #ffdd00;
  background-color: transparent;
  text-decoration: underline;
}




.container {
  position: relative;
  text-align: center;
}
.overlay-text {
  position: absolute;
  top: -3%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}



.image-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.image-container {
  position: relative;
  width: 14%;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}



.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-image: url("wood.png");
  background-color: #211b15; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  font-size: 25px;
  display: block;
}

.sidebar-toggle {
  display: none;
  font-size: 24px;
  padding: 10px 15px;
  background-color: #30281f;
  color: #fff;
  margin: auto;
}

.visiting {
  font-size: 25px;
  color: #ff4800;
}



@media (max-width: 768px) {
  .sidenav {
    position: relative;   /* no longer fixed */
    width: 100%;
    height: auto;
  }
  .sidenav a {
  padding: 6px 8px 6px 16px;
  font-size: 16px;
  display: block;
}
  .visiting {
  font-size: 16px;
  color: #ff4800;
}
  .logo {
  width: 300px;
}
  .yt{
  width: 280px;
  height: 157px;
}
  .sidebar-toggle {
  display: block;
  }
  
    .sidenav {
    display: none; /* hide sidebar by default */
  }

  .sidenav.show {
    display: block; /* show when toggled */
  }
    .image-row {
    flex-direction: column;
    align-items: center; /* keeps images centered */
  }

  .image-container {
    width: 80%; /* or 100% if you want full width */
  }
  .scrollbox {height:175px;width:340px;}
}