@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@400;700&display=swap');

html {
  height:100%;
  box-sizing: border-box;
}
body {
background:#000;
font-family: Roboto, arial;
color:#b6b6b6;

min-height: 100%;
position:relative;
margin:0;
padding-top:110px;
box-sizing: inherit;
}

h1, h2, h3, h4 {
  color:#fff;
	text-transform:uppercase;
	font-weight:bold
}

h1 {
	font-size:46px;
	margin-top:50px
}

h2 {
	font-size:28px;
	margin:50px 0 10px;
	color:#edffc0
}

h3 {
	font-size:18px;
	margin:30px 0 10px;
	color:#fffef5
}



a {
    color:#fff;
    text-decoration:none
}

a:hover {
    color:#fff;
    text-decoration:underline
}

a.gobutton {
  display:block;
  text-decoration:none;
  background:#2c6528;
  color:#fff;
  padding:10px;
  margin:30px auto 0;
  border:solid 1px #1b1b1b;
text-align:center;
width:280px;
font-size:18px
}

a.gobutton:hover {
  color:#fff;
  background:#31a728;
}

li.anni a {
  background:#ebd322!important;
  color:#111003!important;
  font-weight:bold;
  border:solid 2px #beab1f!important;
}

.nohighlight {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

i.online {
color:#090;
font-size:9px;
margin:0 3px 0px 0;
position:relative;
top:-0.21em
}



p.lastupdated {
	font-style:italic;
	font-size:90%;
	color:#777
}

p.views {
	font-size:12px;
	color:#555;
  text-align:center;
	margin:20px 0 0;
}



img.minecraftimg {
	width:100%;
	margin:0 auto 60px;
	display:block
}


#logo {
width:100px;
margin:18px 25px 0 0
}

#logo img {
  width:100%
}

#discordbtn {
  width:150px;
margin:20px;
position:absolute;
right:20px;
top:10px
}

#discordbtn img {
width:100%
}

.youtube-video-wrapper {
	max-width:700px;
	margin:60px auto
}

.youtube-frontpage-video-wrapper {
	max-width:900px;
	margin:60px auto
}

.youtube-video {
  aspect-ratio: 16 / 9;
	width:100%
}


header {
display: flex;
justify-content: center; /* Center the menu horizontally */
height:100px;
	background:#000000f7;
	position:fixed;
	z-index:2;
	width:100%;
	top:0
}

header * {
    box-sizing: border-box;
transition: 0.2s;
}

main {
min-height:600px;
display:block;
position:relative;
}

#article {
	text-align:left;
	background:#000000d6;
	padding:30px 40px 180px;
	max-width:1000px;
	margin:0 auto
}

#comingsoon {
	max-width:700px;
	margin:50px auto 0;
	text-align:center;
	padding:20px 10px 35px
}

#comingsoon .bigger {
	font-size:45px;
	color:#fff;
	margin:0;
	text-transform:
}

#comingsoon .smaller {
	font-size:22px;
	margin:0
}



#canvas {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
z-index:-999
}



#instructions {
	margin:50px 20px 60px;
	padding:25px 30px 15px;
	background:#131313;
	border-radius:10px
}

#instructions em {
	color:#5cca83
}

footer {
min-height:100px;
padding:20px 0;

position:absolute;
right:0;
left:0;
bottom:200
}

footer p.copyright, footer p.copyright a {
color:#3c3c3c;
font-size:12px;
text-align:center;
text-decoration:none

}

footer p.copyright a:hover {
color:#fff
}

.social {
font-size:30px;
margin:20px 0;
padding:0;
  display: flex;
  justify-content:center
}

.social a {
color:#777;
}

.social a:hover {
color:#fff;
}


/*Main menu*/

.menu-container {
  display: flex;
  justify-content:space-around;
margin:40px;
}

.menu-container .mod-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu-container .nav-item {
  margin-right: 45px;
}

.menu-container .nav-item a {
text-decoration:none;
color:#fff;
padding:8px 13px;
text-transform:uppercase;
font-family: Roboto;
font-weight:bold
}

.menu-container .nav-item a:hover {
background:#ffffff;
color:#111;
}

.menu-container .current a {
background:#ffffff;
color:#000
}



/* Show the menu items when the hamburger menu is active */
.menu-container .mod-menu.show {
  display:block;
  text-align:center;
  position:absolute;
  background:#000;
  border:solid 1px #ffffff;
  box-shadow:1px 1px 10px 1px #00000033;
z-index:99;
  right:20px;
  top:90px
}

.menu-container .mod-menu.show .nav-item {
margin:30px;
}

/* Hamburger menu styles */
.hamburger-menu {
  cursor: pointer;
  display: none;
  padding:10px 10px 5px;
  position:absolute;
}

.hamburger-menu:hover, .hamburger-menu:active {
background:#fff;
}

.hamburger-menu:hover span, .hamburger-menu:active span {
background:#000;
}

.hamburger-menu span {
  display: block;
  width: 30px;
  height: 4px;
  background: #fff;
  margin-bottom: 6px;
}



/* Adjust the breakpoint where the hamburger menu appears */

@media screen and (max-width: 980px) {

  #discordbtn {
    width:100px;
    right:00px;
    top:16px
}

}
  
@media screen and (max-width: 1110px) {
  body {
	  padding-top:80px
  }
	
	header {
height:80px
}

	h1 {
	margin-top:10px
}

  #logo {
    width:65px;
	  left:20px;
	  position:absolute
  }
  
  .menu-container .mod-menu {
    display: none;
  }

  .hamburger-menu {
    display: block;
    position:absolute;
    top:20px;
    right:20px
  }

  #discordbtn {
    width:100px;
    right:60px;
    top:6px
}

    @media screen and (max-width: 273px) {

  #discordbtn {
display:none
}

  
}