@font-face {
        font-family: 'Vsketch2';
        src: url('./fonts/Myfont-Regular.ttf') format('truetype'),
    }
    @font-face {
        font-family: 'Vsketch1';
        src: url('./fonts/Vsketchfont-Regular.ttf') format('truetype'),
    }

body, html {
  margin: 0; padding: 0; height: 100%; font-family: monospace; background: #222; color: #eee;
  display: flex; flex-direction: column;
  background-image: var(--bgimg);
  scrollbar-width: none;
margin-top:22px;
  background-size: var(--bgsize);
  background-color: var(--bgclr);
}

#toolbar {
  background: var(--toolbar);
   padding: 5px;
    position: fixed;
    gap: 10px;
    width: 100%;
  border-bottom: 1px solid #000000;
   top: 0; 
  flex-shrink: 0; /* don't shrink */
  box-shadow: 2px 5px 12px #000000;
}

#iframeheader {
      background: #111;
    padding: 10px;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #eee;
    font-weight: bold;
    font-family: monospace;
  box-shadow: 2px 5px 12px #000000;
  
}

footer{
  font-family: 'vsketch1';
}
#stats-box {
    margin: 30px auto;
    padding: 50px 60px;
    width: fit-content;
    border: 3px inset var(--statsboxbdr);
  
    background: var(--statsboxbg);
    
    box-shadow: 0 0 10px #0000005b;
       font-family: 'Vsketch2';
    font-size: 20px;
    text-align: center;
    text-shadow: #000000 0px 6px 10px;
    color: rgb(255, 255, 255);
    animation: glowText 12s infinite;
  }

  @keyframes glowText {
    0%, 100% { color: #fcfcfc; }
    50% { color: #f3f3f3; }
  }

  #stats-text span {
    display: block;
    margin: 8px 0;
  }

#floatingiframe {
   display:none;
  position:fixed;
  top:80px;
  left:80px;
  width: 900px;
  height: 70vh;
  background: #222;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  flex-direction: column;
  overflow: hidden;
  z-index: 10000;
  scrollbar-width: none;
  user-select:none;
}

#closeIframe {
   background: linear-gradient(#ffb2b2,#fc4a4a, #af3939, #6e0000); 
      border:none; 
      height: 30px;
      color: #eee; 
      font-weight: bold; 
      font-size: 26px; 
      line-height: 1; 
      padding:0px 10px ; 
      cursor: pointer;
      border-radius: 2px;
      user-select:none;
        box-shadow: 2px 5px 12px #000000;
}

#supportedcmdsiframe {
  border:none; 
    background: #222;
    width: 100%;
    scrollbar-width: none;
    height: 100%;
}
.imgtoolbar{
 box-shadow: 2px 5px 22px #000000;
 background: var(--imgtoolbar);
border-radius: 3px;
margin-right: 10px;
 border: 1px solid #1d1d1d; 
 height: 30px;
}

.maincontenteditor {
  overflow: hidden;
}


#container {
  display: flex; 
  flex-grow: 1; 
  height: calc(100vh - 40px); /* Adjust if toolbar height differs */
  overflow: hidden;
}

#editor {
  width: 50%; 
  height: 100%; /* full height of container */
  padding: 10px; 
  box-sizing: border-box;
  background: var(--editormain); 
  border-right: 1px solid #444; 
  outline: none; 
  resize: none;
  color: #eee; 
  font-size: 14px;

  overflow-y: auto; /* make editor scroll internally */
}

.comment {
  color: #00ff00;
}

#rightPane {
  width: 50%; 
  height: 100%; /* full container height */
  display: flex; 
  flex-direction: column;
  overflow: hidden;
}

#canvas {
 
  background: #333; 
  border-bottom: 1px solid #444;
  /* canvas will fill available space */
  aspect-ratio: 3 / 2;
}

.bug {
   background: linear-gradient(#f0a3a3,#5e2f2f, #440e0e);
   color: white;
 }

 .bug:hover {
   background: linear-gradient(#ffbebe,#834242, #6d1717);
   color: white;
 }

#console {
  height: 100%; 
  overflow-y: auto; 
  background: #111; 
  padding: 5px;
  font-size: 13px; 
  color: #0f0; 
  white-space: pre-wrap;
}

button {
   background: var(--toolbarbtns);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 700;
font-size: large;
  border: 1px solid #000000; 
  color: var(--toolbarbtnclr); 
  padding: 5px 10px;
  cursor: pointer;
  margin-left: 5px;    
  margin-right: 5px;
 box-shadow: 2px 5px 22px #000000;
 border-radius: 3px;
}

button:hover {
   background: var(--toolbarbtnshvr);
 
}

.thumbnail {
   background: linear-gradient( #747474,#d4d0d0,#6b6969,#414141);
   text-shadow: 2px 2px 4px #000000;
   box-shadow: 2px 5px 12px #333333;
   border: 1px solid #000000; 
   border-radius: 6px;
}


#topbar {
  position: relative;
  height: 50px; /* Adjust to fit buttons */
}

#runBtn {
  float: left;
  margin-left: 10px;
}

#saveBtn,
#loadBtn {
  float: right;
  margin-left: 10px;
}

#Supported{

  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;

}

    #projects-container {
      margin-top: 40px;
      max-width: 860px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      text-decoration: none;
      color: black;
    }
    .project-card {
      background: var(--projcard);
        text-decoration: none;
      color: black;
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 2px 5px 12px #000000;
    }
    .project-thumbnail {
      width: 120px;
      height: 80px;
       box-shadow: 2px 5px 12px #000000;

      background: linear-gradient(#cfcfcf,#df8b8b,#d84343,#dd2121);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      overflow: hidden;
    }
    .project-thumbnail img {
      max-width: 100%;
      max-height: 100%;
    }
    .project-info {
      flex-grow: 1;
        text-decoration: none;
      color: black;
    }
    .edit-btn {
      background: #d84343;
      border: none;
      color: white;
      padding: 8px 14px;
      border-radius: 5px;
      cursor: pointer;
      text-decoration: none;
    }
    .edit-btn:hover {
      background: #b32f2f;
    }

       :root {
      --bgcolor: #d6d6d6;
      --bg: url(imgs/assets/redbg.png);
      --bgclr:#222;
      --bgsize:200px;
      --toolbar: linear-gradient(
        #ca5353,
        #d86a6a,
        #a04646);
      --toolbarbtns: linear-gradient( #607bac,#4b5aad, #1e1d38);
      --toolbarbtnshvr: linear-gradient(#728fc5,#5767c5, #312f5c);
      --toolbarbtnclr: rgb(19, 7, 51);
      --statsboxbdr: rgb(78, 116, 172);
      --statsboxbg:url(imgs/assets/lightbluebg.png) rgb(110, 134, 214);
      --editormain: #302f35;
      --imgtoolbar:linear-gradient(#607bac,#4b5aad, #1e1d38);
      --bgimg: url(imgs/assets/bgimgwhite.png);
      
      --txtcolor: black;
      --projcard: linear-gradient(
        #e6e6e6,
        #afafaf,
        #969696,
        #818181);
    }

        :grey {
      --bgcolor: rgb(138, 138, 138);
      --bgclr:#222;
      --bgsize:20px;
      --toolbar: linear-gradient(
        #2e2e2e,
        #686868,
        #424242);
      --toolbarbtns: linear-gradient(
        #b3b3b3,
        #5a5a5a, 
        #3f3f3f);
      --toolbarbtnshvr: linear-gradient(
        #d6d6d6,
        #919191, 
        #7c7c7c);
      --toolbarbtnclr: rgb(0, 0, 0);
      --statsboxbdr: rgb(99, 99, 99);
      --statsboxbg: rgb(117, 117, 117);
      --editormain: #2e2e2e;
      --imgtoolbar:linear-gradient(#b4afaf,#3f3f3f, #525252);
      --bgimg: url(imgs/assets/bg.png);
      
      --txtcolor: black;
      --projcard: linear-gradient(
        #5f5f5f,
        #7e7e7e,
        #2e2e2e,
        #292929);
    }

    .green {
      --bgcolor: rgb(102, 139, 102);
      --bgclr:#222;
      --bgsize:20px;
      --toolbar: linear-gradient(
        #162c17,
        #2f6434,
        #294620);
      --toolbarbtns: linear-gradient(
        #5db66e,
        #2f5e35, 
        #22441f);
        --imgtoolbar:linear-gradient(#80a164,#3f3f3f, #376433);
      --toolbarbtnshvr: linear-gradient(#6dd880,#4a9454, #40813b);
      --toolbarbtnclr: black;
      --statsboxbdr: rgb(46, 110, 46);
      --statsboxbg: rgb(78, 110, 78);
      --editormain: #2b2e2b;
      --bgimg: url(imgs/assets/greenbg.png);
      --txtcolor: black;
      --projcard: linear-gradient(
        #35613a,
        #628362,
        #1f4e1f,
        #1b351b);
    }