@charset "UTF-8";
/* CSS Document */
html {
  scrollbar-gutter: stable;
}
.btn-link {
  display: inline-block;
  font-family: sans-serif;
	width:50vw;
	padding-top:10px;
	height:40px;
	min-width:200px;
	background-color:#d6001c;
  border-radius: 8px;
  border-style: none;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0;
  outline: none;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

}

.btn-link:hover {
  background-color: #FF494C;
}
.container {
    display: inline-block;
    cursor: pointer;
	width:100vw;
	align-content: center;
  }

  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
    transition: 0.4s;
	 
  }

  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }

  .change .bar2 {opacity: 0;}

  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
  }
body {
	width:100vw;
	margin-top: 200px;

    box-sizing: border-box;
	background-color: #222; /* to server as "filler" */
  color: #fff;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  padding: 0;
  height: 50vh;
background-image:  url('../images/nationals.png');
	background-size:contain;
	background-repeat: no-repeat;
background-attachment: fixed;
  background-position: center top 100px; 

}
#welcome {
	background-color:black;
	margin:0px;
}
input[type="button"] {
	width:50vw;
	height:30px;
	min-width:400px;
	background-color:#d6001c;
  border-radius: 8px;
  border-style: none;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0;
  outline: none;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

}
input[type="button"]:hover,
input[type="button"]:focus {
  background-color: #FF494C;
}
#resources {
	 display: flex;
  align-items: center;     /* Centers children vertically if a height is set */
  width: 100vw;            /* Takes the full width of the viewport */
	flex-direction: column; 
  


}
#Menu input[type="button"] {
	width:100vw;
	height:50px;
	background-color:#222222;
  border-radius: 0px;
  border-style: thin;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0px;
  outline: none;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
	padding:0px;
}
#Menu input[type="button"]:hover {
	width:100vw;
	height:50px;
	background-color:#4F4F4F;
  border-radius: 0px;
  border-style: thin;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0px;
  outline: none;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
	padding:0px;
}
#Menu {
}
#header {
	 width: 100%;
	position:fixed;
	top:0px;
	background-color:#222222;
}
.flex-container {
  display: flex;
  flex-direction: column; /* Stacks top, row, and bottom vertically */
	margin-top:50px;
	background-color:black;
	
}
.flex-container1 {
  display: flex;
  flex-direction: column; /* Stacks top, row, and bottom vertically */
	margin-top:50px;
	background-color:black;
	width:90vw;
	
}

.middle-row {
  display: flex;
	/* Aligns the two middle divs side-by-side */
  flex-wrap: wrap;
	justify-content: center/* Forces wrapping when space runs out */
}

.side-box {
  flex: 1;
	width:100vw;
	  align-items: center;
	text-align:center;
		max-width:300px;
/* Centers children vertically if a height is set */

	/* Forces both middle boxes to take up equal width */
}
.side-box1 {
  flex: 1;
	width:100vw;
	  align-items: center;
	text-align:center;
		max-width:90vw;
/* Centers children vertically if a height is set */

	/* Forces both middle boxes to take up equal width */
}

/* Optional styling to make them look nice */
.box {
  background-color: black;
  padding: 20px;
  text-align: center;
		  scroll-margin-top: 200px;

	
}
.bottom-box {
 
  text-align: center;
	padding:30px;
}
#content {
	width:100vw;
	max-width:1200px;
	margin-left: auto;
	margin-right:auto;
	
}
.bottom-box input[type="button"] {
	width:300px;
	height:50px;
	min-width:400px;
	background-color:#d6001c;
  border-radius: 8px;
  border-style: none;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0;
  outline: none;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

}
.bottom-box input[type="button"]:hover,
.bottom-box input[type="button"]:focus {
  background-color: #FF494C;
}