/* =============================================================================
 * atlas.css — shared color/type tokens and base classes for the map UI
 * (.atlasbody, .atlas* text styles). Typography is the site's Lexend now (was
 * Josefin/Montserrat/Lovelo before #12 §C). Loads only on /map/.
 * ============================================================================= */

/* atlas of drowned towns standard colors and fonts */

.atlasbody {
	font-family: Lexend, sans-serif;
	font-size: 1rem;

	/* font-weight: 700; */
	padding: 0;
}

.atlastitletext {
	color: black;
	font-family: Lexend, sans-serif;
	font-size: 2.5vw;
	font-weight: 700;
	text-align: center;

	/* color: #37372d; */
}

.atlastext {
	color: black;
	font-family: Lexend, sans-serif;

	/* font-weight: 700; */
	font-size: 1.2vw;

	/* color: #27271f; */
	text-align: justify;
	text-justify: inter-word;
}

.caption {
	align: center;
	font-family: Lexend, sans-serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 11px;
	margin-bottom: 0;

	/*
   font-family: Lexend, sans-serif;
   font-size: 1.2vw;
   color: black;
   text-align: center;
   text-justify: inter-word;
   margin: auto;
*/
	padding-top: 2vh;
	text-align: center;
}

.container-fluid {
}

.about_container {
	margin: auto;
	width: 100%;

	/* border: solid; */
}

.atlas_nav_logo {
	float: left;
	padding-left: 3vw;
	position: relative;
}

.atlasbodytext {
	font-family: Lexend, sans-serif;
	font-size: 1.25vw;
	margin: 2vw auto auto;

	/* font-weight: 700; */
}

/* colors to use */

/*
  natural background is white.
  main area on top is #D3D1C3
  card color is: #F2F1ED
  green color 1: #C1D8C3;
  green color 2 light: #E9EFE5; 
  dark color green: #89845a;
  table head: #f2f1ed;
  */

.aboutleft {
	background-color: #d3d1c3;
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	width: 55%;
}

.aboutright {
	background-color: #d3d1c3;
	display: inline-block;

	/* border: solid black; */
	margin: 1vw;
	padding: 0;
	padding-left: 0;
	top: 0;
	width: 40%;
}

.hometopleft {
	background-color: #d3d1c3;
	display: inline-block;
	height: 100%;
	margin: auto 3vw auto auto;
	vertical-align: middle;
	width: 35%;
}

.homeleft {
	background-color: #d3d1c3;
	display: inline-block;
	height: 100%;
	margin: auto;
	padding-left: 10vw;
	text-align: left;
	vertical-align: middle;
	width: 40%;
}

.homeleft img {
	object-fit: contain;
	width: 100%;
}

.hometopright {
	background-color: #d3d1c3;
	display: inline-block;
	padding: 0;
	padding-left: 0;

	/* border: solid black; */

	/* margin-left: 3vw; */
	top: 0;
	vertical-align: middle;
	width: 60%;
}

.homeright {
	background-color: #d3d1c3;
	display: inline-block;

	/* border: solid black; */
	margin-left: 10vw;
	padding: 0;
	padding-left: 0;
	top: 0;
	vertical-align: middle;
	width: 40%;
}

.learnimg {
	background-color: #d3d1c3;
	display: inline-block;

	/* border: solid black; */
	margin-left: 4vw;
	padding: 0;
	padding-left: 4vw;
	top: 0;
	vertical-align: middle;
	width: 55%;
}

.homeright img {
	object-fit: contain;
	width: 100%;
}

.learnimg img {
	object-fit: contain;
	width: 70%;
}

.homebot {
	padding-top: 2vh;
	text-align: center;
	width: 100%;
}

.atlasheader {
	color: #37372d;
	font-size: 1.5rem;
}

.hometext {
	color: #37372d;
	font-size: 2.5vw;
	font-weight: 700;
}

.atlasimg {
	height: 20vh;
	object-fit: cover;
	width: 20vw;
}

.atlasimgbig {
	object-fit: cover;
	width: 90%;
}

.atlascolor {
	background-color: #d3d1c2;
}

/* a row that is centered across the pag */
.atlasrow {
	background-color: #d3d1c3;
	display: block;

	/* border-style: solid; */
	text-align: left;
}

.atlas_dr_row {
	margin: auto;

	/* border-style: solid; */
	text-align: left;
}

.atlasblock {
	background-color: #d3d1c3;

	/* border-style: solid ; */
	border-color: #8a8354;
	margin: auto;
	padding: 5vw;

	/* border-width: 1.5vw; */
	text-align: left;
	width: 100%;
}

.atlasblockwhite {
	background-color: white;

	/* border-style: solid ; */
	border-color: #8a8354;

	/* border-width: 1.5vw; */
	text-align: left;
}

.atlasbutton {
	/* background-color: black; */
	color: white;
}

.imgblock {
	border: none;
	border-color: black;
	margin: 1vh;
	max-height: 10vh;
	max-width: 20vw;
}

.sysimgblock {
	border: none;
	border-color: black;
	border-radius: 1vw;
	height: 50vh;
	margin: 1vh;
	max-height: 20vh;
	max-width: 15vw;
	object-fit: cover;
	width: 50vw;
}

.blogblock {
	margin: auto;

	/*
	padding: 0px;
       	margin: auto; */
}

.tutorial {
	left: 50%;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

	/*
    margin-top: -50px;
    margin-left: -50px;
    width: 60vw;
    height: 50vh; */
}

.storylist {
	display: grid;
	gap: 5vh 4vw;
	grid-template-columns: auto auto;
	margin: auto;
	width: 80vw;
}

.nav_sys_button {
	background-color: black;
	border-radius: 0.5vw;
	color: white;
}

.home_button {
	background-color: black;
	border-radius: 0.5vw;
	color: white;
	display: table;
	font-size: 1.6vw;
	text-align: center;
	vertical-align: middle;
	width: 15vw;
}

.home_link {
	color: black;
	display: table-cell;
	font-size: 1.7vw;
	padding: 0.25vh 0.5vw;
	vertical-align: middle;
}

.home_proj_img {
	border-radius: 1vw;
	height: 35vh;
	object-fit: cover;
	width: 35vw;
}

.home_proj_img img {
	border-radius: 1vw;
	height: 35vh;
	object-fit: cover;
	width: 35vw;
}

.home_ban_img {
	height: 40vh;
	object-fit: contain;
	width: 100%;
}

.story_box {
	background-color: #c1d8c3;

	/* height: 18vh; */
	border-radius: 1vw;
	font-size: 1.15vw;
	font-weight: 700;
	margin: auto;
	padding: 1vh 1vw;
	text-align: center;
	width: 21vw;
}

.story_box p {
	font-size: clamp(9px, 1.15vw, 20px);
	margin: auto;

	/* display: flex;
justify-content: center;
align-content: center;
flex-direction: column; */
}