/***
#080708 Black
#E6E8E6 Albaster Grey
#FFF07C Banana Cream
#659B5E Sage Green
#556F44 Fern 
***/

:root {
   
    --link: #FFF07C;
    --light: #9CB080;
    --dark: #273338;
    --main: #618764;
    --alt: #2B5748;
    --text: #9CB080;
    
}

html {
    scrollbar-width: thin;
    scrollbar-color: #556F44 #659B5E; 
    background-color: var(--dark);
    background-image: repeating-linear-gradient(
    45deg, 
    var(--main) 0px, 
    var(--alt) 1px, 
    transparent 1px, 
    transparent 10px
  );
}

page {
    scrollbar-width: thin;
    scrollbar-color: #556F44 #659B5E; 
    width: 955px;
}

.page-width {
    width: 955px; 
}

.center {
    margin-left: auto;
    margin-right: auto;
}

body {
    width: 955px;
    height: 100%;
    margin: 0 auto;
    background-color: var(--dark);
    overflow-wrap: break-word;
    
}

.container {
    border-left: 3px var(--alt);
    border-right: 3px var(--alt); 
}

nav {

        background-color: var(--main)

}

button {
    border: 3px outset var(--alt);
    background-color: var(--alt);
    color: var(--link);
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
h1, h2, .h2, h3, h4, h5, h6 {
    color: var(--main);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}
h1 {
    font-size: 90px;
}
h2, .h2 {
    font-size: 54px;
}
h3 {
    font-size: 36px;
}
main, .header, .footer {
    width: 1000px;
    margin: 0 auto;
    color: var(--text);
}

a:link {
    color: var(--link);
    cursor: pointer;
}
a:visited {
    color: var(--link);
    cursor: pointer; 
}

::selection {
  background-color: var(--main);
  color: var(--link);
}

.text {
    color: var(--text);
    margin: 10px;
}

.ranchers-regular {
  font-family: "Ranchers", sans-serif;
  font-weight: 400;
  font-style: normal;
}

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

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

.front-page-portfolio.horizontal a {
  text-align: center;
}

.front-page-portfolio.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 10px 5px 5px 0;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  object-position: bottom;
}
.photoviewer-stage {
  background-color: var(--dark);
}

.photoviewer-modal {
  color: var(--light);
}