/* Root */
:root {
	--color-main: #ed1c24;
	--color-black: #000;
	--color-white: #fff;
	--color-gray-light: #eee;
	--color-yellow: #e8d312;
	--color-red: #e81224;
	--color-red-dark: #bb1220;
	--color-green: #4e7271;
	--color-green-medium: #446362;
	--border-radius-min: 6px;
    --border-radius-normal: 12px;
    --border-radius-mid: 20px;
	--global-padding-left: 0;
	--global-padding-right: 0;
	--global-min-width: 750px;
	--global-mid-width: 950px;
	--global-max-width: 1400px;
	--font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	--transition-all-fast: all .2s cubic-bezier(0.025, 0.80, 0.44, 1);
}

@media screen and (max-width: 1650px) {
    :root {
        --global-padding-left: 50px;
        --global-padding-right: 50px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --global-padding-left: 20px;
        --global-padding-right: 20px;
    }
}

/* Global */
*, :after, :before {
    box-sizing: border-box;
}

body, p, a, h1, h2, h3, h4, h5, h6, ul, li, ol, th, td, input, select, textarea, label, div {
    font-family: var(--font-family);
    line-height: 1.25;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html {
	height: 100%;
	width: 100%;
	display: block;
}

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

main {
	background-color: var(--color-green);
}

p,
pre {
	margin: 0 0 10px 0;
}

code {
	text-transform: uppercase !important;
	color: var(--color-gray-light);
	border-bottom: 1px dotted #707070;
}

a {
	color: var(--color-main);
	text-decoration: none;
}

a:hover {
	color: var(--color-gray-light);
}

/* Home */
.home-top, .home-middle, .home-bottom-main, .home-social {
	max-width: var(--global-mid-width);
	padding-left: var(--global-padding-left);
	padding-right: var(--global-padding-right);
	margin-left: auto;
	margin-right: auto;
}

/* Home Top */
.home-top {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 20px;
	padding-top: 20px;
	padding-bottom: 40px;
}

.home-top-text {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: row;
	gap: 12px;
	width: 100%;
	margin-bottom: 20px;
}

.home-top-text a {
	color: var(--color-white);
	background-color: var(--color-main);
	border-radius: var(--border-radius-min);
	padding: 10px 14px;
	font-weight: 700;
	font-size: 20px;
	transition: var(--transition-all-fast);
}

.home-top-text a:hover {
	background-color: var(--color-red-dark);
	transform: scale(1.02);
}

.home-top-img {
	background-color: var(--color-green-medium);
	border-radius: 100%;
	padding: 60px;
	max-width: 380px;
	max-height: 380px;
}

.home-top-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	top: -20px;
}

/* Home Middle */
.home-middle {
	max-width: var(--global-min-width);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 80px;
}

.home-middle h1 {
	color: var(--color-white);
	font-size: 36px;
	text-align: center;
	margin-top: 10px;
	font-weight: 700;
}

.home-middle p {
	color: var(--color-white);
	text-align: center;
	font-size: 20px;
}

.home-middle a {
	font-weight: 600;
	color: var(--color-white);
}

.home-middle-button {
	background: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-white);
	border-radius: var(--border-radius-min);
	padding: 10px 14px;
	font-weight: 700;
	font-size: 20px;
	max-width: max-content;
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	transition: var(--transition-all-fast);
}

.home-middle-button:hover {
	transform: scale(1.02);
}

/* Home Icons */
.home-social {
	padding-bottom: 60px;
}

.home-social h2 {
	color: var(--color-white);
	text-align: center;
}

.home-social-main {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: 12px;
}

.home-social-main a {
	min-width: 45px;
	min-height: 45px;
	width: 45px;
	height: 45px;
	transition: var(--transition-all-fast);
}

.home-social-main a:hover {
	transform: scale(1.02);
}

/* Home Bottom */
.home-bottom {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: var(--color-green-medium);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: 12px;
}

.home-bottom p {
	color: var(--color-white);
	margin-bottom: 0;
}

.home-bottom span {
    color: var(--color-red);
	min-width: 20px;
	min-height: 20px;
	width: 20px;
	height: 20px;
}

.home-bottom a {
	color: var(--color-yellow);
    font-weight: 600;
}