@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap');

:root { 
  --green: #BCC77F;
  --dkgreen: #a0ab95;
  --ltgrey: #C6C9CD;
  --white: #fafafa;
  --dkgrey: #6C757D;
  --ltgreen: #F2EB80;
  --main-font: 'Open Sans', sans-serif;
  --header: 'Roboto', sans-serif;
}

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #F2EB80;
	width: 100vw;
	height: 100vh;
}

.heading {
	display: flex;
	background-color: #C9D57F;
	border-bottom: 25px solid #c6c9cd;
	width: 100vw;
	height: 40%;
	padding: 0px;
	margin-right: 0;
	margin-left: 0;
	justify-content: space-around;
	border-bottom: 25px solid #C6C9CD;
	background-color: #BCC77F;
}

.logo {
	background-color: grey;
}

.dropdown {
	position: absolute;
	top: 18%;
    left: 10%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background-color: #fafafa;
	color: #fafafa;
	font-size: 16px;
	padding: 10px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
}

.dropdown-menu {
	background-color: #fafafa;
	min-width: 15rem;
	top: 125%!important;
}

.closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 5px 0 5px 50px;
	color: darkgray;
}

.weather-container {
	text-align: center;
	background-color: lightgrey;
	padding: 45px;
	margin: 45px;
    border: 2px solid grey;
}

.air {
	height: 335px;
	width:95%;
	border: none;
	overflow: auto;
}

iframe {
	width: 200px;
	margin: 0px 0px 20px 20px;
}

.dropdown-item {
  color:#fafafa;
  padding-bottom: 45px;
  text-align: center;
}

.dropdown-item:hover {
	color: yellowgreen;
}

a:hover {
	color: yellowgreen;
}

.card:hover {
	box-shadow: 5px 10px 18px #4d4d4d;
}
 
a:active { 
	background-color: yellowgreen;
}

.header_info {
	display: flex;
	flex-direction: column;
}

h1 {
	margin: 25px 0 0 320px;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
}

#test {
	margin-left: 320px;
	padding-top: 25px;
	color: white;
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.blurb {
	align-self: flex-end;
	width: 800px;
	padding: 80px;
	margin-left: 50px;
	color: white;
}

/* nav end */

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 20px;
}

/* events page */

.air {
  height: 332px;;
  width: 250px;
  border: none;
}

.weather-container {
  padding: 46px;
}

.events {
	position: absolute;
    top: 70%;
    left: 58%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #fafafa;
    font-size: 16px;
    padding: 10px;
    border: none;
    cursor: pointer;
	border-radius: 5px;
}

.card-columns {
    margin: 60px;
}

.card-img-top {
    height: 300px;
    width: 331px;
    margin: auto;
}

.btn-secondary {
	width: 100%;
}

.watch-list {
	margin-top: 5px;
	color: white;
}

.card-title {
	height: 80px;
	padding-top: 10px;
}


.list-group-item {
	height: 85px;
	border: none;
	border-top: 1px solid lightgray;
}

li.list-group-item.desc {
	height: 200px;
}

.btn-secondary {
   width: 100%;
}

.watch-list {
   margin-top: 5px;
   color: white;
}

/* footer */

footer {
    width: 100%;
    height: 100px;
    margin-right: 0;
	margin-left: 0;
}

.social-media {
	margin-left: 45%;
}

.fab {
	color: #6C757D;
}

/* mobile */
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
	.sidebar {padding-top: 15px;}
	.sidebar a {font-size: 18px;}
}

@media screen and (max-width: 700px) {
	.card-columns {
	   column-count: 2;
	}
 }

@media (min-width: 500px) {
   .card-columns {
	   column-count: 2;
   }
   
   .card-img-top {
	   height: 100px;
	   margin: auto;
   }
   
   .desc {
	   height: 120px;
   }
}

@media screen and (max-width: 600px) {
	body {
		width: 161vw;
	}
	
	.column {
		width: 100%;
	}
	
	.valley {
		width: 100%;
	}
}

@media screen and (min-width: 701px) {
   .body {
	   width: 161vw;
   }
   
   .column {
	   width: 100%;
   }
   
   .card-columns {
	   column-count: 3;
   }
   
   .card-img-top {
	   height: 300px;
	   margin: auto;
   }
}