*
{
  padding: 0;
  margin: 0;
  border: 0;
  background-color: rgba(0, 0, 0, 0);
  color: rgb(244, 244, 244);
  font-size: 1em;
}

h1, h2, h3
{
  text-align: center;
}
h1
{
  font-size: 2em;
}

#main
{
  width: 100%;
}

#wallpaper
{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -4;
}

#noos
{
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  height: 70vh;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#noosctrl
{
  width: 60%;
  margin-top: 10%;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#noosprev:hover, #noosnext:hover
{
  background-color: rgba(255, 0, 0, 0.8);
}

#noosdots
{
  background-color: rgba(170, 170, 170, 1);
}

#socials
{
  display: flex;
  flex-direction: row;
  row-gap:10px;
  position: fixed;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  top: 5%;
  right: 5%;
  height: 7%;
  justify-content: flex-start;
}

.soc
{
  height: 100%;
}

.navb
{
  display: flex;
  text-decoration: none;
  background-color: rgb(150, 150, 150);
  border-radius: 10px;
  padding: 2px;
  height: 80%;
  align-items: center;
}

.navb:hover
{
  background-color: rgb(200, 200, 200);
}

#menu
{
  background-color: rgba(200, 0, 0, 0.4);
  position: fixed;
  left: 5vh;
  top: 5vh;
  bottom: auto;
  width: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 2;
}

#menuitems
{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.menuitem
{
  background-color: rgba(33, 33, 33, 0.7);
  backdrop-filter: blur(2px);
  width: 16vh;
  height: 16vh;
  border-radius: 50%;
  border-color: rgb(80, 255, 80);
  border-width: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(200, 200, 255);
  user-select: none;
}

.menuitem:hover
{
  color: rgb(200, 200, 255);
  cursor: hand;
  background-color: rgba(135, 135, 135, 0.7);
}

#space
{
  height: 5vh;
  width: 0;
}

#logo
{
  width: 16vh;
  background-color: rgba(180, 180, 180, 0.7);
  backdrop-filter: blur(2px);
  border-radius: 50%;
}

@media(orientation: portrait)
{
  #menu
  {
    top: auto;
    bottom: 10vh;
    flex-direction: row;
    width: auto;
    height: 10vw;
  }
  #menuitems
  {
    flex-direction: row;
  }
  #space
  {
    height: 0;
    width: 5vw;
  }
  .menuitem
  {
    width: 16vw;
    height: 16vw;
  }
  #logo
  {
    width: 16vw;
  }
}



#content
{
  //position: fixed;
  width: 100%;
  //height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  z-index: -1;
}

.panel
{
  width: 70%;
  max-height: 90vh;
  padding: 2%;
  margin: 5vh;
  position: relative;  
  display: block;
  overflow-y: auto;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

#footer
{
  position: fixed;
  bottom: 0;
  text-align: center;
  background-color: rgba(100, 100, 100, 0.8);
  width: 100%;
}