/*----------- Document Style -----------*/
html {
    scroll-behavior: smooth;
}

.skip a {
    background: white;
    left: 0;
    padding: 6px;
    position: absolute;
    top: -40px;
    -webkit-transition: top 1s ease-out;
    transition: top 1s ease-out;
    z-index: 1;
}

.skip a:focus {
    position: static;
    width: auto;
    height: auto;
}


body{
	font-family: 'Anonymous Pro', monospace;
	display:grid;
	grid-template-rows: auto auto auto auto auto auto auto auto;
	grid-row-gap: 30px;
}

.attribute{
	padding-top: 250px;
	font-size: 10px;
	text-align: center;
}

p{
	font-family: verdana;
	line-height: 1.5;
}

/*----------- Navigation Style -----------*/

.navigation {
    display: grid;
	background-color: #0D005F;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;

    padding-top: 20px;
    font-size: 20px;
    padding-bottom: 20px;
}

.page-link {
    color: white;
    text-decoration: none;
}
.logo {
    padding-left: 20px;
}

.desktop-view {
    text-align: right;
    padding-right: 20px;
}

.desktop-view a:hover, .logo a:hover{
    background-color: #0D005F;
    color: white;
    text-decoration: underline;
}

/*-----------page titles-----------*/
.page-title{
	padding-top: 15px;
	font-size: 30px;
	padding-left: 30px;
	padding-bottom: 50px;
}

/*-----------page headers-----------*/
.page-header{
	font-size: 20px;
	padding-left:30px;
}

/*----------- About Style -----------*/
#about-page p, div{
	padding-right: 30px;
	padding-left: 30px;
	line-height: 1.5;
	font-size: 16px;	
}

#about-page h1 {
	margin: 0px;
}

#about-page ul{
	list-style: none;
}

#about-page-title {
	padding-left: 30px;
}

/*----------- Footer Style -----------*/

.foot{
	grid-row: 8/span 1;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #0D005F;
	padding:5px;
	/*padding-right: 5px;*/

  	text-align: center;

}

.foot img{
	padding:2.5px;
	/*padding-right: 5px;*/
	align-self: right;
  	justify-self: right;
  	text-align: right;
}

/*----------- Mobile Layout Style -----------*/

@media screen and (min-width: 800px){
	
	.mobile-nav{
		display:none;
	}

	#home-page .desktop-nav-home{
		display: block;
		text-align: right;
		padding:20px;
	}

	#home-page .desktop-nav-home a{
		color: black;
		text-decoration: none;
		font-size: 18px;
		padding:5px;	
	}

	#home-page .desktop-nav-home a:hover{
		color: #0D005F;
		text-decoration: underline;
	}

	.link-icons{
		display: grid;
		grid-template-columns: auto auto auto;
	}

	.about-icon-class{
		grid-column: 1/ span 1;
		grid-row: 5/ span 1;
	}
	.projects-icon-class{
		grid-column: 2/ span 1;
		grid-row: 5/ span 1;
	}
	.contact-icon-class{
		grid-column: 3/ span 1;
		grid-row: 5/ span 1;
	}

	#about-page .desktop-nav{
		display: block;
	}

	#project-page .desktop-nav{
		display: block;
	}

	#resources-page .desktop-nav{
		display: block;
	}

	#individual-project-pages .desktop-nav{
		display: block;
	}

	#team-page .desktop-nav{
		display: block;
	}

	#project-page .project-image:hover {
  		filter: brightness(55%);
  		-webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    transition: all 1s ease;
	}


	#contact-page .desktop-nav{
		display: block;
	}

	.desktop-nav {
		background-color: #0D005F;
		/*text-align: right;*/
		padding:20px;
	}

	.desktop-nav a{
		color: white;
		text-decoration: none;
	}


	.page-links a:hover{
		text-decoration: underline;	
	}


	#active{
		text-decoration: underline;
	}


	#desktopLinks{
		display: grid;
		grid-template-columns: auto auto;
	}

	.page-links{
		text-align: right;
		grid-column: 2/ span 1; 
		grid-row: 1/ span 1;
	}

	#eco-data-nav{
		text-align: left;
		grid-column: 1/ span 1; 
		grid-row: 1/ span 1;
	}


	.about-icon-class{
		padding: 30px;
	}

	.bios_desktop{
		display: grid;
  		grid-column: 1/span 3;
  		grid-row: 5/span 1;
	}

	#about-page ul{
		list-style: none;
	}

	#about-page .bios-mobile{
		display: none;
	}

	#about-page .row {
		display: flex;
	}

	#about-page .bios_desktop .column{
		flex: 33.33%;
  		padding: 50px;
	}

	#team-page ul{
		list-style: none;
	}

	#team-page .bios-mobile{
		display: none;
	}

	#team-page .row {
		display: flex;
	}

	#team-page .bios_desktop .column{
		flex: 33.33%;
  		padding: 50px;
  	}

  	#team-page #info{
  		padding-right: 50px;
  		padding-left: 50px;
  	}

  	#resources-page ul{
		list-style: none;
	}

	#resources-page .bios-mobile{
		display: none;
	}

	#resources-page .row {
		display: flex;
	}

	#resources-page .bios_desktop .column{
		flex: 33.33%;
  		padding: 50px;
  	}

  	#resources-page #info{
  		padding-right: 50px;
  		padding-left: 50px;
  	}
}