:root {
  --main-bg-color: #0A1930;
  --main-color: #64FFDA;
  --main-padding: 30px;
  --font-sans: "Calibre","Inter","San Francisco","SF Pro Text",-apple-system,system-ui,sans-serif;
  --p-font-color: #65708C;
  --header-height: 70px;
  --header-margin: 20px;
  --section-margin: 100px;
  --info-side-width: 100px;
}


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


.cat{
    position: fixed;
    top:50vh;
    right:-400px;
    border-radius: 30px;
    transform: translate(+50%, -50%);
    animation: cat 3s ease-in;
}

.header{
  display:flex;
  height: var(--header-height);
  padding: 0px var(--main-padding);
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  position:fixed;
  z-index: 9;
  width:100vw;
  background-color: var(--main-bg-color);
  transition: top 0.2s ease-in-out;
}

.header-space{
  height: calc(var(--header-height) + var(--header-margin));
}

.logo{
  display: flex;
}

#terminal-container{
  background-color:#CCD6F6;
  width: 99%;
  height:80vh;
  display: flex;
  padding: 20px;
  border-radius: 10px;
}

#terminal-element{
  width:100%;
  height:100%;
  border-radius: 10px;
  background-color: black;
  overflow-y: auto;
}


.main-container{
  display: flex;
}

.info-side{
  display:flex;
  width: var(--info-side-width);
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.info-side > *{
  display: flex;
  margin-bottom: 20px;
}

.info-side a{
  text-decoration: none;
}

.content-side{
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh);
  width: calc(100vw - var(--info-side-width));
}


.info-line{
  width: 1px;
  height: 100px;
  display: flex;
  background-color: #233554;
}


.info-side i{
  font-size:30px;
  color:#CCD6F6;
  transition-duration: 500ms;
  position: relative;
  top:0px;
}

.info-side i:hover{
  color:var(--main-color);
  top:-3px;
  cursor: pointer;
}

@media (max-width: 760px){
  .info-side{
    display:none;
  }
  .content-side{
    overflow-y: auto;
    max-height: calc(100vh);
    width: 100vw;
  }
  #terminal-container{
    height:50vh;
    padding: 5px;
    width: 100%;
  }
}



::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

@keyframes cat{
    0%{
      right: -400px;
    }
    20%{
        right: 50vw;
    }
    80%{
        right: 50vw;
    }
    100%{
      right: 120vw;
    }
}