body{
    font-family: 'lato';
    margin: 0;
    padding: 0;
    background-color: #9ccbff;
    background-attachment: fixed;
    background-size:cover;
}

/* Added image to home page */
.page-grid{
	min-height:100vh;
	display:grid;
	grid-template-rows: 90px 1fr 60px;
    font-family: 'lato';
    margin: 0;
    padding: 0;
    background-image: url(../img/background.jpg);
    background-attachment: fixed;
    background-size:cover;
}

.page-content{
	display:grid;
	grid-template-rows:repeat(auto-fill, auto);
}

.bg-filler{
}
  
/* Header */

.navbar{
    /* align elements side by side */
    display: flex;
    /* push elements as far apart as posible */
    justify-content: space-between;
    /* center elements */
    align-items: center;
    background-color: #E5F1FF;
    color: #3D3D3D;
	flex-wrap:wrap;
}

.logo-wrapper{
	width:100%;
	justify-content:center;R
}

.logo-img{
	height:50px;
}

.title{
    font-size: 34px;
    padding-left: 120px;
    font-family: 'arial black';
}

.navbar-links ul{
    display: flex;
    padding-right: 120px;
    font-size: 16px;
}

.navbar-links li{
    /* remove the bullet points */
    list-style: none;
    text-transform: uppercase;
    font-weight: 400;
}

.navbar-links li a{
    /* remove underlines */
    text-decoration: none;
    color: #44484C;
    padding: 20px;
}

#nav-modal{
	display:none;
	position:absolute;
	width:100%;
	top:90px;
	background-color: #E5F1FF;
	padding-bottom:20px;
}

#nav-modal ul{
	width:100%;
	margin:0;
	padding:0;
}

#nav-modal li{
	list-style: none;
    text-transform: uppercase;
    font-weight: bold;
	line-height:1.5em;
	width:100%;
	text-align:center;
}


/* Footer */

footer{
    /* background-color: #B9D9FF; */
    background-color: #E5F1FF;
    color: #3D3D3D;
    font-size: 18px;
    height: 60px;
    width: 100%;
    text-align: center;
    padding-top: 18px;
}

/*mobile view*/
@media (max-width: 960px), (max-aspect-ratio: 1/1){
	.title-wrapper{
		display:none;
	}
	.navbar-links{
		display:none;
	}
	.logo-wrapper{
		display:flex;
	}
}

/*desktop view*/
@media all and (min-width: 961px) and (min-aspect-ratio: 1/1){
	.logo-wrapper{
		display:none;
	}
}