@import url(fonts.css);
@import url(palette.css);

:root{/**/
  --general-width: 11vw;
  --general-height: 8vh;
  --font-size: 2vh;
}

body {/**/
  margin: 0px 0px;
  position: relative;
  background-color: var(--haiti);
}

#shader-bg-canvas {/**/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.header{/**/
  width: calc(var(--general-width)*8);
  height: var(--general-height);
  margin: auto;
  background-color: var(--haiti);

  transition: all 0.3s ease;
  z-index: 10;
}

.header-content{/**/
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo{/**/
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;

  font-family: Arcane Nine;
  font-size: var(--font-size);
  color: var(--zero-point);
}

.logo .logo-img{/**/
  width: auto;
  height: 60%;
  margin: 0 0.5vh 0 0;
}

.interaction{/**/
  width: calc(var(--general-height)*2);
  height: calc(var(--general-height)*0.6);
  background-color: var(--zero-point);
  border-radius: 1000px;  

  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.interaction a{
  height: 80%;
  color: var(--haiti);
}

.interaction a img {
  height: 100%;
  display: block;
}

.hr{ /**/
  width: auto;
  height: 0.15vh;
  background: var(--zero-point );
}

.footer{/**/
  position: fixed;
  bottom: 0;
  left: 0;

  width: 100%;
  height: calc(var(--general-height)*1.6);

  display: flex;
  justify-content: center;
  align-items: center; 
}

.navbar{ /**/
  width: calc(var(--general-height)*4);
  height: calc(var(--general-height)*0.6);
  background-color: var(--zero-point);
  border-radius: 1000px;
}

.wrapper{/**/
  width: calc(var(--general-width)*8);
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.primary{
  background-color: var(--periwinkle);
  border-radius: var(--font-size);
  margin: var(--font-size) 0;
}

.accent{
  background-color: var(--blue-nebula);
  border-radius: var(--font-size);
}

.content{
  height: calc(var(--general-width)*7);
  width: calc(var(--general-width)*7);
}