@font-face {
font-family: "Minecraft";
src: url("https://sidneyscape.space/fonts/Minecraft.woff");
}

/* Removing this will mess with element sizing for the whole site*/
* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: "Minecraft", Verdana;
  width:auto;
  background-color:black;
  background-repeat:repeat;
  background-attachment:fixed;
}

html {
  scroll-behavior: smooth;
}

a {
  color:#FF7900;
}

a:hover {
  color:cyan;
}
a:active {
  color:teal;
}

/* General Styling*/
#header {
  /* Color and spacing */
  background-color: black;
  color: white;
  padding: 20px;
  top: 0;
  width: 100%;
}

#header h1 {
  text-align: center;
}

/* This is only spacing for the navigation links, don't edit unless you want to change that*/
#navLinks {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
}

/* to change the style of the navigation links, edit this:*/
#navLinks a {
  text-decoration: none;
}

.main {
  padding: 0em 2em 1em 2em;
  margin: 0 auto; /* centers the main content */
  background-color: black;
}

hr {
  margin: 2em 0;
}

#footer {
  text-align: center;
  padding: 15px;
}

/* Page specific */
.textPage {
  max-width: 800px; /*You can remove or not use this, I just think it looks better on bigger windows */
}

/* Touching any CSS below this can break the gallery. Proceed with caution */
.gallery {
  padding-top: 1em;
  /* base number of columns, can make this 1 to ?? at bigger numbers it'll look funny 
     if you edit this, you may want to update the columns in the mobile sizing starting on line 105
  */
  columns: auto 6;
  text-align: center;
  font-size: 0px;
}

.gallery img {
  width: 100%;
  max-width:100%;
  height:auto;
}

.myImg {
  width: auto;
  padding:7px;
}

.myImg:hover {
  padding:0px;
}

.back-to-top {
  padding-top:20px;
  text-align:center;
}

/* Below changes the number of columns in the gallery for smaller screens
   If you changed the column number on line 85, you might have to edit it here too
   (it's not exactly mobile and tablet sizing)
    */
@media only screen and (max-width: 800px) {
  .gallery {
    columns: auto 2;
  }
}

@media only screen and (max-width: 500px) {
  .gallery {
    columns: auto 1;
  }
}

/*DROPDOWN BUTTON*/

.dropbtn {
  font-family: "Minecraft", Verdana;
  font-size: inherit;
  background-color: #000000;
  color: #FF7900;
  border: none;
  cursor: pointer;
  padding-bottom: 10px;
}

.dropbtn:hover, .dropbtn:focus {
  color:cyan;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000000;
  min-width: auto;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #000000;}

.show {display: block;}



/* MODAL */

#myImg {
    cursor: pointer;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}