:root {
  --backGround: url('https://i.imgur.com/VdSVigh.gif');
  --containerBg: white;
  --headerFont: "Tinos";
  --headerColor: black;
  --fontFam: "Tinos";
  --borderColor: 1px solid white;
}


body {
  background-image: var(--backGround);
  font-family: var(--fontFam);
}

container {
  display: flex;
  width: 1000px;
  margin: auto;
  background-color: var(--containerBg);
  border: 1px solid black; 
}

#left {
  width: 40%;
  display: flex;
  flex-direction: column;
  padding: 5px;
}

.title {
  margin: 5px;
  padding: 3px;
  font-family: var(--headerFont);
}

div h2 {
 font-size: 40px;
 font-weight: normal; 
 margin: 0; 
 color: var(--headerColor); 
}

.navHeader {
  font-family: var(--headerFont);
  font-size: 25px;
  font-weight: normal;
  margin: 0;
  color: var(--headerColor);
}

.desc {
  margin: 5px;
  padding: 4px;
  font-style: italic;
}

.themes {
  margin: 5px;
  padding: 3px;
  max-height: 350px;
  overflow: auto;
}

#right {
  width: 60%;
  display: flex;
  flex-direction: column;
  padding: 5px;
}

iframe {
  margin: 5px;
  height: 100%;
  width: 98%;
}

.menu {
  margin: 5px;
  padding: 3px;
}

container div {
 border: var(--borderColor); 
}

@media (max-width: 800px) {
  container {
    flex-direction: column;
    width: 95%;
    margin: 0;
  }
  
  #left, #right {
    width: 100%;
  }
  
  iframe {
    height: 300px;
  }
}