@import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap");

:root {
  --background-colorWWW: rgb(25, 25, 25);
  --background-color: rgb(224, 206, 39);
  --background-color-menu: rgb(20, 20, 20);
  --border-color: rgb(50, 50, 50);
  --color: rgb(230, 230, 230);
  --color-hover: rgb(190, 190, 190);
  --color-pri: rgb(145, 17, 17);
  --color-sec: rgb(0, 225, 116);
  --color-acc: rgb(96, 21, 78);
  --color-pri-alpha: rgba(145, 17, 17, 0.5);
  --color-sec-alpha: rgba(0, 225, 116, 0.5);
  --color-acc-alpha: rgba(96, 21, 78, 0.5);
  --color-anim: 0.2s;
}

body {
  margin: 0px;
  font-family: Comfortaa;
  background-color: var(--background-color);
  color: var(--color);
}

.sidebar {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0px;
  left: -360px;
  width: 360px;
  height: 100vh;
  background-image: linear-gradient(
    to bottom right,
    var(--color-pri-alpha),
    var(--color-acc-alpha)
  );

  transition: left 0.2s;
}

.open-sidebar-button {
  position: relative;
  display: block;
  margin: 10px;
  top: 0px;
  left: 70px;
  opacity: 1;
  visibility: visible;
  width: 50px;
  height: 50px;

  transition: top 0.2s 150ms, opacity 0.2s 50ms, visibility 0.2s 50ms;
}

.close-sidebar-button {
  opacity: 1;
  visibility: visible;
  margin: 10px;
  width: 50px;
  height: 50px;

  transition: opacity 0.1s;
}

.sidebarIcons {
  width: 50px;
  height: 50px;
}

.sidebarIcons:hover {
  cursor: pointer;
}

.sidebarHeader {
  display: flex;
  align-items: center;
  width: 360px;
  height: 70px;
}

.sidebarHeaderText {
  width: 220px;
  font-family: Comfortaa;
  font-size: 42px;
  font-weight: 600;
}

.sidebarBorder {
  z-index: -1;
  position: relative;
  height: 4px;
  border-radius: 2px;
  background-color: white;
  opacity: 0.1;
}

.projects-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 10px 40px;
}

.projects-language {
  display: flex;
  padding: 5px 10px;
  width: fit-content;
  border-radius: 25px;
  cursor: pointer;
  transition: color var(--color-anim), background-color var(--color-anim);
}

.projects-language:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--color-hover);
}

a {
  color: var(--color);
  text-decoration: none;
  user-select: none;
}

a:hover {
  color: var(--color-hover);
  transition: color var(--color-anim);
}

.projects {
  margin: 0px 0px 0px 10px;
  padding: 10px;
  font-size: 18px;
  line-height: 26px;

  transition: height 200ms;
}

.projects-dropdown-overflow {
  width: 320px;
  overflow: hidden;
  height: 0px;

  transition: height 200ms;
}

.projects-dropdown {
  font-family: Comfortaa;
  font-size: 24px;
  user-select: none;
  margin-bottom: 0px;
}

.projects-dropdown-button {
  margin-left: 10px;
  width: 25px;
  height: 25px;
  transition: rotate 0.2s;
}