/*master stylesheet for the entire site*/

body{
  font-family: serif;
  margin: 0px;
  background-color: #202020;
  height: auto;
  width: 100dvh;
}

/*navbar*/

.navbarAnchor{
  position: sticky;
  top: 0px;
}

.navbar{
  /*height: 2em;*/
  width: 100dvw;
  background-color: #202020;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.navOption{
  border-width: medium;
  border-style: solid;
  border-color: #502020;
  border-radius: 5%;
  align-content: center;
  display: block;
  align-items: center;
  background: linear-gradient(#505050, #202020);
  transition: background 0.5s;
}

.navOption:hover{
  background: linear-gradient(#202020,#505050);
}

.navLink{
  text-align: center;
  /*color: #ffffff;*/
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  font-size: 1.5em;
}

/*skymap*/
.skymapBody{
  background-color: black;
  overflow: hidden;
  height: 100dvh;
  width: 100dvw;
}

#tutorialBox{
  visibility: hidden;
  position: absolute;
  height: auto;
  width: 30%;
  top: 15%;
  right: 10%;
  background-color: rgba(40,40,40,.7);
  color: white;
  font-size: 1.2em;
}

#tutorialXAnchor{
  position:absolute;
  height: 0;
  width: 0;
  top:0;
  right:0;
}

#tutorialX{
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 1.5em;
  font: monospace;
  color: red;
  background-color: transparent;
}

#memoryDisplay{
  position: relative;
  background-color: transparent;
  font: monospace;
  color: rgba(255,255,255,0.5);
  font-size: 0.8em;
  position:absolute;
  right:0;
  top:3em;
}


#content{
  display: flex;
  flex-direction: column;
  position: absolute;
}

#canvasContainer {
  /*height: 95vh;*/
  overflow: hidden;
  /*height: 100vh;*/
  height: -webkit-fill-available;
}

#info {
  color: white;
  font-size: 1em;
  align-items: center;
  justify-content: center;
  text-align:center;
  width:0%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0%;
  background-color: rgba(40,40,40,.7);
  font-size: 1.2em;
  margin: 0px;
}

#infoInterior{
  height:93%;
  width: 95%;
  margin: 0 auto;
}

#viewportContainer{
  height:90%;
}

#imageDetails{
  height:100%;
  overflow-y: auto;
}

#title{
  font-size: 1.5em;
  font-weight: bold;
}

#expanderAnchorRight{
  position:absolute;
  right:0;
  top:50%;
}

#expanderAnchorTop{
  position:absolute;
  right:calc(1em + 50%);
  top:0;
}

#expanderRight{
  position:absolute;
  left:0;
  /*background-color: magenta;*/
  height:0em;
  width:0em;
}

#expanderTop{
  position:absolute;
  bottom:0;
  height:2em;
  width:2em;
}

.arrow{
  height:2em;
  width:2em;
}

#upArrow{
  transform: rotate(270deg);
}

#rightArrow{
  height:2em;
  width:2em;
}

.value {
  font-weight: bold;
  color: white;
}

.label{
  color:grey;
  font-weight: bold;
}

#gpuCanvas {
  display: block;  /* make the canvas act like a block   */
  width: 100%;     /* make the canvas fill its container */

  /*flex-grow: 1;*/
  /*height: calc(100dvh - 2em);*/
  height: 100dvh;
  overflow: hidden;
  /*
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  */
  image-rendering: smooth;
}



a:link{
  color: #8080EE;
}
a:visited{
  color: #8080EE;
}


/*settings*/
.settingsBody{
  color: white;
  font-size: 1.2em;
  margin: 1em;
  height: auto;
}

input{
  background-color:grey;
  color: black;
  font-size:0.8em;
  width: 40dvw;
}

.preset{
  width: 12dvw;
}


.tooltip{
  position: absolute;
  left:0px;
  top:0px;
  background-color: #202020;
  font-size: 1.2em;
  font-weight: normal;
  width: 50dvw;
  visibility: hidden;
  margin: 0.25em;
}


.setting{
  position:relative;
  width: fit-content;
}

.anchor{
  position:absolute;
  right:0px;
  top:0px;
}


.inputLabel{
  font-weight: bold;
  position:relative;
}

/*gallery*/
#gallery{
  display: grid;
  /*grid-template-columns: repeat(1,1fr);*/
  grid-template-columns: repeat(auto-fill, minmax(27em,33%));
  /*grid-template-columns: repeat(auto-fill, 23em);*/
  /*use js to figure out how many columns we can fit*/

  /*grid-template-columns: repeat(auto-fill, minmax(200px, 30dvw));*/
}

#wrapper{
  width:100dvw;
}

.galleryBody{
  background-color: black;
  width: 100%;
}

.galleryLink{ /*a*/
  width: 100%;
  height: 19em;
  object-fit: cover;
  /*color: white;*/
}

.container{
  object-fit: cover;
  margin-left: 0.7dvw;
  margin-right: 0.7dvw;
  margin-bottom: 5dvh;
  background-color: #222;
  transition: background-color 1s;
  border-radius: 5%;
  height:100%;
  /*
  border-color: #ffcc7f;
  border-width: thin;
  border-style: solid;
  */
}

.container:hover{
  background-color: #555;
}

.imOutline{
  height:100%;
  align-content: center;
  object-fit: contain;
}

.galleryImg{
  border-radius: 5%;
  /*width:100%;*/
  height:calc(100% - 4em);
}

.galleryDiv{
  text-align:center;
}

.gallerySpan{
  font-size: 1.5em;
  font-weight: bold;
  margin: auto;
}


/*these are for the skympa still*/
viewport{ /*should be id?*/
  object-fit: contain;
}

viewportContainer{ /*should be ID?*/
  width: 90dvw;
  /*height: 90dvh;*/
}



.galleryBody{
  background-color: #202020;
}


.text{
  color: white;
  text-align: center;
  font-size: 1.5em;
}


#galleryTitle{
  font-size: 2em;
  text-align: center;
}


.blogBody{
  width:100dvw;
}

/*blog here*/
#viewportContainer{
  width: 100%;
}

#viewportLink{
  width: 100%;
}

.viewportContinerBlog{
  object-fit: contain;
}

.viewportImgBlog{
  width: 90%;
}




.homeBody{
  text-align: center;
  width: 100dvw;
}

/*homepage*/
.skymapLink{
  width:90dvw;
  margin: 0 auto;
  display:inline-block;
}

.skymapPreview{
  width:100%;
}

.space{
  width: 90%;
  margin: 0 auto;
}

.smaller{
  font-size: 80%;
}

.hidden{
  visibility: hidden;
}