@import url("https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@400;500;600;700;800&family=Saira+Extra+Condensed:wght@400;500;600;700;800&family=Teko:wght@400;500;600;700&display=swap");
:root {
  --bg-color: #151516;
  --primary-color: #f9f9f9;
  --white-bg-color-low-opacity: rgba(249, 249, 249, 0.7);
  --secondary-color: #d4d4d4;
  --accent-color: #242424;
  --primary-font: "Teko", sans-serif;
  --navbar-font: "Alumni Sans", sans-serif;
  --navbar-font-size: 1.5rem;
  --navbar-font-size-responsive: 4rem;
  --paragraph-font: "Alumni Sans", sans-serif;
  --paragraph-font-size: 1.25rem;
  --paragraph-font-size-tablets: 2rem;
  --header-font-size: 16rem;
  --red-glitch: #ff4f71;
  --blue-glitch: #00feff;
  --skills-icon-default-size: 4.5rem;
  --title-section-header-size: 7rem;
  --title-section-header-size-medium: 5rem;
  --opacity-low: 0.6;
  --min-width-1281-title-section-header-size: 5rem;
  --min-width-1281-paragraph-font-size: 1rem;
  --marquee-width: 100%;
  --marquee-height: 100%;
  /* --marquee-elements: 12; */ /* defined with JavaScript */
  --marquee-elements-displayed: 12;
  --marquee-element-width: calc(
    var(--marquee-width) / var(--marquee-elements-displayed)
  );
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}
.dark-theme {
  --bg-color: #f9f9f9;
  --primary-color: #151516;
}
.dark-mode-icon i {
  color: var(--primary-color);
  font-size: 2rem;
  margin-left: 1rem;
}
*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background-color: var(--secondary-color);
}
.logo img {
  max-width: 70px;
  cursor: pointer;
}
p {
  font-family: var(--paragraph-font);
}
h2 {
  font-size: var(--header-font-size);
  font-family: var(--primary-font);
}
h2,
h3,
h4,
p {
  color: var(--primary-color);
}
h3,
h4 {
  font-family: var(--primary-font);
  font-weight: 500;
}
i,
a {
  color: var(--primary-color);
}
#center-screen,
#top-screen,
#right-screen,
#left-screen {
  background-color: var(--bg-color);
}
html,
body {
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body::-webkit-scrollbar {
  display: none;
}
#center-screen {
  display: none;
}
.nav {
  width: 100%;
  padding: 1.25rem 7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-color);
}
.navbar {
  display: flex;
  align-items: center;
}
.navbar li {
  margin: 0rem 1rem;
}
.navbar li a {
  font-size: var(--navbar-font-size);
  color: var(--primary-color);
  font-family: var(--navbar-font);
  text-transform: uppercase;
  font-weight: bold;
}
.fa-sun {
  display: none;
}
.navbar li:after {
  content: "";
  width: 0%;
  height: 1px;
  background: var(--primary-color);
  display: block;
  margin: auto;
  transition: 0.5s;
}
.navbar li:hover::after {
  width: 100%;
}

@keyframes glitch-1 {
  0% {
    clip: rect(132px, auto, 101px, 30px);
  }
  5% {
    clip: rect(17px, auto, 94px, 30px);
  }
  10% {
    clip: rect(40px, auto, 66px, 30px);
  }
  15% {
    clip: rect(87px, auto, 82px, 30px);
  }
  20% {
    clip: rect(137px, auto, 61px, 30px);
  }
  25% {
    clip: rect(34px, auto, 14px, 30px);
  }
  30% {
    clip: rect(133px, auto, 74px, 30px);
  }
  35% {
    clip: rect(76px, auto, 107px, 30px);
  }
  40% {
    clip: rect(59px, auto, 130px, 30px);
  }
  45% {
    clip: rect(29px, auto, 84px, 30px);
  }
  50% {
    clip: rect(22px, auto, 67px, 30px);
  }
  55% {
    clip: rect(67px, auto, 62px, 30px);
  }
  60% {
    clip: rect(10px, auto, 105px, 30px);
  }
  65% {
    clip: rect(78px, auto, 115px, 30px);
  }
  70% {
    clip: rect(105px, auto, 13px, 30px);
  }
  75% {
    clip: rect(15px, auto, 75px, 30px);
  }
  80% {
    clip: rect(66px, auto, 39px, 30px);
  }
  85% {
    clip: rect(133px, auto, 73px, 30px);
  }
  90% {
    clip: rect(36px, auto, 128px, 30px);
  }
  95% {
    clip: rect(68px, auto, 103px, 30px);
  }
  100% {
    clip: rect(14px, auto, 100px, 30px);
  }
}
@keyframes glitch-2 {
  0% {
    clip: rect(129px, auto, 36px, 30px);
  }
  5% {
    clip: rect(36px, auto, 4px, 30px);
  }
  10% {
    clip: rect(85px, auto, 66px, 30px);
  }
  15% {
    clip: rect(91px, auto, 91px, 30px);
  }
  20% {
    clip: rect(148px, auto, 138px, 30px);
  }
  25% {
    clip: rect(38px, auto, 122px, 30px);
  }
  30% {
    clip: rect(69px, auto, 54px, 30px);
  }
  35% {
    clip: rect(98px, auto, 71px, 30px);
  }
  40% {
    clip: rect(146px, auto, 34px, 30px);
  }
  45% {
    clip: rect(134px, auto, 43px, 30px);
  }
  50% {
    clip: rect(102px, auto, 80px, 30px);
  }
  55% {
    clip: rect(119px, auto, 44px, 30px);
  }
  60% {
    clip: rect(106px, auto, 99px, 30px);
  }
  65% {
    clip: rect(141px, auto, 74px, 30px);
  }
  70% {
    clip: rect(20px, auto, 78px, 30px);
  }
  75% {
    clip: rect(133px, auto, 79px, 30px);
  }
  80% {
    clip: rect(78px, auto, 152px, 30px);
  }
  85% {
    clip: rect(35px, auto, 39px, 30px);
  }
  90% {
    clip: rect(67px, auto, 1170px, 30px);
  }
  95% {
    clip: rect(71px, auto, 103px, 30px);
  }
  100% {
    clip: rect(83px, auto, 400px, 30px);
  }
}

.fa-sharp {
  font-size: 2rem;
  color: var(--primary-color);
  opacity: var(--opacity-low);
}

/*span.status {*/
/*  display: block;*/
/*  width: 15px;*/
/*  height: 15px;*/
/*  margin-inline: 1rem;*/
/*  background-color: #0fcc45;*/
/*  opacity: 0.7;*/
/*  border-radius: 50%;*/

/*  animation: blink 1s linear infinite;*/
/*}*/


/*@keyframes blink {*/
/*  100% {*/
/*    transform: scale(2, 2);*/
/*    opacity: 0;*/
/*  }*/
/*}*/