@import url("../styles_index.css");

* {
	margin: 0;
	padding: 0;
}
html, body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

a {
	text-decoration: none;
	color: black;
}



.topic-heading {
	height: 20vh;
	/* background-color: #CAC585; */
	text-align: center;
	box-sizing: border-box;
}

.topic-heading > img {
	padding-top: 2.5vh;
	width: 10vh;
	height: 10vh;
	margin: auto;
}


.topic-heading-name {
	font-family: quicksand, serif;
	font-size: 4vh;
	margin: auto;
	cursor: default;
}

@media(max-height: 540px) {

	.topic-heading {
		height: 108px;
		text-align: center;
		box-sizing: border-box;
	}
	.topic-heading > img {
		padding-top: 13.5px;
		width: 54px;
		height: 54px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.topic-heading-name {
		font-family: quicksand, serif;
		font-size: 21.6px;
		margin-left: auto;
		margin-right: auto;
		cursor: default;
	}
}


/*----------------------*/
/*-------- TABS --------*/
/*----------------------*/

/* Style the tab */
.tabs {

	overflow: hidden;
	margin-top: 5vh;
	margin-bottom: 5vh;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	position: relative;
}

.home-link {
	font-family: bebas-neue, serif;
	font-size: 25pt;
	position: absolute;
	left: 2.5vw;
	font-size: 25pt;
	color: black;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

@media(min-width:540px) {
	.tabs{
		margin-top: 27px;
		margin-bottom: 27px;
	}

}


.home-link:hover{
	text-decoration: underline;
}
/* Style the buttons that are used to open the tab content */
.tabs div {
	margin-left: 10px;
	margin-right: 10px;
}

.tabs button {
	border: none;
	outline: none;
	cursor: pointer;
	/* width: 234px; */
	width: 12vw;
	padding-top: 11.5px;
	padding-bottom: 11.5px;
	/* height: 70px; */
	transition: 0.3s;
	font-family: bebas-neue, serif;
	font-size: 25pt;
}

/*
.tabs button:hover {
	color: white;
}

.tabs button.active {
}
*/

/* template */
/*
.topic-heading{
	background-color:;
	color:;
} Next ❯
	background-color:;
	color:;
}

.tabs button:hover {
	color: white;
	background-color: var(--poverty-homelessness-color);
}

.tabs button.active {
	background-color: var(--poverty-homelessness-color);
}

*/


/* Style the tab content */
 
.tab-content {
	width: 66vw;
	margin: auto;
	font-family: source-sans-pro, serif;
}

#Action {
	width: 100%;
}

.grey-background {
	background-color: #F5F5F5;
}

.action-subheading {
	font-family: source-sans-pro, Arial, Helvetica, sans-serif;
	font-size: 22.5px;
}

.reg-button {
	padding: 20px;
}




/* ================= */
/* ======Links====== */
/* ================= */

#Links {
	width: 100%;
	margin: 0;
	padding: 0;
}

.links-grey-background {
	background-color: #F5F5F5;
}

.links-content {
	position: relative;
	width: 60%;
	margin: 0 20%;
	padding-top: 40px;
	padding-bottom: 80px;
}

.action-heading, .links-heading {
	font-family: quicksand, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 36px;
	margin: 40px 0;
}

.instagram-accounts-heading, .websites-heading {
	font-family: quicksand, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 22.5px;
	padding-bottom: 20px;
	border-bottom: 3px solid ;
}

.instagram-links {
	padding-top: 20px;
	list-style-type: none;
}

.instagram-links li {
	font-family: source-sans-pro , Arial, Helvetica, sans-serif;
	font-size: 18px;
}

.website-links {
	list-style-position: inside;
	margin-top: 20px;
	font-family: source-sans-pro, Arial, Helvetica, sans-serif;
	font-size: 20px;
}

.website-link {
	margin: 20px 0;
}

.website-link a {
	margin-left: 5px;
	color: #0761B2;
	text-decoration: underline;
}

.website-link p {
	margin: 5px 0;
}


/*  COLORS */

.poverty-homelessness-text-color {
	color: var(--poverty-homelessness-color);
}

.poverty-homelessness-border-color {
	border-color: var(--poverty-homelessness-color);
}

.environment-text-color {
	color: var(--environment-color);
}

.environment-border-color {
	border-color: var(--environment-color);
}

.voter-access-text-color {
	color: var(--voter-access-color);
}

.voter-access-border-color {
	border-color: var(--voter-access-color);
}

.human-trafficking-text-color {
	color: var(--human-trafficking-color);
}

.human-trafficking-border-color {
	border-color: var(--human-trafficking-color);
}

.racial-injustice-text-color {
	color: var(--racial-injustice-color);
}

.racial-injustice-border-color {
	border-color: var(--racial-injustice-color);
}