html{
	scroll-behavior: smooth;
}
body{
  --color-dirt: #180D01;
  --color-sky: #F0F4F3;
  --color-forest: #2A321B;
  --color-stone: #DEDDD3;
  --color-cloud: #CFD4C4;
    
  background-color: var(--color-sky);
  color: var(--color-dirt);
  margin: auto;
  
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
main{
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
	justify-content: center;
}
section{
  display: flex;
  flex-flow: column;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  
  /* background-color: var(--color-sky); */
  box-sizing: border-box;
  height: calc(100vh - 4rem);
  overflow: hidden;
  padding: 4rem 2rem;
  position: relative;
  text-align: left;
}
section.row{
	flex-flow: row wrap;
	gap: 1rem;
	justify-content: center;
}

h1, h2, h3, h4, h5, h6{
  break-inside: avoid-column;
  font-weight: 700;
  letter-spacing: -0.01rem;
}
.h-display{
	font-size: clamp(2rem, 7vw, 7rem);
	line-height: 1;
	max-width: 80rem;
	margin: 0;
}
.h-large{
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: 0.9;
  max-width: 64rem;
}
.h-medium{
  font-size: 1.9rem;
  max-width: 32rem;
  line-height: 1;
}
p, ul{
  font-size: 1rem;
  font-weight: 400;  
  max-width: 32rem;
}
.caption{
	font-style: italic;
	opacity: 0.7;
	text-align: center;
}
a{
  
}
a:visited{
  
}
a:hover, a:visited:hover{
  
}
a.section-link{
	color: var(--color-dirt);
	padding: 1rem;
	text-decoration: none;
	transition: 0.3s ease-out;
}
a.section-link:visited{
	color: var(--color-dirt);
}
a.section-link:hover{
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
	translate: 0 -0.5rem;
}
img{
	width: 100%;
	max-height: 75vh;
	height: auto;
	object-fit: contain;
}
img.background-image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	z-index: -1;
	object-fit: cover;
}

section.fit{
  height: auto;
}
section.small {
    flex-basis: 20rem;
    min-width: 20rem;
    flex-grow: 1;
    flex-shrink: 0;
}
section.medium {
    flex-basis: 40rem;
    min-width: 40rem;
    flex-grow: 2;
    flex-shrink: 0;
}
section.large {
    flex-basis: 80rem;
    min-width: 80rem;
    flex-grow: 4;
    flex-shrink: 0;
}
section.full {
    flex-basis: 100%;
    min-width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
}

section.dirt{
  background-color: var(--color-dirt);
  color: var(--color-stone);
}
section.forest{
  background-color: var(--color-forest);
  color: var(--color-sky);
}
section.stone{
  background-color: var(--color-stone);
  color: var(--color-dirt);
}
section.cloud{
  background-color: var(--color-cloud);
  color: var(--color-dirt);
}
section#nav{
    flex-basis: 100%;
	flex-flow: row;
    flex-grow: 0;
    flex-shrink: 0;
	height: auto;
	justify-content: space-between;
    min-width: 100%;
	padding: 0.5rem 1rem;
}
section#nav > .logo{
	background-image: url("images/bryce-holland-logo.png");
	background-size: contain;
	height: 3rem;
	width: 3rem;
}
.nav-links{
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	gap: 0.25rem;
}
.nav-links > a{
	border-radius: 0.5rem;
	box-sizing: border-box;
	background-color: var(--color-sky);
	color: var(--color-dirt);
	display: block;
	font-weight: 500;
	min-height: 44px;
	padding: 0.75rem 0;
}
.nav-links > a:visited{
	color: var(--color-dirt);
}
.nav-links > a > span{
	padding: 0 0.3rem;
}
.nav-links > a:hover > span{
	background-color: var(--color-stone);
}
section#hero{
	
}
section#home{
	align-items: start;
	gap: 1rem;
}
section#home > h2{
    font-size: 1.4rem;
	font-style: normal;
	font-weight: 300;
    max-width: 32rem;
    line-height: 1.7rem;
	width: 100%;
}
.buttons{
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	gap: 0.75rem;
}
.buttons.center{
	justify-content: center;
}
.buttons > a{
	/* border-radius: 0.5rem; */
	border: 0.125rem var(--color-forest) solid;
	border-radius: 44px;
	box-sizing: border-box;
	color: var(--color-forest);
	display: block;
	font-weight: 500;
	min-height: 44px;
	padding: 0.6rem 1rem 0.7rem;
	text-decoration: none;
}
.buttons > a:visited;{
	color: var(--color-dirt);
}
.buttons > a:hover{
	background-color: var(--color-cloud);
	border-color: var(--color-dirt);
	color: var(--color-dirt);
}
.dirt .buttons > a{
	border: 0.125rem var(--color-stone) solid;
	color: var(--color-stone);
}
.dirt .buttons > a:visited;{
	color: var(--color-dirt);
}
.dirt .buttons > a:hover{
	background-color: var(--color-forest);
	border-color: var(--color-sky);
	color: var(--color-sky);
}
.forest .buttons > a{
	border: 0.125rem var(--color-stone) solid;
	color: var(--color-stone);
}
.forest .buttons > a:visited;{
	color: var(--color-forest);
}
.forest .buttons > a:hover{
	background-color: var(--color-dirt);
	border-color: var(--color-sky);
	color: var(--color-sky);
}
section#work{
	gap: 1rem;
/*	justify-content: space-evenly;*/
	min-height: 100vh;
}
.text-container{
	padding: 4rem;
}
.text-container > * {
	margin: 0.5rem;
	text-align: center;
}
.link-cards{
	display: grid;
	gap: 8rem 4rem;
/*	grid-template-columns: repeat(4, 1fr);*/
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
	padding: 0;
	/*column-rule: 4px solid var(--color-cloud);
	row-rule: 4px solid var(--color-cloud);*/
}
.link-card{
	text-align: center;
}

.link-card > h3{
	color: var(--color-forest);
	font-size: 1.5rem;
	margin: 1rem auto 0.5rem;
}
.link-card > p{
	margin: 0 auto 1rem;
}
section#about{
/*	scroll-margin-top: 4rem;*/
}
.body-text{
	display: flex;
	flex-flow: column;
	gap: 1rem;
	padding-bottom: 2rem;
}
.body-text > *{
	margin: 0;
	padding: 0;
}
.body-text > p{
	font-size: 1.3rem;
	max-width: 40rem;
}
section.history{
	flex-flow: row;
	gap: 1rem;
}
.history-text{
	padding-bottom: 1.5rem;
	flex-shrink: 0;
	width: 33%;
}
.history-text > h3, .history-text > p{
	font-size: 1.3rem;
	margin: 0;
	max-width: 40rem;
	padding: 0;
}
.history-list{
	display: flex;
	flex-flow: row wrap;
	gap: 0.5rem;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.history-item{
	background-color: var(--color-sky);
	border-radius: 1rem;
	color: var(--color-dirt);
	flex: 1;
	min-width: 12rem;
	padding: 0.75rem 1rem;
}

.history-item > h4{
	font-weight: 600;
	margin: 0 0 0.25rem 0;
}
.history-item > p{
	color: hsl(from var(--color-dirt) h 20% 35%);
	font-size: 1rem;
	margin: 0;
}
@media (max-width: 80rem) {
    section.large, section.full{
        width: 100%;
        min-width: 0;
        flex-basis: auto;
		height: calc(100vh - 2rem);
    }
	section.fit{
	  height: auto;
	}
	section.history{
		flex-flow: column;
	}
	.history-text{
		width: 100%;
	}
	.link-cards{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 40rem) {
    main {
        flex-direction: column;
    }
    section, section.small, section.medium, section.large, section.full{
        width: 100%;
        min-width: 0;
        flex-basis: auto;
		height: calc(100vh - 2rem);
		padding: 2rem 1rem;
    }
	section.fit{
	  height: auto;
	}
	section.history{
		flex-flow: column;
	}
	.history-text{
		width: 100%;
	}
	.link-cards{
		grid-template-columns: repeat(1, 1fr);
	}
}