html, body{
    font-size: 16px;
    font-family: Helvetica;
    margin: 0;
    padding: 0;
    position: absolute;
    /* background-color: #000000; */
    background-color: #f0eadc;
    width: 100%;
    overflow-x: hidden;
    display: block;
}

#canvas-container {
    display: flex;
    justify-content: flex-start; /* Aligns content to the left */
    width: 100%;
    box-sizing: border-box;
}
  
canvas {
    display: block;
    max-width: 100%;
    /* margin: 0 auto; */
    padding: 0;
    margin-top: 2vh;
    /* height: 100vh; */
}

#refreshButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid black;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.1s;
}
#refreshButton:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

#info-container {
    position: fixed;
    bottom: 3px;
    left: 3px;
    color: rgba(255,255,255,0.3) !important;
    font-size: 11px;
    text-decoration: none !important;
    line-height: 0.6em;
    background-color: rgba(0,0,0,0.2);
    padding: 4px;
}

#floating-ig-link{
color: rgba(255,255,255,0.4) !important;
}

#zen-mode-button {
position: fixed;
top: 3px;
left: 3px;
color: rgba(255,255,255,0.5);
border: none;
/* background-color: none; */
background: none;
font-size: 12px;
pointer-events: cursor;
z-index: 100;
}

#gui {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.9;
margin: 0;
z-index: 10;
float: right;
margin-right: 0 !important;
}

.dg {
margin-right: 0 !important;
}

.close-button {
font-size: 1.2em;
font-weight: bold;
background-color: #212121 !important;
margin-right: 0 !important;
opacity: 0.6;
}

.canvasDiv {
display: flex;
margin-top: 3vh;
text-align: center;
/* width: 98vw; */
}

.example-img {
margin: 0 auto;
text-align: center;
max-width: min(650px, 70%);
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.menuButton {
padding: 0px 2px 2px 2px;
font-weight: bold;
margin: 8px 2px 8px 2px;
border: 1px solid #cb0b81;
border-radius: 6px;
background-color: #630940;
cursor: pointer;
font-size: 1.6em;
}

.menuButton:hover {
background-color: #cb0b81;
}

.gui-button {
padding: 12px 12px;
background-color: rgba(18, 72, 181, 0.5);
border: 2px solid #6f9fff;
color: #6f9fff;
cursor: pointer;
font-family: 'Courier New', monospace;
text-transform: uppercase;
letter-spacing: 2px;
transition: all 0.2s ease;
box-shadow: 0 0 10px rgba(111, 159, 255, 0.2);
font-size: 1em;
}

.icon {
padding: 3.5px;
margin: 8px 2px 8px 2px;
font-size: 1.6em;
}

.gui-button:hover {
background-color: rgba(18, 72, 181, 0.8);
box-shadow: 0 0 15px rgba(111, 159, 255, 0.4);
}

.file-input-container {
position: relative;
margin: 20px;
}

#fileInput {
display: none;
}

.hidden {
display: none !important;
}

/* Styling for image upload field */
input[type="file"] {
position: absolute;
top: -9999px;
}

.custom-file-upload {
border: 1px solid #cb0b81;
border-radius: 6px;
background-color: #630940;
color: #fff;
font-weight: bold;
font-size: 1.0em;
font-family: Helvetica;
display: inline-block;
padding: 8px;
cursor: pointer;
margin: 3px;
transition: background-color 0.2s ease;
}

.custom-file-upload:hover {
background-color: #cb0b81;
}

#videoRecordingMessageDiv {
background: rgba(0, 0, 0, 0.75);
color: white;
font-family: helvetica;
font-size: 20px;
font-weight: bold;
padding: 8px;
text-align: center;
z-index: 100;
}

.sticky-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

/* Demo logo menu styling */
#demo-logos-container {
/* position: absolute; */
/* top: 10px; */
/* left: 10px; */
/* z-index: 100; */
display: flex;
flex-direction: column;
/* background: rgb(8, 3, 81); */
background: #103379;
padding: 10px;
margin: 0 auto;
/* margin-top: 10px; */
margin-bottom: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
/* border-radius: 5px; */
max-width: 600px;
font-family: 'Courier New', Courier, monospace;
}

.demo-logos-header {
color: white;
margin-bottom: 10px;
font-weight: bold;
text-align: center;
}

.demo-logos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.demo-logo-button {
padding: 8px;
/* background-color: #630940; */
background-color: #11848a;
color: white;
border-radius: 4px;
cursor: pointer;
text-align: center;
font-size: 12px;
transition: background-color 0.2s ease;
}

.demo-logo-button:hover {
/* background-color: #cb0b81; */
background-color: #14c0c9;
}

/* Intro text styling */
#intro-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
max-width: 80%;
z-index: 200;
}

#intro-text h2 {
margin-top: 0;
color: #cb0b81;
}

#siteNameText{
font-size: 42px;
font-family: "Kage Retro";
font-weight: 400;
font-style: normal;
display:block;
}

#subtitleText{
font-size: 22px;
font-family: "Helvetica";
font-weight: 400;
font-style: normal;
font-style: italic;
margin:0 auto;
}

#aboutText{
font-size: 40px;
font-family: Helvetica, sans-serif;
/* font-family: "Modak", system-ui;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
    "MORF" 15,
    "SHLN" 50; */

display:block;
padding: 0;
margin: 0;
}

#notesDiv{
width:100%;
box-sizing: border-box;
/*overflow: hidden;*/
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
/*border-top: 5px solid #581845;*/
background-color: #f0eadc;
color: rgb(43, 18, 5);
font-family: Helvetica, Arial, sans-serif;
}

#textBox {
min-width: 350px;
max-width: 75vw;
}

#textBox > ul > li {
margin-bottom: 6px;
}

#linksDiv{
background-color: #faebf6;
display: flex;
justify-content: center;
align-items: center;
}

#buttonDiv {
display: inline block;
margin: 0 auto;
width: 100vw;
/* text-align: center; */
}

.x-link {
text-decoration: none;
}

h2 {
font-size: 40px;
font-family: Helvetica;
}

#button-table {
/* display: inline block; */
position: fixed;
bottom: 3px;
right: 3px;
margin: 0 auto;
/* width: 100%; */
text-align: center;
z-index: 100;
}

.displayCanvas {
float: left;
}

/* Styling for table with github and social links */

#infoMenuTable td {
text-align:center;
border: 0;
padding: 20px;
}

#infoMenuTable{
table-layout: fixed;
margin: 0px;
}

a, a:visited{
color:rgb(161, 50, 154);
}

.socialMediaButton{
color:rgb(161, 50, 154);
font-size: 26px;
margin: 0;
padding: 4px;
border: none;
max-width: 50px;
max-height: 50px;
background-color: transparent;
}

#buyMeACoffeeButton {
font-size: 10px;
}

/* Intro overlay screen */
#intro-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
/* animation: fadeIn 0.3s ease-in-out; */
}

#intro-content {
background-color: rgba(21, 22, 50, 0.9);
color: white;
max-width: 600px;
width: 90%;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(111, 159, 255, 0.3);
text-align: center;
font-family: Helvetica, Arial, sans-serif;
/* animation: slideUp 0.4s ease-out; */
}

#intro-title {
font-size: 40px;

font-family: "Modak", system-ui;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
    "MORF" 15,
    "SHLN" 50;

display:block;
padding: 0;
margin: 0;
}

.intro-text {
font-size: 16px;
line-height: 1.5;
margin-bottom: 15px;
}

#hotkeys-section {
background-color: rgba(18, 72, 181, 0.3);
padding: 15px;
border-radius: 5px;
margin-bottom: 25px;
text-align: left;
}

#hotkeys-title {
font-weight: bold;
margin-top: 0;
margin-bottom: 10px;
}

#hotkeys-list {
margin: 0;
padding-left: 20px;
}

#hotkeys-list li {
margin-bottom: 5px;
}

#start-button {
background-color: rgba(18, 72, 181, 0.7);
color: white;
border: 2px solid #6f9fff;
padding: 12px 25px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 0 10px rgba(111, 159, 255, 0.2);
}

#start-button:hover {
background-color: rgba(59, 115, 227, 0.9);
box-shadow: 0 0 15px rgba(111, 159, 255, 0.4);
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes slideUp {
from { 
    transform: translateY(20px);
    opacity: 0;
}
to { 
    transform: translateY(0);
    opacity: 1;
}
}

#fpsIndicator {
    position: fixed;
    top: 5px;
    left: 5px;
}
/* Local Contour Heights integration */
:root {
  --canvas-offset: 7.25rem;
}

#canvas-container {
  padding-left: var(--canvas-offset);
}

a.site-back,
a.site-back:visited {
  position: fixed;
  z-index: 120;
  top: 1rem;
  left: 1rem;
  padding: .58rem .82rem;
  border: 1px solid rgba(232, 243, 224, .72);
  border-radius: .55rem;
  color: #d8e7c6;
  background: rgba(26, 52, 43, .88);
  box-shadow: 0 8px 24px rgba(17, 35, 29, .2);
  font: 650 14px/1.2 system-ui, sans-serif;
  text-decoration: none;
}
a.site-back:hover,
a.site-back:focus-visible {
  color: #1d3329;
  background: #d8e7c6;
  outline: none;
}
#fpsIndicator {
  z-index: 121;
  top: 4.25rem;
  left: 1rem;
  padding: .26rem .42rem;
  border-radius: .35rem;
  color: #e6ebdb;
  background: rgba(17, 35, 29, .62);
  font: 12px/1.2 ui-monospace, monospace;
}
@media (max-width: 640px) {
  #canvas-container { padding-left: 0; }
  .site-back { top: .6rem; left: .6rem; }
  #fpsIndicator { top: 3.7rem; left: .6rem; }
  #button-table { right: .4rem; bottom: .4rem; }
}