@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Roboto:wght@100;300;400;700&display=swap");
:root {
  --theme-name: "light";
  --theme-color: rgb(41, 41, 41);
  --header-color: rgb(61, 61, 61);
  --header-color-variation: rgb(39, 39, 39);
  --main-font-color: white;
  --placeholder-color: white;
  --complimentary-color: #c77100;
  --background-color: #ffffff;
  --background-color-2: #ffffff;
  --background-hover-color: #ffffff0c;
  --background-hover-color-variation: #ffffff17;
  --top-year-color: #ffffff;
  --background-box: #ffffff;
  --background-box-hover: #ffffff;
  --background-box-active: #ffffff;
  --scrollbar-color: 0, 0, 0;
  --standard-font-size: 1.1vw;
  --standard-font-pixel-size: 20px;
  --loader-color: 70, 70, 70;
  --snake-background: 70, 70, 70;
  --snake-font: 70, 70, 70;
  --top-linear-gradient: linear-gradient(45deg #000000);
}

ul {
  list-style-type: none;
}

* {
  transition: background-color 100ms linear;
  transition: border-bottom-color 100ms linear;
}

body {
  font-family: "Rajdhani", "Roboto", Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}

h1 {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

header {
  position: fixed;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: var(--header-color);
  width: 100%;
  border-bottom: 0.1vw solid var(--complimentary-color);
  z-index: 500;
  transition: background-color 100ms linear, border-bottom-color 100ms linear;
  /*.sideControl{
      flex-basis: 25%;
      @include flexCenter();
  }*/
}
header .logo {
  order: 0;
  flex-basis: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .logo a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  height: 100%;
  padding: 0 1vw;
}
header .logo a img {
  width: calc(var(--standard-font-size) * 0.62);
  height: auto;
  display: inline-block;
  /*&.imageWhite{
      display:inline-block;
  }
  &.imageBlack{
      display:none;
  }*/
}
header .logo a h1 {
  padding-left: 0.4vw;
  display: inline-block;
  color: var(--main-font-color);
  font-weight: 600;
  font-size: calc(var(--standard-font-size) * 1.25);
}
header .optionsContainer {
  display: flex;
  justify-content: flex-end;
}
header .optionsContainer .options {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
header .optionsContainer .options ul {
  margin: 0;
  padding: 0;
}
header .optionsContainer .options ul li {
  float: left;
}
header .optionsContainer .options ul li a {
  display: block;
  color: var(--main-font-color);
  text-align: center;
  text-decoration: none;
  padding: 0.8vw 1.2vw;
  margin: 0 0.8vw;
  font-size: calc(var(--standard-font-size) * 0.85);
}
header .optionsContainer .options ul li a:hover {
  background-color: var(--background-hover-color);
  cursor: pointer;
}
header .optionsContainer .options ul li a:active {
  background-color: var(--background-hover-color-variation);
}
header .optionsContainer .themeContainer {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
header .optionsContainer .themeContainer .circleThemeParent {
  margin-right: 10vw;
}
header .optionsContainer .themeContainer .circleThemeParent .hoverText {
  visibility: hidden;
  padding: 0.2vw 0.4vw;
  font-size: calc(var(--standard-font-size) * 0.7);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 1vw;
  color: var(--main-font-color);
  /*&::before{
      content:" ";
      position: absolute;
      left:-0.3vw;
      top:0.3vw;
      border-top:0.3vw solid transparent;
      border-right:0.3vw solid changeToVar(header-color-variation);
      border-left:none;
      border-bottom: 0.3vw solid transparent;
  }*/
}
header .optionsContainer .themeContainer .circleThemeParent:hover .hoverText {
  visibility: visible;
}

@keyframes sideAppear {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes sideDisappear {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
.sideContent {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  background-color: var(--header-color);
  z-index: 9999;
  color: var(--main-font-color);
  min-width: 15.1vw;
  height: 100%;
  transition: background-color 100ms linear;
}
.sideContent h2 {
  font-weight: 600;
}
.sideContent#activeSide {
  display: block;
  animation: sideAppear 300ms ease-in-out forwards;
}
.sideContent#transitionSide {
  display: block;
  animation: sideDisappear 300ms ease-in-out forwards;
}

.xCloseParent {
  display: block;
  width: 100%;
  margin: 1vw 1vw;
}
.xCloseParent .xClose {
  position: relative;
  float: left;
  width: 2vw;
  height: 2vw;
}
.xCloseParent .xClose:hover {
  cursor: pointer;
}
.xCloseParent .xClose::before,
.xCloseParent .xClose::after {
  position: absolute;
  left: 1vw;
  height: 2vw;
  width: 0.1vw;
  content: " ";
  background-color: var(--header-color);
  filter: invert(100%);
}
.xCloseParent .xClose::before {
  transform: rotate(45deg);
}
.xCloseParent .xClose::after {
  transform: rotate(-45deg);
}
.xCloseParent .xClose:hover::before,
.xCloseParent .xClose:hover::after {
  background-color: var(--main-font-color);
  filter: invert(0%);
}

.sideContainer {
  margin-left: 1.2vw;
  display: flex;
  flex-wrap: wrap;
  flex-wrap: wrap;
  flex-direction: column;
  /*
  .contentDividerLine{
      width:100%;
      height:0.05vw;
      background-color:white;
      margin:0;
      border:none;
  }
  */
  /*
  .circleThemeParent{
      @include flexCenter();
      .hoverText{
          visibility: hidden;
          background-color:changeToVar(header-color-variation);
          padding: 0.2vw 0.4vw;
          border-radius: 15%;
          font-size:changeToCalcFont(standard-font-size, 0.7);
          position: relative;
          margin-left:0.5vw;

          &::before{
              content:" ";
              position: absolute;
              left:-0.3vw;
              top:0.3vw;
              border-top:0.3vw solid transparent;
              border-right:0.3vw solid changeToVar(header-color-variation);
              border-left:none;
              border-bottom: 0.3vw solid transparent;
          }
      }
      &:hover .hoverText{
          visibility: visible;
      }

  }*/
}
.sideContainer a {
  display: block;
  color: var(--main-font-color);
  text-decoration: none;
}
.sideContainer .contentDivider ul {
  display: block;
  padding-left: 1.8vw;
  margin: 0.8vw 0 1.2vw 0;
}
.sideContainer .contentDivider ul li {
  margin: 0.4vw 0;
}
.sideContainer .contentDivider h2 {
  margin: 1.5vw 0;
}
.sideContainer .contentDivider h2 a {
  font-size: calc(var(--standard-font-size) * 1.2);
}
.sideContainer .contentDivider h3 {
  font-size: calc(var(--standard-font-size) * 1);
  margin: 1vw 0;
}
.sideContainer .contentDivider a {
  font-size: calc(var(--standard-font-size) * 0.85);
}
.sideContainer .contentDivider a:hover {
  transform: translateY(-0.05vw);
  transition: transform 20ms linear;
}
.sideContainer .contentDivider a:active {
  transform: translateY(0vw);
}
.sideContainer h4 {
  display: inline-block;
  margin: 0;
  font-size: calc(var(--standard-font-size) * 0.75);
}
.sideContainer .setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}
.sideContainer .setting .singleOption {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*#currentTheme{
    //margin-left:0.5vw; Done to all theme options

}*/
.circleTheme {
  background-color: var(--theme-color);
  border-radius: 50%;
  height: calc(var(--standard-font-size) * 0.65);
  width: calc(var(--standard-font-size) * 0.65);
  position: relative;
  box-shadow: 0 0 0 0.05vw var(--main-font-color);
  margin: 0;
}
.circleTheme:hover {
  cursor: pointer;
}
.circleTheme#dark {
  background-color: rgb(41, 41, 41);
}
.circleTheme#amoled {
  background-color: black;
}
.circleTheme#solarized {
  background-color: #1f3142;
}
.circleTheme#light {
  background-color: rgb(240, 240, 240);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
/*
.themeOptions{
    animation: fadeIn 100ms ease-in-out forwards;
    display:none;
    flex-wrap: wrap;
    position:absolute;
    top:calc(1vw + 0.075vw * 3);
    left:0%;
    //margin-left:0.5vw;
    background-color: changeToVar(header-color;

    .singleOption{
        @include flexCenter();
    }
    .break-point{
        flex-basis: 100%;
    }

    .circleThemeParent{
        display:flex;
        align-items: center;
        //justify-content:flex-start;
    }
    .guidedText{
        visibility: hidden;
    }
}*/
/*
.themeSettings{
    display:none;
    animation:fadeIn 100ms ease-out;
    position: absolute;
    top:calc(1.5vw);
    background-color:changeToVar(header-color-variation);
    transition: background-color 100ms linear;
    padding:0.3vw 0.1vw;
    border-radius: 20vw;

    &::before{
        content:" ";
        position: absolute;
        right:2.12vw;
        top:-0.3vw;
        border-top:none;
        border-right:0.3vw solid transparent;
        border-left:0.3vw solid transparent;
        border-bottom: 0.3vw solid changeToVar(header-color-variation);
    }

    .circleThemeParentSetting{
        @include flexCenter();
        position: relative;
        .hoverTextSetting{
            display:none;
            position: absolute;
            top:1.1vw;
            padding:0.15vw 0.2vw;
            border-radius: 0.2vw;
            background-color:changeToVar(header-color-variation);
            font-size:changeToCalcFont(standard-font-size, 0.7);


        }
        .circleTheme{
            margin:0.075vw 0.5vw;
        }

        &:hover .hoverTextSetting{
            display:block;
            text-align: center;
        }

    }
}*/
.themeSettings {
  display: flex;
  animation: fadeIn 50ms ease-out;
  position: absolute;
  background-color: var(--header-color);
  transition: background-color 100ms linear;
  padding: 0.6vw 0.2vw;
  top: calc(100% + 0.1vw);
  right: 7.75vw;
}
.themeSettings .circleThemeParentSetting {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.themeSettings .circleThemeParentSetting .hoverTextSetting {
  display: none;
  position: absolute;
  top: 1.2vw;
  padding: 0.15vw 0.2vw;
  background-color: var(--header-color);
  transition: background-color 100ms linear;
  font-size: calc(var(--standard-font-size) * 0.7);
  color: var(--main-font-color);
  box-sizing: border-box;
}
.themeSettings .circleThemeParentSetting .circleTheme {
  margin: 0vw 0.5vw;
}
.themeSettings .circleThemeParentSetting:hover .hoverTextSetting {
  display: block;
  text-align: center;
}

footer .container {
  padding: 2vh 0;
  min-height: 9vh;
  color: var(--main-font-color);
  background-color: var(--background-box);
  transition: background-color 100ms linear;
  display: flex;
  justify-content: center;
  border-top: 0.1vw solid var(--complimentary-color);
}
footer .container .subFooter {
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .container .footerLogo {
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .container .footerLogo .logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .container .footerLogo .logo img {
  width: calc(var(--standard-font-size) * 0.66);
  height: auto;
  display: inline-block;
}
footer .container .footerLogo .logo h1 {
  padding-left: 0.4vw;
  display: inline-block;
  color: var(--main-font-color);
  font-weight: 600;
  font-size: calc(var(--standard-font-size) * 1.25);
}
footer .container .copyright {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
footer .container .copyright p {
  margin: 0;
  font-size: calc(var(--standard-font-size) * 1);
  margin-block-start: 0;
  margin-block-end: 0;
}
footer .container .copyright a {
  color: var(--main-font-color);
  font-size: calc(var(--standard-font-size) * 0.8);
  margin-block-start: 0;
  margin-block-end: 0;
  margin: 0;
}
footer .container .contactMe {
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .container .contactMe img.email {
  width: calc(var(--standard-font-size) * 0.9);
  height: auto;
  display: inline-block;
}
footer .container .contactMe p {
  margin: 0;
  font-size: calc(var(--standard-font-size) * 0.9);
  padding-left: 0.45vw;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Loader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  z-index: 99999;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: calc(var(--standard-font-size) * 7.8);
  height: calc(var(--standard-font-size) * 7.8);
  margin: calc(var(--standard-font-size) * -3.9) 0 0
    calc(var(--standard-font-size) * -3.9);
  border-radius: 50%;
  border: calc(var(--standard-font-size) * 0.16) solid transparent;
  border-top-color: rgba(var(--loader-color), 0.5);
  transition: border-top-color 300ms linear;
  animation: spin 2s linear infinite;
}

#loader:before {
  content: "";
  position: absolute;
  top: calc(var(--standard-font-size) * 0.26);
  left: calc(var(--standard-font-size) * 0.26);
  right: calc(var(--standard-font-size) * 0.26);
  bottom: calc(var(--standard-font-size) * 0.26);
  border-radius: 50%;
  border: calc(var(--standard-font-size) * 0.16) solid transparent;
  border-top-color: rgba(var(--loader-color), 0.75);
  transition: border-top-color 300ms linear;
  animation: spin 3s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: calc(var(--standard-font-size) * 0.78);
  left: calc(var(--standard-font-size) * 0.78);
  right: calc(var(--standard-font-size) * 0.78);
  bottom: calc(var(--standard-font-size) * 0.78);
  border-radius: 50%;
  border: calc(var(--standard-font-size) * 0.16) solid transparent;
  border-top-color: rgba(var(--loader-color), 1);
  transition: border-top-color 300ms linear;
  animation: spin 1.5s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--------------*/
.scrollbarContainer {
  position: fixed;
  right: 0;
  z-index: 499;
  width: 0.4vw;
  height: 100vh;
  background-color: rgba(var(--scrollbar-color), 0.4);
  display: block;
}
.scrollbarContainer .scrollbar {
  width: 0.6vw;
}
.scrollbarContainer .scrollbar .scrollbarProgress {
  width: 0.4vw;
  height: 25vh;
  background-color: rgba(var(--scrollbar-color), 1);
  border-radius: 3vw;
  transition: border-radius 100ms linear;
}
.scrollbarContainer .scrollbar .scrollbarProgress.atTop {
  border-top-right-radius: 0vw;
  border-top-left-radius: 0vw;
}
.scrollbarContainer .scrollbar .scrollbarProgress.atBottom {
  border-bottom-right-radius: 0vw;
  border-bottom-left-radius: 0vw;
}

@media only screen and (max-width: 480px) {
  /* Phone */
  header .logo a img {
    width: calc(var(--standard-font-size) * 0.8);
  }
  header .logo a h1 {
    font-size: calc(var(--standard-font-size) * 1.6);
    padding: 0.5vw 0 0.5vw 1.5vw;
  }
  header .optionsContainer .options ul li a {
    font-size: calc(var(--standard-font-size) * 1.2);
    padding: 3vw 4vw;
    margin: 0 1.5vw;
  }
  header .optionsContainer .themeContainer .circleThemeParent .hoverText {
    display: none;
    /*font-size:changeToCalcFont(standard-font-size, 2);
    margin-left:3vw;
    padding:0;*/
  }
  .circleTheme {
    height: 2vw;
    width: 2vw;
    box-shadow: 0 0 0 0.2vw var(--main-font-color);
  }
  .themeSettings {
    right: 0;
    display: block;
  }
  .themeSettings .circleThemeParentSetting {
    padding: 3vw 4vw;
  }
  .themeSettings .circleThemeParentSetting .circleTheme {
    width: 2.9vw;
    height: 2.9vw;
  }
  .themeSettings .circleThemeParentSetting .hoverTextSetting {
    visibility: hidden;
  }
  .sideContent {
    min-width: 45vw;
    height: 150%;
  }
  .sideContent .xCloseParent {
    margin: 4.5vw 3vw;
  }
  .sideContent .xCloseParent .xClose {
    width: 6vw;
    height: 6vw;
  }
  .sideContent .xCloseParent .xClose::before,
  .sideContent .xCloseParent .xClose::after {
    left: 3vw;
    height: 6vw;
    width: 0.12vw;
  }
  .sideContent .sideContainer {
    margin-left: 3vw;
  }
  .sideContent .sideContainer .contentDivider {
    margin: 2.8vw 0;
  }
  .sideContent .sideContainer .contentDivider ul {
    padding-left: 2.5vw;
    margin: 1vw 0 1.4vw 0;
  }
  .sideContent .sideContainer .contentDivider ul li {
    margin: 2.8vw 0;
  }
  .sideContent .sideContainer .contentDivider h2 a {
    font-size: calc(var(--standard-font-size) * 1.4);
  }
  .sideContent .sideContainer .contentDivider h3 {
    font-size: calc(var(--standard-font-size) * 1.2);
  }
  .sideContent .sideContainer .contentDivider a {
    font-size: calc(var(--standard-font-size) * 1);
  }
} /*# sourceMappingURL=common.css.map */