@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
html {
scroll-behavior: smooth;
}
body {
background-color: rgb(20,20,20);
overflow: auto;
margin-bottom: auto;

}

.navlogo {
position: relative;
width: 320px;
height: 85px;
}
.nav {
position: fixed;
top: 0;
z-index: 20;
}
.headerbg {
position: fixed;
height: 50%;
width: 100%;
top: 0;
left: 0;
background-color: rgb(129, 183, 201);
align-content: center;
text-align: center;
}
.header {
font-family: 'Krona One', sans-serif;
font-size: 85px;
color: white;
}
.subtext {
font-family: 'Roboto Mono', monospace;
font-weight: 500;
font-size: 25px;
color: white;
opacity: 0;
}
.headertext {
position: fixed;
height: 90%;
width: 100%;
top: 10%;
left: 0;
}
#connect {
position: fixed;
height: 50%;
width: 100%;
top: 50%;
left: 0;
background-color: rgb(54, 89, 105);
align-content: center;
text-align: center;
}
#support {
position: absolute;
height: 50%;
width: 100%;
top: 100%;
left: 0;
background-color: rgb(30, 50, 59);
align-content: center;
text-align: center;
}

.menuitemdiv{
position: fixed;
top: 4%;
right: 100;
}
.menuitemlink{
opacity: 1;
z-index: 21;

}
.menuitemlinkb{
opacity: 1;
z-index: 21;

}
a {
font-family: 'Roboto Mono', monospace;
font-weight: 500;
color: white;
font-size: 25px;
text-align: center;
padding-right: 20px;
padding-left: 20px;
text-decoration: none;
position: relative;
vertical-align: middle;
}
a:hover {
color: white;

}
a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}
a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}