@charset "UTF-8";

/* Color palette */

:root {
  --cobalt: #1a467c;
  --brown: #9b9b9b;
  --grey: #f4f4f4;
  --white: #fff;
  --dark-sky-blue: #4a90e2;
}

html, body  {
    background: var(--grey);
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

.a404_container {
	display: grid;
	width: 100%;
	height: 100%;
	text-align: center;
	
}

.a404_container > div {
}

.a404_image_area {
	text-align: center;
	align-self: end;
}

.a404_image_area > img {
	width: 199px;
	height: 190px;
}

.a404_text_area {
  	margin: 0;
  	text-align: center;
  	justify-self: center;
}

h1 {
	color: var(--cobalt);
	font-size: 26px;
  	font-weight: 700;
}

h2 {
	color: var(--cobalt);
	font-size: 20px;
  	font-weight: 400;
	
}

h3 {
	color: var(--brown);
	font-size: 14px;
  	font-weight: 400;
  	text-transform: uppercase;
}

.a404_button_area {
	margin: 28px 0 0 0;
	text-align: center;
}

.responsive_button {
	background-color: transparent;
	border: 1px solid var(--dark-sky-blue);
	border-radius: 24px;
	color: var(--dark-sky-blue);
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	padding: 8px 48px;
	cursor: pointer;
	text-decoration: none;
}

.responsive_button:hover {
	background-color: var(--dark-sky-blue);
	color: var(--white);
	text-decoration: none;
}

a.button_link {
	text-decoration: none;
}




@media screen and (min-width: 768px) and (max-width: 1023px) {

	.a404_image_area > img {
		width: 287px;
		height: 274px;
	}

	h1 {
		color: var(--cobalt);
		font-size: 28px;
	  	font-weight: 700;
	}

	h2 {
		color: var(--cobalt);
		font-size: 22px;
	  	font-weight: 400;
		
	}

	h3 {
		color: var(--brown);
		font-size: 16px;
	  	font-weight: 400;
	  	text-transform: uppercase;
	}

}

@media screen and (min-width: 1024px) {
	.a404_image_area > img {
		width: 349px;
		height: 332px;
	}

	h1 {
		color: var(--cobalt);
		font-size: 30px;
	  	font-weight: 700;
	}

	h2 {
		color: var(--cobalt);
		font-size: 24px;
	  	font-weight: 400;
		
	}

	h3 {
		color: var(--brown);
		font-size: 18px;
	  	font-weight: 400;
	  	text-transform: uppercase;
	}

}