@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Red+Hat+Display:wght@300;400;600;800&display=swap');

:root{
	--first-color:#2f638e;
	--rail-color:#023d5b;
	--road-color:#01798c;
	--accent-red-color:#d04a5c;
	--accent-yellow-color:#ecad49;
	--background-color:#cccccc;
	--headlines-font-family:'Red Hat Display';
	--pharagraph-font-famlily:'PT Serif';
	--font-size-xs:1.4rem;
	--font-size-s:1.6rem;
	--font-size-m:2rem;
	--font-size-l:2.4rem;
	--font-size-xl:2.8rem;
	--font-size-xxl:3.8rem;
	--font-size-xxxl:5rem;
}

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:10px;
    vertical-align:baseline;
    background: transparent;
	box-sizing: border-box;
}

html{
	font-size: 62.5%;
}

body{
	font-family: var(--pharagraph-font-famlily);
	font-size: var(--font-size-s);
	font-weight: 400;
	color: #000000;
}

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

img{
	max-width: 100%;
	display: block;
}

ul{
	list-style: none;
}

p {
    font-size: var(--font-size-s);
    color: #000000;
}


.container {
	max-width: 1240px;
	margin: 0 auto;
}

.center-block{
	margin: 0 auto;
}

/*
-----------------------------
BUTOANE
-----------------------------
*/

.yellow-btn{
	font-family: var(--headlines-font-family);
	background-color: var(--accent-yellow-color);
	color: #ffffff;
	font-size: var(--font-size-s);
	font-weight: 600;
	border: var(--accent-yellow-color) solid 2px;
	padding: 8px 24px;
	margin: 0;
}

.yellow-btn:hover {
	background-color: transparent;
	color: #000000;
	transition: .6s ease-out;
	cursor: pointer;
}

.invert-yellow-btn{
	font-family: var(--headlines-font-family);
	background-color: transparent;
	color: var(--accent-yellow-color);
	font-size: var(--font-size-s);
	font-weight: 600;
	border: var(--accent-yellow-color) solid 2px;
	padding: 8px 24px;
	margin: 0;
}

.invert-yellow-btn:hover {
	background-color: var(--accent-yellow-color);
	color: #ffffff;
	transition: .6s ease-out;
	cursor: pointer;
}

.red-btn{
	font-family: var(--headlines-font-family);
	background-color: var(--accent-red-color);
	color: #ffffff;
	font-size: var(--font-size-s);
	font-weight: 600;
	border: var(--accent-red-color) solid 2px;
	padding: 8px 24px;
	margin: 0;
}

.red-btn:hover {
	background-color: transparent;
	color: #ffffff;
	transition: .6s ease-out;
	cursor: pointer;
}

.invert-red-btn{
	font-family: var(--headlines-font-family);
	background-color: transparent;
	color: #ffffff;
	font-size: var(--font-size-s);
	font-weight: 600;
	border: var(--accent-red-color) solid 2px;
	padding: 8px 24px;
	margin: 0;
}

.invert-red-btn:hover {
	background-color: var(--accent-red-color);
	color: #000000;
	transition: .6s ease-out;
	cursor: pointer;
}

/*
-----------------------------
BUTOANE
-----------------------------
*/

#buton-sus {
	background-color: var(--first-color);
	width: 50px;
	height: 50px;
	padding: 10px;
	border-radius: 10px 0 0 10px;
	z-index: 1000;
	position: fixed;
	bottom: 50px;
	right: 0px;
}