:root{
  background-color: rgb(37, 37, 41);
}
:root.dark {
  --bg-color: 17, 17, 20;
  --bg-color-secondary: 37, 37, 41;
  --alt-color: 0, 105, 147;
  --text-color: 201, 201, 204;
  --icon-color: 99, 98, 98;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  font: 14px "Montserrat", sans-serif;
  background-color: rgb(var(--bg-color-secondary, 201, 201, 204));
  color: rgb(var(--text-color, 17, 17, 20));
}

body.hidden{
  display: none;
}

a {
  color: #00B7FF;
}

h1 {
  font-weight: 900;
  font-size: 2rem;
}

h2 {
  font-weight: 700;
  font-size: 2rem;
}

p {
  font-weight: 400;
}



.geek-info-container{
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: .5rem;
  left: .5rem;
  z-index: 10;
  transition: background-color 0.6s ease;
}

.geek-info-container.active{
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
  top: 0;
  left: 0;
  z-index: 10;
}

.bgeek-info{
  width: 2rem;
  position: absolute;
  top: .5rem;
  left: .5rem;
  fill: rgb(var(--icon-color, 17, 17, 20));
  transition: scale 0.5s ease;
}

.bgeek-info:hover{
  scale: 1.1;
}

.bgeek-info.active{
  fill:rgb(217 59 59);
  left: unset;
  top: .5rem;
  width: 4rem
}

.bgeek-info.active:hover{
  scale: 1.1;
}

.bgeek-info.active > svg path{
  d: path("m480-449 132.92 131.92q5.39 6.39 14.62 6.77 9.23.39 16.38-6.77 6.16-6.15 6.16-15 0-8.84-6.16-16L511-480l132.92-132.92q5.39-5.39 5.77-14.62.39-9.23-5.77-16.38-7.15-6.16-16-6.16-8.84 0-15 6.16L480-511 348.08-643.92q-6.39-5.39-15.62-5.77-9.23-.39-15.38 5.77-7.16 7.15-7.16 16 0 8.84 7.16 15L449-480 317.08-348.08q-6.39 6.39-6.77 15.62-.39 9.23 6.77 15.38 6.15 7.16 15 7.16 8.84 0 16-7.16L480-449Zm.13 345q-78.08 0-146.27-29.86-68.19-29.86-119.14-80.76-50.95-50.9-80.83-119.03Q104-401.78 104-479.87q0-77.56 29.92-146.37 29.92-68.8 80.92-119.91 51-51.12 119.03-80.48Q401.9-856 479.87-856q77.55 0 146.35 29.34 68.79 29.34 119.92 80.42 51.13 51.08 80.49 119.84Q856-557.64 856-480.05q0 78.36-29.34 146.21-29.34 67.85-80.41 118.9-51.07 51.05-119.81 81Q557.7-104 480.13-104Zm-.13-43.77q137.9 0 235.06-97.28 97.17-97.28 97.17-234.95 0-137.9-97.17-235.06Q617.9-812.23 480-812.23q-137.67 0-234.95 97.17Q147.77-617.9 147.77-480q0 137.67 97.28 234.95T480-147.77ZM480-480Z");
}



.geek-info{
  /* display: none; */
  opacity: 0;
  position: absolute;
  transition: opacity 0.5s ease;
  z-index: -1;
  width: 0;
  height: 0;
  /* top: -100vh; */
}

.geek-info > h2,
.geek-info > p,
.geek-info > div {
  display: none;
}

.geek-info.active > h2,
.geek-info.active > p {
  display: revert;
}

.geek-info.active > .redis-connections {
  display: flex;
}

.geek-info.active{
  display: flex;
  flex-direction: column;
  opacity: 1;
  padding: 1rem;
  top: unset;
  border-radius: .5rem;
  position: absolute;
  width: 50vw;
  height: 100vh;
  margin-top: 6rem;
  max-width: fit-content;
  max-height: 70vh;
  backdrop-filter: blur(10px);
  background-color: rgba(var(--bg-color-secondary, 201, 201, 204), .85);
}

.geek-info.active h2 {
  padding-bottom: 0;
  margin-bottom: 0;
}

.geek-info.active p {
  margin-left: 2rem;
  margin-top: 0;
  margin-bottom: 0;

}

.redis-connections {
  /* display: flex; */
  flex-direction: column;
  /* height: 50%; */
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}

.redis-connections:hover{
  scrollbar-color: rgb(var(--alt-color, 0, 183, 255)) transparent;
}

.redis-connections > .table-today > table {
  max-height: 30%;
  height: fit-content;
  width: fit-content;

}

.connection {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* gap: 1.5rem; */
  padding: 0;
  margin-left: 2rem;
  margin-top: 0;
  margin-bottom: 0;
  text-wrap-mode: nowrap;
}

.connection-client {
  width: 30%;
  font-weight: 700;
}

.connection-client > span.hidden {
  display: none;
}

.connection-details {
  display: flex;
  /* flex-direction: row; */
  /* flex: 1; */
  /* gap: 1.5rem; */
  /* justify-content: space-evenly; */
  /* width: 80%; */
}
.connection > .connection-details > p {
  width: 25%;
  /* box-sizing: border-box; */
  /* margin: .25rem; */
  padding: 0;
  text-wrap-mode: nowrap;
  text-overflow: ellipsis;
}

.theme-container {
  position: fixed;
  right: .5rem;
  display: flex;
  z-index: 9;
}

.theme-container > div {
  cursor: pointer;
  position: absolute;
  border-bottom: 1px solid rgb(20, 20, 20);
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  opacity: 1;
  overflow: hidden;
  transition: opacity 0.3s ease, border-color 0.5s ease;
}

.theme-container > div:hover {
  border-color: transparent;
}

.theme-container > div.active {
  opacity: 0;
  z-index: -1;
}

.theme-container svg {
  width: 100%;
  height: 100%;
  margin-top: 30%;
  transition: margin  0.75s ease, opacity 1.2s ease;
  fill: rgb(var(--icon-color), 17, 17, 20);
}

.theme-container > .light > svg{
  fill: rgba(255, 255, 0, 0.25);
}

.theme-container > .light > svg:hover{
  fill: rgba(255, 255, 0, 0.5);
  margin: 0;
}

.theme-container > .dark > svg:hover{
  margin: 0;
  border: none;
}

.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.base {
  width: 90vw;
  display: flex;
  margin: 0 auto;
  height: 75vh;
  background-color: rgb(var(--bg-color, 255, 255, 255));
  border-radius: .35rem;
  position: relative;
}

.base > .content > .details > h2:first-of-type,
.base > .contact > .details > h2:first-of-type,
.base > .references > .details > h2:first-of-type,
.base > .expertise > .details > h2:first-of-type {
  margin-top: 0;
}
.base > .content > .details > h2,
.base > .contact > .details > h2,
.base > .references > .details > h2,
.base > .expertise > .details > h2 {
  margin-bottom: 0;
}

.base > .content.active,
.base > .contact.active,
.base > .references.active,
.base > .expertise.active {
  display: flex;
}

.nav {
  display: flex;
  flex-direction: column;
  z-index: 2;
  height: 100%;
}

.nav > div:first-of-type{
  margin-top: auto;
}

.nav > div {
  cursor: pointer;
  border-left: 2px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: .5rem;
  fill: rgb(var(--icon-color, 73, 70, 67));
  transition: order 0.3s ease, scale 0.3s ease, fill 0.3s ease, border-color 1.4s ease;
}

.nav > .download{
  margin-top: auto;
  border: unset;
}

.nav > .download:hover {
  scale: 1.1;
  border: unset;
}


.nav > div:hover {
  border-color: rgb(var(--icon-color, 73, 70, 67));
  scale: 1.1;
}

.nav > div > svg {
  width: 2rem;
}

.nav > div.selected{
  cursor: default;
  border-color: rgb(var(--alt-color, 0, 183, 255));
  scale: 1.1;
}

.tooltip {
  position: absolute;
  left: 150%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(var(--bg-color-secondary), 95, 95, 95, 0.2);
  backdrop-filter: blur(1.5rem);
  color: rgb(var(--text-color, 255, 255, 255));
  padding: 1rem;
  border-radius: 0.25rem;
  font-size: 1.25rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
  
}

.nav > div:hover > span.tooltip {
  opacity: 1;
  visibility: visible;
}

.profile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 43%;
  margin: -2% 0;
  position: relative;
  overflow: hidden;
  border-radius: .5rem;
  z-index: 1;
  box-shadow: 
  -10px 0 12px -4px rgba(0, 0, 0, 0.5),
  10px 0 12px -4px rgba(0, 0, 0, 0.5);
}

.profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: radial-gradient(transparent, rgba(255, 255, 255, 1));
}

.profile-overlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: 20%;
  width: 100%;
}

.profile-name {
  color: rgb(var(--text-color, 255, 255, 255));
}

.profile-name h1 {
  font-size: 3.5rem;
  margin: 0;
}

.profile-title {
  color: rgb(0, 183, 255);
}

.profile-title h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}

.profile-name, .profile-title {
  text-align: center;
}

.content {
  display: none;
  width: 60%;
  padding: 0 1rem 1rem;
}

.content.active{
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}

.content.active:hover{
  scrollbar-color: rgb(var(--alt-color, 0, 183, 255)) transparent;
}

.content h1 {
  font-size: 4rem;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
}

.content h2 {
  font-size: 2rem;
  font-weight: 700;
}

.contact {
  display: none;
  width: 60%; /* Remaining 60% of base */
  padding: 0 1rem 1rem;
}

.contact.active{
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  /* scrollbar-base-color: #00B7FF; */
}

.contact h1 {
  font-size: 4rem;
}

.contact h2 {
  font-size: 2rem;
  font-weight: 700;
}

.contact > .details > p,
.references > .details > p {
  margin-left: 2rem;
  margin-top: .25rem;
  font-weight: 500;
}

.references {
  display: none;
  width: 60%; /* Remaining 60% of base */
  padding: 1rem;
}

.references.active{
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-base-color: rgb(0, 183, 255);
}

.references h1 {
  font-size: 4rem;
}

.references h2 {
  font-size: 2rem;
  font-weight: 700;
}

.expertise {
  display: none;
  width: 60%; /* Remaining 60% of base */
  padding: 1rem;
}

.expertise.active{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-base-color: rgb(0, 183, 255);
}

.expertise h1 {
  font-size: 4rem;
}

.expertise h2 {
  font-size: 2rem;
  font-weight: 700;
}

.expertise > .details{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow-y: hidden;
  overflow-x: auto;
  height: 80%;
}

.expertise > .details > h2 {
  margin-bottom: 0;
  margin-top: 0;
  margin-left: .5rem;
}
/* .expertise > .details > h2:first-of-type {
  margin-top: 0;
  margin-bottom: 0;

} */
.expertise > .details > p {
  margin-left: 1.5rem;
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 1099px){
  :root {
    --bg-color: 17, 17, 20;
    --bg-color-secondary: 37, 37, 41;
    --alt-color: 0, 105, 147;
    --text-color: 201, 201, 204;
    --icon-color: 99, 98, 98;
  }
  body {
    padding: 0;
    margin: 0;
    font: 18px "Montserrat", sans-serif;
    background-color: rgb(var(--bg-color-secondary, 201, 201, 204));
    color: rgb(var(--text-color, 0, 0, 0));
    width: 100vw;
    height:  100vh;
    overflow: hidden;
  }
  
  a {
    color: rgb(0, 183, 255);
  }
  
  h1 {
    font-weight: 900;
    font-size: 2rem;
  }
  
  h2 {
    font-weight: 700;
    font-size: 2rem;
  }
  
  p {
    font-weight: 400;
  }

  .geek-info.active{
    width: 95%;
    max-width: unset;
    height: fit-content;
    max-height: 80%;
    padding: .25rem
  }
  .geek-info.active > p {
    margin-left: 1rem;
  }
  .redis-connections{
    max-width: 100%;
    width: 100%;
    overflow: auto;
  }
  .connection-client{
    flex: 1 1 20%;
  }
  .connection-details{
    width: 30%;
    justify-content: unset;
    gap: 1.5rem;
    flex: 1;
  }
  .connection{
    justify-content: unset;
    width: 100%;
    flex: 1;
    margin-left: 1rem;
  }
  .connection > .connection-details > p {
    width: fit-content;
    flex: 1 1 100%;
    margin: 0;
  }
  
  .theme-container {
    display: none;
  }
  .nav{
    /* display: none; */
    height: 0;
    width: 0;
    position: absolute;
    top: .5rem;
    right: .5rem;
  }
  .nav > div {
    display: none;
  }
  .nav > .download{
    display: block;
    position: absolute;
    top: .5rem;
    right: .5rem;
    margin-top: 0;
    border: unset;
  }
  .nav > .download > span {
    display: none;
  }

  .page-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  .base {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    border-radius: unset;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-color: transparent;
    z-index: 2;
  }

  .base > .content,
  .base > .contact,
  .base > .references,
  .base > .expertise {
    margin: 0;
    padding: 0;
    width: 98vw;
    display: block;
    height: 6vh;
    overflow: hidden;
    background-color: rgba(var(--bg-color, 255, 255, 255), .4);
    backdrop-filter: blur(2px);
    order: 1;
    z-index: 2;
    transition: height 0.6s ease;
  }

  .base > .content > h1,
  .base > .contact > h1,
  .base > .references > h1,
  .base > .expertise > h1 {
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
    font-size: 6vh;

  }

  .base > div > .details{
    overflow-y: auto;
    overflow-x: hidden;
    /* max-height: 54vh; */
  }

  .base > .content.active,
  .base > .contact.active,
  .base > .references.active,
  .base > .expertise.active {
    /* display: block; */
    max-height: fit-content;
    height: 60%;
    border-radius: .25rem;
  }
  
  .profile {
    display: flex;
    position: absolute;
    border-radius: unset;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;
  }

  .profile-overlay{
    top: 3rem;
    bottom: unset;
  }

  .profile-overlay > .profile-name > h1{
    font-size: 2rem;
  }

  .profile-overlay > .profile-title > h2 {
    font-size: 1rem;
  }
  
  .base > .content > .details {
    scrollbar-color: rgb(var(--alt-color)) transparent;
    scrollbar-width: thin;
  }

  .references > .details {
    scrollbar-color: rgb(var(--alt-color)) transparent;
    scrollbar-width: thin;
  }

  .base > .expertise {
    display: flex;
    flex-direction: column;

  }
  .base > .expertise > .details{
    overflow-y: hidden;
    overflow-x: scroll;
    scrollbar-color: rgb(var(--alt-color)) transparent;
    scrollbar-width: thin;
  }
}