/***
 * Top level 
 * */
:root {
	--white: #F5F0E8;
	--beige: #EDE8DF;

	--black: #1A1A2E;
	--brown: #7A6E5A;

	--darkgold: #9A9070;
	--gold: #C9A84C;

	--red: #7D2027;
	--lightred: #BD2134;
}
body {
	margin: 0;
	background-color: var(--white);
	color: var(--black);
	font-family: 'Roboto Flex';
	display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-x: hidden;
}
main {
	flex: 1;
}


/***
 * Header
 * */

#top-bar {
	position: sticky;
	top: 0;
	padding: 12px;
	background-color: var(--black);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 0.5px solid rgba(201, 168, 76, 0.2);
}
#logo {
	display: flex;
	align-items: center;
	cursor: pointer;
}
#top-bar i {
	font-size: 40px;
	margin-right: 8px;
}
#top-bar h1 {
	color: var(--white);
	font-size: 24px;
	margin: 0;
	margin-right: 4px;
	font-family: 'Roboto Flex';
	font-weight: 600;
}
#top-bar h2 {
	color: var(--gold);
	font-weight: 600;
	font-size: 24px;
	margin: 0;
	margin-right: 8px;
	font-family: 'Roboto Flex';
}
#top-bar nav {
	margin-left: 20px;
}
#top-bar h3 {
	margin: 0;
	display: flex;
	align-items: center;
	color: var(--white);
}
#top-bar h3 i {
	font-size: 20px;
	color: var(--gold);
}
#top-bar button {
	background-color: var(--red);
	color: var(--white);
    padding: 8px 12px;
    border-radius: 8px;
    margin-left: 10px;
    border: 0;
    cursor: pointer;
	transition: all 0.3s ease;
	font-family: 'Roboto Flex';
}
#top-bar button:hover {
	background-color: var(--lightred);
}
#top-bar a {
	color: var(--white);
	text-decoration: none;
	cursor: pointer;
	margin-right: 8px;
	font-family: 'Roboto Flex';
	font-weight: 600;
	background: rgba(74, 127, 165, 0.15);
	padding: 6px 12px;
	border-radius: 6px;
	transition: all 0.3s ease;
}
#top-bar .not-selected {
	color: var(--darkgold);
	background: 0;
}
#top-bar .not-selected:hover {
	color: var(--white);
	background: rgba(74, 127, 165, 0.15);
}


/***
 * Hero section
 * */
#hero {
	width: 100%;
	padding: 44px 30px;
	transition: all 0.3s ease;
	background-color: var(--black);
}
#hero h1, #hero h2 {
	font-size: 54px;
}
#hero h1 {
	color: var(--white);
}
#hero h3 {
	color: var(--gold);
}
#hero span {
	font-family: 'Roboto Flex';
	font-size: 54px;
	color: var(--red);
}
#hero p {
	width: 40%;
	font-family: 'Roboto Flex';
	font-size: 24px;
	color: var(--darkgold);
}
#hero button {
	background-color: var(--red);
	color: var(--white);
    padding: 12px 20px;
    border-radius: 8px;
    margin-right: 20px;
    border: 0;
    cursor: pointer;
	transition: all 0.3s ease;
	font-family: 'Roboto Flex';
	font-size: 20px;
}
#hero button:hover {
	background-color: var(--lightred);
}
#hero .alt-button {
	background-color: rgba(0, 0, 0, 0);
	color: var(--gold);
	border: 1px solid var(--gold);
	transition: all 0.3s ease;
}
#hero .alt-button:hover {
	background-color: var(--gold);
	color: white;
}


/***
 * Regular section
 * */
.section {
	padding: 30px;
}
.section h3 {
	font-variant: all-small-caps;
    color: var(--red);
    font-weight: 600;
    font-size: 22px;
	font-family: 'Roboto Flex';
	margin: 0 0 20px 0;
}
.section .card {
	position: relative;
	flex: 1;
	min-width: 175px;
    background-color: var(--beige);
    border-radius: 8px;
    padding: 20px;
    border: 0.5px solid rgba(107, 15, 26, 0.15);
    margin: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.section .card:hover {
	border-color: rgba(107, 15, 26, 0.35);
}
.section .card i {
	color: var(--primary-hover);
    background-color: var(--background-hover);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 40px;
}
.section .card h1 {
	font-size: 20px;
	color: var(--black);
}
.section .card p {
	font-family: 'Roboto Flex';
	margin: 0;
	color: var(--brown);
	font-size: 18px;
}



/***
 * Footer
 * */
#bottom-bar {
	padding: 12px;
	background-color: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 0.5px solid rgba(201, 168, 76, 0.2);
}
#bottom-bar h3 {
	margin: 0;
	font-size: 14px;
	color: var(--darkgold);
}


/***
 * Media queries
 * */
@media screen and (max-width: 1000px) {
	#hero p {
		width: 60%;
	}
}


/***
 * General purpose
 * */
.container {
	display: flex;
	flex-wrap: wrap;
}


/**
 * Testing - or lazy section
 * */
.overlay {
 	position: absolute;
   right: 10px;
   top: 10px;
   padding: 4px;
   border-radius: 8px;
}
.card .overlay p {
 	font-size: 14px !important;
 	color: white !important;
}
.tier0 {
   background-color: rgb(133, 205, 255);
   border: 2px solid rgb(184, 226, 255);
}
.tier1 {
   background-color: #82ff92;
   border: 2px solid #caffd1;
}
.tier2 {
   background-color: #ffa4a4;
   border: 2px solid #ffd2d2;
}

.section .card .download {
	position: absolute;
   top: 10px;
   right: 10px;
   padding: 8px;
   border-radius: 6px;
   background-color: var(--red);
   color: var(--white);
   font-size: 20px;
   cursor: pointer;
   transition: all 0.3s ease;
}
.section .card .download:hover {
   background-color: var(--lightred);
}