/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
 font-family: "Retron2000";
 src: url('Retron2000.ttf') format('truetype');
}
@font-face {
 font-family: "QuickSand" ;
 src: url('quicksand.book-regular.otf') format('opentype');
}

body {
  background-image: url("background2.png"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: hsl(242, 46%, 12%);
  color: black;
  font-family: "QuickSand", sans-serif;
  margin: auto;
  text-align: center;
  line-height: 1.5;
  font-size: 16px;

}

li + li {
  margin-top: 10px;
}

.star {
border-image: url("border.png") 30 / 30px / 20px space;
}

.small {
  width: 500px;
  text-align: center;
  margin: auto;
}

.medium {
  width: 1000px;
  text-align: center;
  margin: auto;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
  column-count: 2;

}

h1 { 
  text-align: center;
  font-size: 42px
}
h2{
 font-size: 30px 
}

.center{
  display: block;
  margin: auto;
}

.box{
  border:none;
 background-color: hsl(35, 60%, 70%);
 padding: 3em;
 opacity: .85;
 z-index: 900; 
 width: 52vw;
}

.boxHalf {
  width: 20vw;
  padding: 1.875em;
 opacity: .85;
 z-index: 900;
 margin: auto;
}

.boxNoColumn {
  width: 1000px;
  border: 5px dashed papayawhip;
  padding: 50px;
  margin: auto;
}

.thumbnail{
 width: 20vw; 
  
}


.banner{
 width: 40vw;
  
}

.banner-long{
 width: 52vw; 
}

.box-sitemap{
 width: 10vw; 
 justify-content: center;
}


.writing{
  text-align: left;
  width: 56.25em; 
}

a:link {
  color:black;
  background-color: transparent;
  text-decoration-style: dotted;
}

a:visited {
  color:black;
  background-color:transparent;
  text-decoration-style: dotted;
}

a:hover {
  color: hsl(242, 46%, 12%);
  background-color: transparent;
  text-decoration-style: dotted;
}

a:active {
  color:black;
  background-color: transparent;
  text-decoration-style: dotted;
}

.button{
  background-color: hsl(242, 46%, 12%);
  opacity: .85;
  color: papayawhip;
  border-radius: 1.25em;
  border:  .1875em double papayawhip;
  padding: 1em;
  font-size: 16px;
  font-family:"QuickSand", sans-serif;
}

.divider{
    width:3vw;
    height:auto;
    display:inline-block;
}

.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: .625em;
}

.grid-wrapper {

  margin: auto;
	display: grid;
	grid-gap: 1vw;
	grid-template-columns: repeat(auto-fit, minmax(1vw, 1fr));
	grid-auto-rows: 10vw;
	grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 1;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}
.grid-wrapper .secondrow{
  grid-column: 3;
  grid-row: 2;
}

.gallery {
  transition: .2s;
  border-radius: .625em;
  object-fit: cover;
}

.gallery:hover{
  transform: scale(1.1);
cursor: pointer;
}

.gallery-portrait{
    transition: .2s;
  border-radius: .625em;
  object-fit: cover;
  width: 24vw;
  height: 76vh;
}

.gallery-landscape{
    transition: .2s;
  border-radius: .625em;
  object-fit: cover;
  width: 24vw;
  height: 37vh;
}

.gallery-archive{
  transition: .2s;
  border-radius: .625em;
  object-fit: cover;
  width: 15vw;
}

.gallery-long{
    transition: .2s;
  border-radius: .625em;
  object-fit: cover;
  width: 52vw;
}

.gallery-thumbnail{
  transition: .2s;
  border-radius: .625em;
  object-fit: cover;
  width: 12vw;
}

.gallery-square{
  transition: .2s;
  border-radius: .625em;
  object-fit: cover;
  width: 20vw;
}

.gallery-portrait:hover{
transform: scale(1.1);
cursor: pointer;
}

.gallery-landscape:hover{
transform: scale(1.1);
cursor: pointer;
}

.gallery-long:hover{
transform: scale(1.1);
cursor: pointer;
}

.gallery-thumbnail:hover{
transform: scale(1.1);
cursor: pointer;
}

.gallery-square:hover{
transform: scale(1.1);
cursor: pointer;
}

.gallery-archive:hover{
transform: scale(1.1);
cursor: pointer;
}

.container {
  width: 50vw;
  margin: auto;
  display: block;
}

.container-half {
  width: 32vw;
  margin: auto;
  display: block;
}

@media only screen and (min-width: 960px) and (max-width: 1600px){

  body{
   font-size: 16px; 
  }
  
  
  .container{
   width: 80vw; 
  }
  
  
  .gallery-portrait{
   width: 38vw;
   height: 70vh;
  }
  
  .gallery-landscape{
   width: 38vw;
   height: 30vh;
    
  }
  
  .gallery-archive{
  transition: .2s;
  border-radius: .625em;
  object-fit: cover;
  width: 25vw;
}
  
  .gallery-long{
   width: 80vw;
  }
  
  .gallery-thumbnail{
   width: 19vw;
    
  }
  
  .gallery-square{
   width: 30vw;
  }
  
  
    .box{
   width: 70vw; 
  
  }
  
    
  .boxHalf{
   width: 30vw; 
   margin: auto;
  }

  
    .thumbnail{
   width: 30vw; 
    
  }
  
  .banner{
    width: 70vw;
  }
  
.banner-long{
 width: 80vw; 
}
  .sitemap{
    width: 25vw;
  }
  .container-half {
  width: 52vw;
  margin: auto;
  display: block;
}


}


@media only screen and (max-width: 960px) {
  body{
   font-size: 16px; 
   margin: auto;
   text-align: center;
  }
 
  .container{
   width: 90vw; 
  }
  
.container-half {
  width: 90vw;
  margin: auto;
  display: block;
}

  
  .gallery-portrait{
   width: 90vw;
   height: auto;
  }
  
  .gallery-landscape{
   width: 90vw;
   height: auto;
    
  }
  
  .gallery-archive{
  transition: .2s;
  border-radius: .625em;
  object-fit: cover;
  width: 50vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1vh;
  
}
  
  .gallery-long{
   width: 90vw;
  }
  
  .gallery-thumbnail{
   width: 44vw;
    
  }
  
  .gallery-square{
   width: 90vw;
}
  
  .box{
   width: 90vw; 
  }
  
  .boxHalf{
   width: 90vw; 
   margin-left: 0vw;
   margin-right: 0vw;
   margin-top: 1vh;
  }
  
  .thumbnail{
   width: 30vw; 
    
  }
  
  .banner{
    width: 90vw;
  }
  .banner-long{
 width: 90vw; 
}
  
  .sitemap{
   width: 40vw; 
    
  }
  .column{
   column-count: 1; 
  }
  
  .button{
    font-size: 12px;
    padding: .8em;

}

  .divider{
  width: 1vw; 
  }
}

#loader {
  z-index: 9999;
  width: 100%;
  height: 100%;
  margin: 0;
  left: 0px;
	top: 0px;
  position: fixed;
  background-image: url("loadingScreen.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 1;
  animation: fade .3s linear forwards;
  
}

@keyframes fade {
  0% { opacity: 0 }
  100% { opacity: .95 }
}