* { box-sizing: border-box; }

body {
    padding:0;
    margin:0;
    box-sizing: border-box;
}

:root {
            --global-font-size: 13px;
            --global-line-height: 1.4em;
            --global-space: 10px;
            --font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
            serif;
            --mono-font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
            serif;
            --background-color: #222225;
            --page-width: 60em;
            --font-color: #e8e9ed;
            --invert-font-color: #222225;
            --secondary-color: #a3abba;
            --tertiary-color: #a3abba;
            --primary-color: #809bbd;
            /*--primary-color: #62c4ff;*/
            /*--primary-color: rgb(74 222 128);*/
            --error-color: #ff3c74;
            --progress-bar-background: #000;
            /*--progress-bar-fill: #62c4ff;*/
            --progress-bar-fill: #809bbd;
            --code-bg-color: #3f3f44;
            --input-style: solid;
            --display-h1-decoration: none;
        }

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Oswald400.woff2") format("woff2");
}

        .container {
            padding:0;
            margin:0;
        }
        
       pre {
    grid-template-rows: minmax(5.5rem, 14vmin) 1fr 5rem;
}

pre {
/*    font-family: source_code_proregular; */

/*
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
font-size: 70%;
*/

/*font-family: Lucida Console,Lucida Sans Typewriter,monaco,Bitstream Vera Sans Mono,monospace; */
/*Droid Sans Mono*/
font-family: "Source Code Pro", "DejaVu Sans Mono", Menlo, "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
/*font-family: bitstream_vera_sans_monoroman;*/
font-size: 75%;
border:none;
}

    .content-glass .watch{
  position: absolute;
  top: 75px;
  right: 20px;
   box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.062),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.069),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.069),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.065),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.061),
    100px 100px 80px rgba(0, 0, 0, 0.07);
    }

.def      { color: #809bbd; }
.operator { color: #cccccc; }
.property { color: #9a8297; }
.string   { color: #96b38a; }
.number   { color: #df9b1e; }
.keyword   { color: #df9b1e; }
.keyword  { color: #ddca7e; }

    .ascii-art {
    /* font-size: 1vw; Default font size */
    font-size: max(0.2rem, 2vmin);
    white-space: pre-wrap; /* This will make sure the content wraps */
    word-wrap: break-word; /* This will break words properly */
}

#foo {
    color: #fff;
  border-radius: 15px;
 box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.062),
  border: 1px solid #ffffff0d;
  text-shadow: 1px 1px 5px rgb(0,0,0) !important;
}

.light-overlay{
  position: absolute;
  height: 12rem;
  width: 12rem;
  background-color: #fff;
  border-radius: 50%;
  filter: blur(128px);
  opacity: 0.5;
  left: 0;
  top: 0;
}
.light-overlay1{
  position: absolute;
  height: 12rem;
  width: 12rem;
  background-color: #fff;
  border-radius: 50%;
  filter: blur(128px);
  opacity: 0.3;
  right: 0;
  bottom: 0;
}
.content-glass h2{
  position: absolute;
  top: 55px;
  right: 10px;
  font-size: 6em;
  color: rgba(255, 255, 255, 0.07);
  color: #ffffff14;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
}
.logo-container {
      font-family: 'Arial', sans-serif;
      font-family: 'myFirstFont', sans-serif;
      font-size: 80px;
      color: #000000; /* Change color as needed */
      position: relative;
    }

    .logo-container span {
      position: absolute;
      /*transform: rotate(-45deg);*/
      display: inline-block;
    }

    .letter-r {
      left: 0;
    }

    .letter-t {
        color:red;
      left: 32px; /* Adjust the spacing as needed */
      -webkit-text-stroke: 2px red;
      text-stroke: 2px red;
    color:transparent;
    }

    .letter-h {
      left: 49px; /* Adjust the spacing as needed */
    }
    
    .navbar.active {
  background-color: rgb(30 41 59);
}

span.typed-text {
  font-weight: normal;
  color: #dd7732;
}
span.cursor {
    animation: blink 1s infinite;
}
span.cursor.typing {
  animation: none;
}
@keyframes blink {from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

.change-my-color {
 filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.skillBar {
  width: 100%;
  height: 20px;
  border: 1px solid #fff;
  margin: 0 20px;
  display: flex;
  align-items: center;
}
/*.skillBarItem1 {
  width: 100%;
  animation: slide1 2s ease-in-out;
}
.skillBarItem2 {
  width: 90%;
  animation: slide2 2s ease-in-out;
}
.skillBarItem3 {
  width: 75%;
  animation: slide3 2s ease-in-out;
}
.skillBarItem4 {
  width: 55%;
  animation: slide4 2s ease-in-out;
}
.skillBarItem5 {
  width: 85%;
  animation: slide5 2s ease-in-out;
}
.skillBarItem6 {
  width: 15%;
  animation: slide6 2s ease-in-out;
}
.skillBarItem7 {
  width: 5%;
  animation: slide7 2s ease-in-out;
}
.skillBarItem8 {
  width: 5%;
  animation: slide8 2s ease-in-out;
}*/
@keyframes slide1 {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes slide2 {
  from {
    width: 0;
  }
  to {
    width: 90%;
  }
}
@keyframes slide3 {
  from {
    width: 0;
  }
  to {
    width: 75%;
  }
}
@keyframes slide4 {
  from {
    width: 0;
  }
  to {
    width: 55%;
  }
}
@keyframes slide5 {
  from {
    width: 0;
  }
  to {
    width: 85%;
  }
}
@keyframes slide6 {
  from {
    width: 0;
  }
  to {
    width: 15%;
  }
}
@keyframes slide7 {
  from {
    width: 0;
  }
  to {
    width: 5%;
  }
}
@keyframes slide8 {
  from {
    width: 0;
  }
  to {
    width: 5%;
  }
}

.howdy {
  color: #e7f7f7;
  font-size: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-tiny {
    font-size:0.9em;
}

::-webkit-scrollbar-track {
  border: 0px solid white;

  background-color: #ffffff;
  background-color:transparent;
}

::-webkit-scrollbar {
  width: 4px;
  background-color:transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #357cc4;
  background-color: rgb(107 114 128);
  border-radius: 10px;
  border: solid white 0px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #2c5d8b;
}

::-webkit-scrollbar-button {
  color: #357cc4;
  background-color: #2c5d8b;
  border: solid white 0px;
  border-radius: 10px;
  display:none;
}
::-webkit-scrollbar-button:hover {
  border: solid white 2px;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #df9b1e transparent;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: #ddca7e;
  border-radius: 20px;
  border: 3px solid transparent;
}
.logo1 {
 font-size: 24px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0);
  padding: 10px;
  text-shadow: 1px 1px 5px rgba(0,0,0, 0.9);
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  position: relative;
}

.logo1 span {
  text-transform: uppercase;
  font-weight: 900;
  /* color: #9f9d9a; */
  color: #df9b1e;
  letter-spacing: -1px;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
  font-family: "Oswald", sans-serif;
}

ul > li::after {
  content: "";
}

.websites > li::after {
    content: "-";
    }