@font-face  {
  font-family: Bluetea; /*Internal name of the font you'll use for this stylesheet.*/
  src: url("/fonts/Bluetea.ttf"); /*Put the url of the font on your site here. DO NOT HOTLINK.*/
}

@font-face {
  font-family: Cheesy; /*Internal name of the font you'll use for this stylesheet.*/
  src: url("/fonts/Cheese Milky.otf"); /*Put the url of the font on your site here. DO NOT HOTLINK.*/
}

@font-face  {
  font-family: Sweetie;
  src: url("/fonts/Sweet Cucumber Mocktail.ttf");
}

body {
  background: #222 url("/img/bluestarbg.png") repeat; /*Replace with your own background image.*/
	background-attachment: fixed;
  background-position:center;
	color: white;
	font-size: 13.5px;
	font-family: "Liberation Mono", "Source Code Pro", "Courier New", monospace;
	text-align:center;
	cursor: url("/img/Fish-Blue.png"), default;
  }
  
a {
  color: #33c1ff;
  }
  
a:hover {
  cursor: url("/img/Fish-Blue.png"), pointer;
  text-decoration: underline dotted purple;
  }
  

nav1 {
  display: block;
  position: absolute;
  float: right;
  margin-left: 800px;
  top: 250px;
  }
  
nav1 .navlink {
  display: block;
  margin: 15px 0px;
  padding: 5px 2px;
  width: 100px;
  text-align: center;
  background: #8f5635;
  font-family: "Bluetea";
  font-size: 1.5em;
  border-radius: 0px 15px 15px 0px
  }
  
nav1 .navlink a {
  color: #000;
  text-decoration: none;
  }

nav1 .navlink:hover, nav1 .navlink:focus-within {
  background: #592f16;
  transition:ease 0.5s; /*So the tab button appears to 'move' instead of instantly changing and popping outwards.*/
  }
 
  nav3 {
  display: block;
  position: absolute;
  float: left;
  margin-right: 800px;
  top: 250px;
  left: 260px;
  
  }
  
nav3 .navlink {
  display: block;
  margin: 15px 0px;
  padding: 5px 2px;
  width: 100px;
  text-align: center;
  background: #8f5635;
  font-family: "Bluetea";
  font-size: 1.5em;
  border-radius: 15px 0px 0px 15px
  }
  
nav3 .navlink a {
  color: #000;
  text-decoration: none;
  }

nav3 .navlink:hover, nav3 .navlink:focus-within {
  background: #592f16;
  transition:ease 0.5s; /*So the tab button appears to 'move' instead of instantly changing and popping outwards.*/
  }

.main {
  margin: 0 auto;
  width: 800px;
  height:450px;
  background: rgb(10, 10, 10, 0.9);
  border-radius: 20px;
  margin-top: 120px;
  margin-bottom: 40px;
  /*Quick guide to box-shadow:
    First two numbers are vertical and horizontal offset.
    Third number is how far to spread the fuzzy effect.
    Fourth number is how much solid border/shadow there should be before the fuzzy effect begins.
  */
  box-shadow: 0px 0px 15px 2px #3770ad;
  }

.main-inner {
  padding: 25px;
  padding-top: 15px;
  padding-bottom: 15px;
  }
  
/*Prevent image overflow*/  
.main img {
  max-width: 100%;
  height: auto;
}

.footer {
  margin: 0 auto;
  padding: 15px;
  padding-top: 0px;
  margin-top: -20px;
  text-align: center;
  font-size: 12px;
  }

/*Mobile compatibility*/
@media(orientation: portrait) {
    .main {
      width: 80%;
      }
  }