style.css

.docs {
  background: var(--mist);
  height: 100%;
}

table,td,tr {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0.4em;
  background-color: white;  
}

.coach {
  position: absolute;
  width: 10%;
  top: 80%;
  left: 80%;
}

.examples {
  background-image: url("../../images/Branded_1920x1080_2.png");
  background: var(--mist);
 
  margin: 0;
  padding: 1%;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
}

li {
  margin-bottom: 0.6em;
  list-style-type: none;
}

a {
  border: 1px solid rgb(200, 200, 200);
  padding: 0.2em;
  margin-bottom: 0.3em;
  border-radius: 0.3em;
  padding-left: 0.4em;
  padding-right: 0.4em;
  text-decoration: none;
  color: black;
  background: white;
}

h1 {
  font-family: MongoDB Value Serif;
  font-weight: 200;
  font-size: 42pt;
  margin-top: 2pt;
  margin-bottom: 10pt;
}

h2 {
  font-family: 'Euclid Circular A', monospace;
  font-weight: 200;
}

html {
  font-family: 'Euclid Circular A', monospace;

  background-color: #1C2D38;
  color: var(--slate);
  height: 100%;
}

.flex-container {
  display: flex;
  flex-direction: row;
}

#window-buttons {
  margin-left: auto; 
  margin-right: 0;
}

#editor { 
  border: 1px solid green;
  color: var(--springgreen);
  background: black;
  width: 100vw;
  height: 88vh;
  margin: 0.2em 0.6em 0.2em 0.2em;
  display: block;
  padding: 0.4em;
  white-space: pre;
  overflow: hide;
  font-family: 'Source Code Pro', monospace;
  border-radius: 0.4em;
  font-size: small;

}

.infobox {
  background: white;
  color: black;
  font-size: large;
  margin: 0.4em;
  padding: 0.4em;
  border: 2px solid red;
}

.infobox:empty {
  display: none;
}

.sim-container {
  display: flex;
  flex-direction: column;
}

.menu:active {
  
  background-color: var(--springgreen);
}

.loadbutton::file-selector-button {
 
  background-color: var(--forestgreen);
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: large;
  border-radius: 0.5em;
  margin: 0.5em;
  padding: 0.5em 0.4em 0.5em 0.4em;
  overflow: hidden;
}

button:active {
  background-color: var(--forestgreen);
}

.code {
  border: 1px solid green;
  color: var(--springgreen);
  background: black;
  width: 48vw;
  height: 85vh;
  margin: 0.4em;
  display: block;
  padding: 0.4em;
  white-space: pre;
  overflow: auto;
  font-family: 'Source Code Pro', monospace;
  border-radius: 0.4em;
  font-size: small;
}

.button-container {
  display: flex;
  flex-direction: row;
  margin: auto;
  margin-top: 0.3em;
}


.menu-container {
  display: flex;
  flex-direction: row;
  margin-left: 0.4em;
 
}

.menu {
  border: 1px solid var(--springgreen);
  background-color: var(--forestgreen);
  color: white; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: large;
  border-radius: 0.3em;
  margin-right: 0.5em;
  overflow: hidden;
}

menu.a:hover,
menu.a:active {
  background-color: red;
}

.button {
  font-size: large;
  border-radius: 0.3em;
  margin-right: 0.5em;
  margin-top: 0.1em;
  background-color: white;
  padding: 0.1em 0.4em 0.1em 0.4em;
}

.label {
  margin: 0.4em;
  font-size: small;
}

.test {
  border-radius: 0.3em;
  width: 48vw;
  height: 89.5vh;
  margin-top: 0.2em;
  display: flex;
  border: 1px solid var(--springgreen);
  background: rgb(220, 220, 220);
  flex-direction: column;
}

.url {
  
  border: 1px solid black;
  margin-left: 1em;
  margin-right: 1em;
  padding: 0.1em;
  background: white;
  border-radius: 0.3em;
  display: flex;
  flex-direction: row;
}

#endpoint {
  border: 1px solid rgb(240, 240, 240);
  width: 40vw;
}

.path {
  display: inline-block;
  font-size: small;
  font-family: 'Source Code Pro', monospace;
  background: white;
  color: black;
  margin: 0em;
  outline: 1px solid darkgray;
  padding: 0em;
  line-break:anywhere;
  overflow-wrap: break-word;

}

.staticpath {
  margin-left: 0.4em;
  margin-right: 0em;
  outline: 0px solid transparent;
  line-break: auto;
}

.postdata {
  border: 1px solid green;
  color: black;
  background: white;
  height: 30%;
  margin-left: 1em;
  margin-right: 1em;
  padding: 0.1em;
  display: block;
 
  white-space: pre;
 
  border-radius: 0.3em;
  overflow: auto;
  font-family: 'Source Code Pro', monospace;
  font-size: small;
}

.response {
 
  background: white;
  border: 1px solid black;
  height: 90%;
  margin: 0.4em;
  white-space: pre-wrap;
  overflow: hide;
  border-radius: 0.3em;
  font-family: 'Source Code Pro', monospace;
  font-size: small;
}

/* An activity indicator */
/* commented out, we can add it in the future if that's needed */

/* .loader {
  border: 16px solid var(--forestgreen); 
  border-top: 16px solid var(--springgreen);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
  -webkit-animation: spin 2s linear infinite; /* Safari * / 
} 

/* Safari * / 
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} */

:root {
  --slate: #001e2b;
  --springgreen: #00ed64;
  --forestgreen: #00684a;
  --mist: #e3fcf7;
  --lavender: #f9ebff;
}

@font-face {
  font-family: Euclid Circular A;
  src: url(https://static.mongodb.com/com/fonts/EuclidCircularA-Regular-WebXL.woff2) format('woff2');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: Euclid Circular A;
  src: url(https://static.mongodb.com/com/fonts/EuclidCircularA-Medium-WebXL.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: MongoDB Value Serif;
  src: url(https://static.mongodb.com/com/fonts/MongoDBValueSerif-Regular.woff2) format('woff2');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: MongoDB Value Serif;
  src: url(https://static.mongodb.com/com/fonts/MongoDBValueSerif-Medium.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: MongoDB Value Serif;
  src: url(https://static.mongodb.com/com/fonts/MongoDBValueSerif-Bold.woff2) format('woff2');
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: Source Code Pro;
  src: url(https://static.mongodb.com/com/fonts/SourceCodePro-Regular.ttf) format('truetype');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: Source Code Pro;
  src: url(https://static.mongodb.com/com/fonts/SourceCodePro-Medium.ttf) format('truetype');
  font-weight: 500;
  font-display: swap;
}