/* 
  Left off styling the dropdowns for the option menus. Not in a bad state
  Work on the hamburger menu at some point. Open close animation with anime.js.
  -- Have unexpanded menu functionality by having the menus appear to the left of the unexpanded icon, | ### | <- "G" for example

  Get rid of scroll bars on iframe and canvas. 
  ** Make canvas free-floating????
  Otherwise make it take up 4/5 of the screen or something with flex layouts.
*/

html{
    /* height: 95vh;
    width: 98vw; */
    height: 100%;
    width: 100%;
    background-color: rgba(50,150,255,0.5);
}
body{
  width:100%;
  height:100%;
  margin: 0px;
  overflow:hidden;
  display:flex;
  flex-direction: column;
}
fieldset{
  border-style: none;
}
.app_wrapper{
  height:100%;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.app_wrapper > *{
  display:flex;
}
iframe{
  height:100%;
  overflow:hidden;
  width:600px;
}
iframe > *{
  overflow:hidden;
  
}
body > main{
  overflow:hidden;
}

.sidebar{
  height:100%;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 0.5;
}
.option-dropdown{
  display:flex;
  flex-direction:column;
}
.option-summary{
  position:relative;
  padding:20px;
  background-color: var(--secondary);
  border-color: var(--accent);
  cursor: pointer;
  /* list-style-type: none; */
  border-bottom-style:solid;
}
.option-summary:hover{
  background-color: var(--primary);
}
.option-list{
  position:relative;
  margin:0px;
  max-width:100%;
  border-color: var(--secondary);
  border-left-style:solid;
  list-style-type: none;
}
.option-listItem{
  display:flex;
  margin: 2rem 0.5rem;
}

.option-column > *{
  display:flex;
  flex-direction: column;
}























/* html, body {
  margin: 0;
  padding: 0;
  font-family: Quicksand,sans-serif;
  height:100%;
}
body{
  display:flex;
  flex-direction: column;
} */
/*
iframe{
  width:100%;
  height:100%;
  overflow:hidden;
}
canvas {
  display: block;
}
.sidebar{
  display:flex;
  flex-direction:column;
  width: 35%;
  padding:10px;
  margin:0;
}
.sidebar ul li{
  list-style: none;
}
#opacity_slider{
  max-width: 100%;
}
.app_wrapper{
  display:flex;
  flex-direction:columns;
  height:85vh;
}
#website_logo_li, #website_logo_li img{
  display:flex;
  padding:0px;
  padding-left:2vw;
  max-height:16vh;
  flex-shrink: 0;
}

#top_ul{
  flex-wrap: wrap;
  max-height:2000px;
}
.modal{
  max-width: 75%;
  font-family: Quicksand,sans-serif;
}
#modal-close-button{
  float:right;
  width:30%;
  height:5vh;
  border-radius: 10px;
  border-style: solid;
  border-color: black;
}
.c{
  height:15px;
}

.dg.ac *:not(.c){
  font-size:12px;
  line-height:normal;
  margin-bottom: 0px;
}
.dg .c input[type="text"]{
  height:auto;
} */