body {
    font-family: 'Now', sans-serif;
    background-color: #ebfdff;
}

.display-none {
    display: none;
}

h1, h2, h3 {
    font-weight: normal;
    text-align: center;
}

h1 {
    font-size: 2.8em;
    margin-top: 0.8em;
    margin-bottom: 0.3em;
}

h2 {
    margin-bottom: 0.3em;
}
h3 {
    margin: 0;
}

button {
    border: 2px solid #0f5e83;
    color: #0f5e83;
    border-radius: 6px;
    background-color: #00000000;
  
    padding: 5px;
  
    transition: 0.4s ease;
    margin: 6px;
}

button:hover {
    border: 2px solid #08374d;
    color: white;
    background-color: #08374d;
}

button.important-btn {
    font-size: 1.5em;
    margin: 0.8em;
}

.remove-x {
  color: gray;
  display: inline-block;
  font-size: 1.15em;
  cursor: pointer;
  /* float: right; */
}
.remove-x:hover {
  color: crimson;
}

#page-subheader {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.page-subheader-item {
    width: fit-content;
    margin: 0 0.8em;
}

.gh-btn {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    font-weight: 500;
}

.gh-btn {
    background-color: #eee;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fcfcfc),to(#eee));
    background-image: linear-gradient(to bottom,#fcfcfc 0,#eee 100%);
    background-repeat: no-repeat;
    border: 1px solid #d5d5d5;

    color: #333;
    white-space: nowrap;
    cursor: pointer;

    padding: 5px 10px 3px 8px;
    font-size: 16px;
    border-radius: 4px;

    text-decoration: none;
}

.gh-ico {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='12 12 40 40'%3e%3cpath fill='%23333' d='M32 13.4c-10.5 0-19 8.5-19 19 0 8.4 5.5 15.5 13 18 1 .2 1.3-.4 1.3-.9v-3.2c-5.3 1.1-6.4-2.6-6.4-2.6-.9-2.1-2.1-2.7-2.1-2.7-1.7-1.2.1-1.1.1-1.1 1.9.1 2.9 2 2.9 2 1.7 2.9 4.5 2.1 5.5 1.6.2-1.2.7-2.1 1.2-2.6-4.2-.5-8.7-2.1-8.7-9.4 0-2.1.7-3.7 2-5.1-.2-.5-.8-2.4.2-5 0 0 1.6-.5 5.2 2 1.5-.4 3.1-.7 4.8-.7 1.6 0 3.3.2 4.7.7 3.6-2.4 5.2-2 5.2-2 1 2.6.4 4.6.2 5 1.2 1.3 2 3 2 5.1 0 7.3-4.5 8.9-8.7 9.4.7.6 1.3 1.7 1.3 3.5v5.2c0 .5.4 1.1 1.3.9 7.5-2.6 13-9.7 13-18.1 0-10.5-8.5-19-19-19z'/%3e%3c/svg%3e") 0 0/100% 100% no-repeat;
    display: inline-block;
}

.mid {
    width: 80vw;
    margin: 1.8em auto;
}

.center-children {
    text-align: center;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color: #a4ee95;
    cursor: pointer;
    padding: 6px;
    width: 100%;
    border: none;
    outline: none;
}

.collapsible-indicator {
    float: right;
}
  
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
    background-color: #c0f8bb;
}
  
/* Style the collapsible content. Note: hidden by default */
.collapsible-content {
    padding: 0 18px;
    display: none;
}

#controls-guide {
    padding: 0.9em 0;
}

.sect-title {
    font-size: 1.6em;
}

#controls-guide-img-text {
    font-size: 1.3em;

    line-height: 1.9;

    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

#controls-guide-img-contain {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
}

#controls-guide-img-contain .control-guide-platform {
    text-align: center;
}

.controls-guide-img {
    width: 20em;
    height: 20em;
    background-size: cover;
}

#controls-guide-desktop {
    background-image: url(/general-statics/keyboard.png);
}

#controls-guide-oculus {
    background-image: url(/general-statics/oculus-left.png);
}
#controls-guide-oculus-grab {
    background-image: url(/general-statics/quest2_controller_guide.png);
    width: 29em;
    height: 20em;
    background-position: center;
}

#controls-guide-mobile {
    background-image: url(/general-statics/tap-mobile.png);
}

#flight-speed {
    width: 30em;
    max-width: 65vw;
}

#mid-commento-head {
    font-size: 1.4em;
    color: rgb(80, 80, 80);
    text-align: center;
}

.footr {
    text-align: center;
}

/* for hiding aframe html panels by yeeting them off screen */
.hide-by-off-screen {
    position:absolute;
    left:-9999px;
}

span.smol-note {
    color: grey;
    font-size: 0.75em;
}

span.caution {
    color: darkgoldenrod;
}