@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

:root {
	--color1: #368ABF; /* rgb(54, 138, 191) */
	--color2: #63BBF2; /* rgb(99, 187, 242) */
	--color3: #03658C; /* rgb(3, 101, 140) */
	--color4: #66CAF2; /* rgb(102, 202, 242) */
	--color5: #0388A6; /* rgb(3, 136, 166) */
}

* {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	font-family: "Gruppo", sans-serif;
	color: white;
}

html {
	height: 100%;
	
}

body {
	height: 100%;
	background: linear-gradient(45deg, rgba(15, 52, 75, 1) 0%, rgba(3,136,166,1) 50%, rgba(15, 52, 75, 1) 100%);
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.logo-img img {
	width: 3rem;
}

.top-right img {
	width: 3rem;
}

main {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 2rem;
	margin: 0rem 2rem;
}

header, footer {
	width: 90%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(255,255,255,0.15);
	padding: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-size: 1.25rem;
	border-radius: 0.5rem;
}

.top-left {
	display: flex;
	align-items: center;
}

.logo-text {
	padding-left: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	grid-gap: 0.25rem;
	
}

.logo-text p:nth-of-type(1) {
	font-size: larger;
	font-weight: bold;
}

.logo-text p:nth-of-type(2) {
	font-size: small;
	text-transform: uppercase;
	font-weight: bold;
}

.top-center {
	display:flex;
	grid-gap: 2rem;
}

.top-center div a, .logo-text p a, .bottom-right p a {
	text-decoration: none;
}



.top-right a img {
	transition: transform 0.5s;
}

.top-right a img:hover {
	transform: rotate(360deg);
}

/*
.top-right a:nth-of-type(1) img:hover {
	background-color: #0073b1;
	border-radius: 50%;
	cursor: pointer;
}

.top-right a:last-of-type img:hover {
	background-color: #c71f1e;
	border-radius: 50%;
	cursor: pointer;
}
*/
article {
    display: grid;
    grid-template-columns: 16rem;
    grid-template-rows: 8rem auto 4rem;
    grid-template-areas: "image" "text" "button";
    transition: 0.5s ease all;
    margin-bottom: 1rem;
	border-radius: 1rem;
	border: 0.1rem solid black;
	box-shadow: 0.2rem 0.1rem 0.1rem black;
}

article:hover {
    border: 0.1rem solid white;
	box-shadow: none;
}

.article-image {
    grid-area: image;
    background-position: center;
    background-size: cover;
	padding-top: 1rem;
}

.article-image img {
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	display: block
}

.article-text {
    grid-area: text;
    text-align: justify;
    padding: 15px;
	display: flex;
	flex-direction: column;
	grid-gap: 1rem;
}

.article-text h3 {
    text-align: center;
	font-family: "Roboto", sans-serif;
}

.article-text p {
    text-align: justify;
	font-family: "Roboto", sans-serif;
}

.article-button {
    grid-area: button;
    text-align: center;
    padding-bottom: 15px;
}

button {
    padding: 0.5em 3em;
    background-color: black;
    border: 0.16em solid white;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--c1);
    text-align: center;
	border-radius: 10px;
	transition: 0.5s ease all;
	cursor: pointer;
}

button:hover {
    color: black;
    background-color: white;
	border: 0.16em solid black;
}

button:active {
    color: black;
    background-color: white;
	transform: translateY(0.2rem);
}

.bottom-left a {
	text-decoration: none;
}


/* Responsive */

@media only screen and (max-width: 1260px) {
    /* ruleset for 480px - 600px */
	.logo-text {
		display: none;
	}
}

@media only screen and (max-width: 950px) {
    /* ruleset for 480px - 600px */
	.top-center {
		flex-direction: column;
		grid-gap: 0rem;
	}
}

@media only screen and (max-width: 600px) {
	header, footer {
		flex-direction: column;
		grid-gap: 1rem;
	}
}