@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700');

/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/
***/

.ezgallery.montage { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ezgallery.montage img {
  flex: auto;
  margin: 0 5px 5px 0;
  object-fit: contain;
  object-position: bottom;
}

.ezgallery.horizontal { 
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  object-position: bottom;
}


/*Use these to change colors without editing the code!*/
:root {
  /*sitewide*/
	--background: #00273b;
  --link:#7d0200;
	--linkhover:#bd0300;
  
 /*header*/
  --headerbackground: #bb7732;
  --title:#fffdfc;

  /*navigtion links*/
  --navbackground:#bb7732;
  --navtext:#ffeec7;
  --navhover:#fffdfc;
  
	/*sections/main content*/
	--sectionheader:#c70f0c;
	--sectionheadertext:#ffffff;
	--sectionbackground:#f7f5f2;
  --text:#000000;
  
  /*footer*/
  --footerbackground:#bb7732;
  --footertext:#ffeec7;
}

body{
  background: var(--background);
   /*background image*/
  background-image: url('cloth.jpg');
 /* background-size: cover;*/
   /*so background doesn't move when you scroll*/
 /* background-attachment: fixed;*/
   background-repeat: repeat;
  font-size: 1em;
  font-family:JetBrains Mono;
padding: 5px;
}
/*links*/
a {
 color: var(--link);
 
}



/* Dashed border */
hr.dashed {
  border-top: 3px dashed #bbb;
}

/* Dotted border */
hr.dotted {
  border-top: 3px dotted #bbb;
}

/* Solid border */
hr.solid {
  border-top: 3px solid #bbb;
}

/* Rounded border */
hr.rounded {
  border-top: 8px solid #bbb;
  border-radius: 5px;
}

/*link hover*/
 a:hover{
 color: var(--linkhover);
 
}

.container{
  width: 60%;
  margin: auto;
}
header{
  height: 5em;
  text-align: center;
  padding-top: 0.3em;
  font-family: Pixelify Sans;
  font-size: 1.3em;
  background: var(--headerbackground);
   border-color:#000000;;
  border-radius:0;
  border-style:solid;
  border-width:2px;
  
  background-image: url("");
  background-size: cover;
  background-position: 40% 30%;
}
header h1{
 color: var(--title);

}
nav{
 font-family: Pixelify Sans;
  padding: .6em;
  margin: 1em;
  text-align: center;
  
}
nav a{
  background-color: var(--navbackground);
  border-color:#000000;;
  border-radius:0;
  border-style:solid;
  border-width:2px;
  padding: 2px 10px 2px 10px;
  font-size: 1.6em;
  margin: 6px;
  line-height: 1.7em;
  color: var(--navtext);
  
}
nav a::before {
background-image: url('https://icons.iconarchive.com/icons/iron-devil/ids-3d-icons-20/32/Fish-icon.png');
background-size: cover;
background-size: 23px 22px;
display: inline-block;
width: 23px; 
height: 21px;
margin-right: 4px;
content:" ";
}
nav a:hover{
  color: var(--navhover);
}
main{
 padding: 1px;
}

footer{
 margin-top: 1em;
  text-align: center;
  background-color: var(--footerbackground);
  color: var(--footertext);
  width: 40%;
  margin: auto;
   border-color:#000000;;
  border-radius:0;
  border-style:solid;
  border-width:2px;
  padding: 6px;
}

/*each box is inside of this*/
section{
  margin-bottom: 8px;
}

/*text*/
.content{
  background: var(--sectionbackground);
  padding: 1em;
  padding-top: 0px;
   border-color:#000000;
  border-radius:0;
  border-style:solid;
  border-width:2px;
  font-size: 1.1em;
}
/*section title color*/
.sectionheader{
  background: var(--sectionheader);
  height: 1.5em;
    border-color:#fff #106 #106 #fff;
  border-radius:0;
  border-style:solid;
  border-width:2px;
  padding: .5em;
  margin: 0px;
}

/*section title*/
.sectionheader h2{
 color: var(--sectionheadertext);
font-size: 1.4em;
  margin: 0px;
  padding: 0px;
  font-family: Pixelify Sans;
  font-weight: normal;
}

/*the little X*/
 .sectionheader h2::after {
 float: right;
  content:"[X] ";
}

/*responsiveness*/
/*narrow screens*/
  @media(max-width: 1000px) {
   .body{
     margin: 1px;
  }
  .container {
    width: 90%;
    
    }
}
/*phone...*/
@media(orientation: portrait) {
  
  body{
     margin: 0;
     font-size: .9em;
  }
  .container {
    width: 100%;
  }
  footer{
    width: 25%;
  }
}