@font-face {
    font-family: 'Barrio';
    src: url('https://cdn.glitch.global/5573e64d-712c-40a3-96aa-a09e80ee2e3b/Barrio-Regular.ttf?v=1713134852794') format('truetype');
}

@font-face {
    font-family: 'Micro5';
    src: url('https://cdn.glitch.global/5573e64d-712c-40a3-96aa-a09e80ee2e3b/Micro5-Regular.ttf?v=1713173809835') format('truetype');
}

@font-face {
    font-family: 'Caveat';
    src: url('https://cdn.glitch.global/5573e64d-712c-40a3-96aa-a09e80ee2e3b/Caveat-Regular.ttf?v=1713220959826') format('truetype');
}

body {
  margin: 0;
  color: white;
  background: black;
  font-family: 'Caveat';
}

.menu {
  font-family: 'Micro5';
  display: flex;
  justify-content: space-between;
  padding: 30px 30px;
  align-items: center;
}

.menu-item-left {
  font-size: 46px;
  order: 1;
  width: 1160px;
}

.menu-item-center {
  font-size: 40px;
  order: 2;
  width: 180px; 
}

.menu-item-right {
  font-size: 40px;
  order: 3;
  width: 10px;
}

.menu-item-lower {
  font-size: 84px;
  order: 4;
  position: absolute; /* Position the element relative to its nearest positioned ancestor */
  bottom: 30px; 
  right: 80px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: pink;    
  text-shadow: none;
} 

a.menu-item-center, a.menu-item-right {
  color: gray;
}

a.menu-item-center:hover, a.menu-item-right:hover {
  color: white;
  text-shadow: 20px 10px 40px pink;
}


element::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.left-arrow {
  color: black;
  position: fixed;
  font-size: 50px;
  top: 20px;
  left: 30px;
}

.left-arrow:hover {
  color: pink; 
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}