/**
*CSS
**/

body { 
	 width: 100%; 
    height: 100%;
    margin: 0;
    background-width: 100%;
    background-color: #000;
    font-family: 'AnnoV5-Regular', serif;
	 font-size: 20px;
    color: #e5f0ef;
    /* font-weight: 300; */
    -webkit-font-smoothing: antialiased;
	 }


/* page architecture */
.content {
	padding: 25px 0px 25px 25px;
	z-index: 1;
	}

.header {
	width: 20%;
	height: 120px;
	left: 40%;
	top: 35px;
	margin: 0 auto;
   position: absolute;
	background-color: #eee;
	text-align: center;
	z-index: 2;
	}

.bio {
	width: 100%;
	padding:35px;
	}
	
.divider {
	width: 100%;
	padding:400px 35px 400px 35px;
	}

.space {
	width: 100%;
	padding: 150px 0px 150px 0px;
	}
	
.nav {
   width: 100%;
   margin: 0 auto;
	}
	
.footer {
	width: auto;
	padding: 35px;
}
	
img { 
	width: 100%; 
	height: auto;
	}

/* typography */
@font-face {
  font-family: "Anno-Regular";
  src: url("./fonts/Anno-Regular.woff") format("woff"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

a:link { text-decoration: none; color: #e5f0ef; }
a:active { text-decoration: none; color: #e5f0ef; }
a:visited { text-decoration: none; color: #e5f0ef; }
a:hover { color: #e5f0ef; text-shadow: #e5f0ef 0 0 20px; text-decoration: none;}
a img { border: none; }

h1 {
	 display: inline;
    font-family: 'Anno-Regular', serif;
	 font-size: 100px;
    line-height: 60.5pt;
    font-weight: normal;
    letter-spacing: -1px;
    color: #e5f0ef;
    }

h2 {
	 display: inline;
	 font-family: 'Anno-Regular', serif;
	 font-size: 80px;
    line-height: 50.5pt;
    font-weight: normal;
    letter-spacing: -1px;
    color: #e5f0ef;
    }
	 
h3 {
	 display: inline;
    font-family: "Helvetica", sans-serif;
	 font-size: 20px;
	 line-height: auto;
	 font-weight: normal;
	 letter-spacing: -0.5px;
	 color: #e5f0ef;
	 }
	 

/* flex-box scaling */
/* size one */
@media screen and (max-width: 1249px) {
	
img {
	width: calc(100% + 60px);
}

.nav {
	width: calc(100% + 25px);
}
	
.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
}
.item1{
    width: 100%;
    background-color: #000;
    margin: 10px;
}
.item2{
    width: 100%;
	 padding: 40px 0px 40px 0px;
    background-color: #000;
    margin: 10px;
}
.item3{
    width: 100%;
    background-color: #000;
    margin: 10px;
}

.item4{
    width: 100%;
    background-color: #000;
    margin: 10px;
	 padding-bottom: 40px;
}
}

/* size two */
@media screen and (min-width: 1250px) {
		
.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
}
.item1{
    width: 33%;
    min-width: 150px;
    background-color: #000;
    margin: 10px;
}
.item2{
    width: 14%;
    min-width: 150px;
    background-color: #000;
    margin: 10px;
}

.item4{
    width: 48%;
    min-width: 200px;
    background-color: #000;
    margin: 10px;
	 padding-bottom: 25px;
}

.item3{
    width: 48%;
    min-width: 150px;
    background-color: #000;
    margin: 10px;
}

a:link { text-decoration: none; color: #e5f0ef; }
a:active { text-decoration: none; color: #e5f0ef; }
a:visited { text-decoration: none; color: #e5f0ef; }
a:hover { color: #e5f0ef; text-shadow: #e5f0ef 0 0 15px; text-decoration: none;}
a img { border: none; }

}

/* size three */
@media screen and (min-width: 1560px) {
.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
}

.item1{
    width: 36%;
    min-width: 450px;
    background-color: #000;
    margin: 10px;
}

.item2{
    width: 12%;
    min-width: 100px;
    background-color: #000;
    margin: 10px;
}

.item4{
    width: 48%;
    min-width: 200px;
    background-color: #000;
    margin: 10px;
	 padding-bottom: 25px;
}

.item3{
    width: 48.5%;
    min-width: 450px;
    background-color: #000;
    margin: 10px;
}
}


/* quality of life */
html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #b2fdaf;
}