/* 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." */
iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}

head {
  background-color: white;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

body {
  background-color: white;
  color: black;
  font-family: "Chaucer";
  text-align: center
}

div {
    display: block;
    unicode-bidi: isolate;
}

.sidebar {
     height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #6e3c2e;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidebar a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #e3dada;
  display: block;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

.button {
  background-color: white;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

/* Active/current link */
.active {
  background-color: white;
  color: white;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 20px;
}


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}