:root{ /* main color palette */
    --base-color: white; 
    --text-color: black; 
    --accent-color: rgb(210, 210, 210); 
  }
  
  body.darkmode{
    --base-color: #161616;
    --text-color: #FBFAFA; 
  }
  
html{
  height: 100%;
  width: 100%;
  font-family: 'Courier New', Courier, monospace;
}

body{
  background-color: var(--base-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.experiences{ 
  text-align: center;
  font-size: 2vh;
}

.objects{ 
  text-align: center;
  font-size: 2vh;
  margin-top: 4vh;
}

.sidtwftainer{
  text-align: center;
}

.sidtwftainer img{
  width: 40vh;
  margin-top: -40vh;
  padding-top: 5vh;
}

.backtainer{ 
  margin-right: 10%;
}

.backtainer img{
  width: 20%;
}

.backtainer{ /* apply to the image and not the container */
  transition: transform 0.2s ease; /* Smooth zoom transition */
}

.backtainer:hover{ /* no idea why this is here */
  transform: scale(1.1); /* increase size by 10% */
}

#backtainer{
  height: 20vh; 
  width: auto; 
}

@media (max-width: 767px) { /* tells the computer that this is a media query, only conditional, and is basically an "if screen is smaller" statement */
  #responsive-image {
    height: 40vh; /* For mobile/smaller screens */
  }
}


footer{
  text-align: center; 
  margin-bottom: -50vh;
}