@font-face {
    font-family: myLexend;
    src: url(fonts/Lexend-Bold.ttf);
    font-display: swap;
}
body{
  user-select: none; // chrome and Opera
  -moz-user-select: none; // Firefox
  -webkit-text-select: none; // IOS Safari
  -webkit-user-select: none; // Safari
}

.scrollable-panel {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.panel-item {
  display: inline-block;
  margin-right: 20px; /* Adjust the spacing between items */
  width: 30%;
}


.exo {
  font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  text-align: center;
  color: white;
}

.exoFont
{
  font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}


@media only screen and (max-width: 768px) {
  #time, #date {
      font-size: 8px; /* Adjust as needed */
      margin-right: 30px !important;
  }

  #boxNextPic, #projectsContainer{
    margin-left: 0px !important;
  }
}


ul
{
  color: black;
}

i.fa-python
{
  color: #253449;
}
i.fa-unity
{
  color: black;
}
i.fa-robot
{
  color: black;
}
i.fa-raspberry-pi
{
  color: black;
}

body.brown{
    background-color: darkgrey;
}

.vDIV
{
    border-color: #111817; 
    border-style: solid; 
    width: 100%;
}

.w98Container
{
    background-color: #bec8c5; 
    margin-top: 15px; 
    margin-left: 15px; 
    border-radius: 0px;

}

.W98Bar
{
    border-style: solid; 
    padding: 1px; 
    background-color: #0200a6;
}

#elementEl2::after {
  content: '|';
  margin-left: 5px;
  animation: blink 0.7s infinite;
}

  
  
  @keyframes blink {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }


  .glass
  {
      /* From https://css.glass */
      background: rgba(255, 255, 255, 0.48);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(8.6px);
      -webkit-backdrop-filter: blur(8.6px);
      border-style: none;
  }

  .glassr {
    /* From https://css.glass */
    position: relative;
    background: rgba(38, 43, 27, 0.28);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.6px);
    -webkit-backdrop-filter: blur(8.6px);
    border-style: none;
    overflow: hidden;
}

.glassr::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png');
    pointer-events: none;
    opacity: 0.1; /* Adjust the opacity as needed */
    z-index: -1;
}

.glassDialogNoise {
  width: 30vw;
  max-height: 80vh;
  background: rgb(38, 43, 27, 0.48);
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  
  /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
  -webkit-overflow-scrolling: touch;
}

.glassDialogNoise::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.glassDialogNoise {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

@media (max-width: 1200px) {
  .glassDialogNoise {
      width: 70vw;
      height: auto;
  }
}

dialog {
  display: block;
  inset: 0;
  z-index: var(--layer-important);
  max-inline-size: min(90vw, var(--size-content-3));
  max-block-size: min(80vh, 100%);
  overflow: hidden;
  transition: opacity .5s;
  animation: var(--animation-scale-down) forwards;
  animation-timing-function: var(--ease-squish-3);
}

@media (max-width: 1200px) {
  dialog {
      overflow-y: auto;
  }
}

dialog::-webkit-scrollbar {
  width: 0;
  height: 0;
}

dialog {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}



dialog[open] {
  animation: var(--animation-slide-in-down) forwards;
}


dialog:not([open]) {
  pointer-events: none;
  opacity: 0;
}

dialog::backdrop {
backdrop-filter: blur(0.25rem);
}
  
  .glassBOLD
  {
      /* From https://css.glass */
      background: rgba(38, 43, 27, 0.48);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(8.6px);
      -webkit-backdrop-filter: blur(8.6px);
      border-style: none;
  }

  .panelObject
  {
  border: 5px solid #6e493a;
  box-shadow: 3px 5px 10px white;
  margin-right: 5px; 
  cursor: pointer;
  }

  .panelObject_A
  {
  margin-right: 5px; 
  cursor: pointer;
  margin-bottom: 10px;
  border-radius: 15px;
  }


  .hover-div {
    text-align: center;
    min-height: 350px;
  }
  
  .hover-div {
    background: #f8f8f8;
    box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    margin: 10px 0px;
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px
  }
  
  .hover-div:hover {
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    box-shadow: 0 22px 43px rgba(255, 255, 255, 0.32);
    cursor: pointer;
    border-radius: 5px;
  }
  .wc-box {
    position: relative;
    --bs-gutter-x: 0px;
  }
  
  .wc-box div {
    position: relative;
    float: left;
    width: 45px;
    height: 35px;
  }
  
  .wc-box div:before,
  .wc-box div:after {
    top: 30%;
    right: 30%;
    bottom: 30%;
    left: 30%;
    content: " ";
    position: absolute;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 0 0 2px 0;
  }
  
  .wc-box .minimize:before {
    border-bottom-width: 2px;
  }
  
  .wc-box .maximize:before {
    border-width: 1px 1px 2px 1px;
  }
  .close
  {
    border-top-right-radius: 5px;
  }
  .wc-box .close:before,
  .wc-box .close:after {
    bottom: 50%;
    top: 50%;
  }
  
  .wc-box .close:before {
    transform: rotate(45deg);
  }
  
  .wc-box .close:after {
    transform: rotate(-45deg);
  }
  
  .wc-box div:hover {
    background-color: #CCCCCC;
  }
  
  .wc-box .close:hover {
    background-color: #E04343;
  }
  
  .wc-box div:hover:after,
  .wc-box div:hover:before {
    border-color: #333333;
  }
  
  .wc-box .close:hover:after,
  .wc-box .close:hover:before {
    border-color: #FFFFFF;
  }

.titlebar
{
  border-style: none;
  padding: 0px; 
  background-color: #262b1b;
  border-top-left-radius: 10px; 
  border-top-right-radius: 10px
}

.lucida
{
  font-size: 15px;
   color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.lightX {
  display: block;
  padding: 10px;
  border-radius: 8px;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  white-space: pre-wrap;
  word-spacing: normal;
  word-break: normal;
  word-wrap: break-word;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

.dialogHeading
{
  color: white;
  font-weight: bold;
  font-size: large;
  display: inline-block;
  background-color: rgba(139, 149, 86, 0.43);
  padding: 5px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 5px;
}
.liteX
{
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  word-spacing: normal;
  word-break: normal;
  word-wrap: break-word;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
.greenGlow
{
  color: lab(64% -80 0);
  text-shadow: 0 0 10px lab(64% -80 0 / .5);
}

.whiteGlow
{
  color: lab(100% 0 0);
  text-shadow: 0 0 10px lab(100% 0 0 / .5);
}




.taskbar {
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  z-index: 110;
  justify-content: center;
  min-height: 43px;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.startmenu {
  position: absolute;
  /* bottom: 50px; */
  bottom: -655px;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease-in;
}

.startmenu img {
  border-radius: 8px;
}

.right {
  justify-self: flex-end;
  position: absolute;
  right: 0;
  margin: 6px 0;
  height: 85%;
}

.tbApp {
  z-index: 500;
  height: 90%;
  width: 50px;
}

.tbApp:hover {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 20%;
  backdrop-filter: blur(8.6px);
  -webkit-backdrop-filter: blur(8.6px);
}
  
/* GRAIN FROM https://codepen.io/ValentinBossens/pen/BaKRwea */
  .grain {
    left: 0;
    pointer-event: none;
    z-index: 300;
    transform: translateZ(0);
    
    &:before {
      content: "";
      left: -10rem;
      width: calc(100% + 20rem);
      height: calc(100%);
      z-index: 100;
      position: fixed;
      background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png);
      opacity: 0.15;
      pointer-events: none;
      -webkit-animation: noise 1s steps(2) infinite;
      animation: noise 1s steps(2) infinite;
    }

    @-webkit-keyframes noise {
      to { transform: translate3d(-7rem,0,0) }
    }

    @keyframes noise {
      0% { transform: translate3d(0,9rem,0) }
      10% { transform: translate3d(-1rem,-4rem,0) }
      20% { transform: translate3d(-8rem,2rem,0) }
      30% { transform: translate3d(9rem,-9rem,0) }
      40% { transform: translate3d(-2rem,7rem,0) }
      50% { transform: translate3d(-9rem,-4rem,0) }
      60% { transform: translate3d(2rem,6rem,0) }
      70% { transform: translate3d(7rem,-8rem,0) }
      80% { transform: translate3d(-9rem,1rem,0) }
      90% { transform: translate3d(6rem,-5rem,0) }
      to { transform: translate3d(-7rem,0,0) }
    }
  }

  .grainbehind {
    left: 0;

    transform: translateZ(0);
    
    &:before {
      content: "";
      left: -10rem;
      width: calc(100% + 20rem);
      height: calc(100%);
      z-index: 100;
      position: fixed;
      background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png);
      opacity: 0.15;
      pointer-events: none;
      -webkit-animation: noise 1s steps(2) infinite;
      animation: noise 1s steps(2) infinite;
    }

    @-webkit-keyframes noise {
      to { transform: translate3d(-7rem,0,0) }
    }

    @keyframes noise {
      0% { transform: translate3d(0,9rem,0) }
      10% { transform: translate3d(-1rem,-4rem,0) }
      20% { transform: translate3d(-8rem,2rem,0) }
      30% { transform: translate3d(9rem,-9rem,0) }
      40% { transform: translate3d(-2rem,7rem,0) }
      50% { transform: translate3d(-9rem,-4rem,0) }
      60% { transform: translate3d(2rem,6rem,0) }
      70% { transform: translate3d(7rem,-8rem,0) }
      80% { transform: translate3d(-9rem,1rem,0) }
      90% { transform: translate3d(6rem,-5rem,0) }
      to { transform: translate3d(-7rem,0,0) }
    }
  }