@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Bai Jamjuree', sans-serif;
	font-size: 18px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

:root {
	/* Colors */
	--strong-cyan: hsl(171, 66%, 44%);
	--light-blue: hsl(233, 100%, 69%);
	--dark-grayish-blue: hsl(210, 10%, 33%);
	--grayish-blue: hsl(201, 11%, 66%);
}



/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
    	animation-duration: 0.01ms !important;
    	animation-iteration-count: 1 !important;
    	transition-duration: 0.01ms !important;
    	scroll-behavior: auto !important;
  	}
}

/* Reusable class */
.container {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 80px 0;
}

.subtitle {
	font-size: 30px;
	text-align: center;
	color: var(--dark-grayish-blue);
	margin-bottom: 20px;
}

.section-paragraph {
	text-align: center;
	line-height: 1.6;
	color: var(--grayish-blue);
	font-weight: 400;
	max-width: 500px;
	margin: 0 auto;
}
/* End reusable class */


body {
	background-color: #fff;
	overflow-x: hidden;
}



/* Start Header */
.header {
	height: 600px;
	width: 100%;
	background-image: url(../images/bg-header-mobile.png);
	background-repeat: no-repeat;
	background-size: 100% 300px;
}

.header .container {
	padding: 0;
	margin: 0 auto;
}

.header__container {
	height: 100%;
	max-width: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	grid-row-gap: 40px;
}

.header__texts {
	text-align: center;
}

.header-title {
	margin-bottom: 20px;
	color: var(--dark-grayish-blue);
	font-weight: 600;
	font-size: 30px;
}

.header-paragraph {
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--grayish-blue);
}

/* Start the code that is used in header buttons and in download section */
.buttons__container {
	display: grid;
	grid-row-gap: 30px;
	justify-items: center;
}

.cta {
	text-decoration: none;
	color: #fff;
	width: 280px;
	padding: 15px 0;
	border-radius: 25px;
	letter-spacing: 2px;
	text-align: center;
	cursor: pointer;
	transition: all 0.4s ease;
}

.cta.green {
	background-color: var(--strong-cyan);
	box-shadow: 0 7px 2px rgba(38, 186, 164, 0.2);
}

.cta.green:hover {
	background-color: #3bc5b0;
	box-shadow: 0 10px 15px rgba(38, 186, 164, 0.5);
	animation: bounding 0.6s ease-in-out;
}

.cta.blue {
	background-color: var(--light-blue);
	box-shadow: 0 7px 2px rgba(96, 115, 255,0.2);
}

.cta.blue:hover {
	background-color: #7583e7;
	box-shadow: 0 10px 15px rgba(96, 115, 255,0.5);
	animation: bounding 0.6s ease-in-out;
}

@keyframes bounding {
	0%{
		transform: translateY(0);
	}
	20%{
		transform: translateY(-6px);
	}
	40%{
		transform: translateY(0);
	}
	60%{
		transform: translateY(-3px);
	}
	80%{
		transform: translateY(0);
	}
}
/* End the code that is used in header buttons and in download section */
/* End Header */


/* Start Section 1 */
.keep__container {
	margin-top: 50px;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 50px;
}

.keep__picture {
	text-align: center;
}

.keep-img {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}

.keep__cards {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 40px;
	max-width: 500px;
	margin: 0 auto;
}

.keep__card {
	text-align: center;
}

.keep__card-title {
	font-size: 25px;
	color: var(--dark-grayish-blue);
	margin-bottom: 15px;
}

.keep__card-paragraph {
	line-height: 1.4;
	color: var(--grayish-blue);
	font-size: 17px;
}
/* End Section 1 */



/* Start Section 2 */
.access {
	text-align: center;
}

.access .section-paragraph {
	color: var(--grayish-blue);
	line-height: 1.6;
	margin-bottom: 40px;
	font-weight: 400;
	font-size: 17px;
}

.access__figure {
	margin-top: 30px;
}

.access-img {
	width: 100%;
	max-width: 400px;
}
/* End Section 2 */



/* Start Section 3 */
.workflow__grid {
	display: grid;
	grid-template-columns: 1fr;
	max-width: 450px;
	grid-row-gap: 50px;
	margin: 0 auto;
	margin-top: 50px;
	text-align: center;

}

.workflow-title {
	margin-top: 25px;
	margin-bottom: 15px;
	color: var(--dark-grayish-blue);
	font-weight: 600;
	font-size: 20px;
}

.workflow-paragraph {
	font-size: 16px;
}

.workflow-img {
	transition: transform 0.7s ease-in-out;
}

.workflow__item {
	cursor: default;
}

.workflow__item:hover > .workflow-img {
	transform: rotateY(360deg);
}
/* End Section 3 */



/* Start Section 4 */
.sponsors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
	grid-gap: 40px;
	justify-items: center;
}

.sponsors__link {
	text-decoration: none;
	width: max-content;
	cursor: pointer;
}

.sponsors__link:hover {
	animation: bounding 0.6s ease-in-out;
}
/* End Section 4 */


/* Start Section 5 */
.download .buttons__container {
	margin-top: 30px;
}
/* End Section 5 */



/* Start footer */
.footer {
	background-color: #e7eaeb;
}

.footer__container {
	text-align: center;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 50px;
	justify-items: center;
}

.footer-logo {
	width: 80px;
}

.footer__links {
	display: grid;
	grid-template-columns: max-content;
	justify-items: center;
	grid-gap: 30px;
}

.footer-link {
	display: inline-block;
	width: max-content;
	color: var(--dark-grayish-blue);
	font-weight: 400;
	cursor: pointer;
	position: relative;
	transition: color 0.3s ease;
	--width: 0;
}

.footer-link::after {
	content: "";
	display: block;
	width: var(--width);
	height: 2px;
	background-color: var(--dark-grayish-blue);
	position: absolute;
	left: 0;
	bottom: -3px;
	transition: all 0.3s ease;
}

.footer-link:hover {
	--width: 100%;
	color: var(--strong-cyan);
}

.footer-link:hover::after {
	background-color: var(--strong-cyan);
}

.footer-link,
.footer__icons__link {
	text-decoration: none;
}

.footer__icons {
	display: flex;
	grid-gap: 10px;

}

.footer__icons__link svg {
	width: 25px;
	height: 25px;
	fill: var(--dark-grayish-blue);
	transition: all 0.2s ease;
}

.footer__icons__link svg:hover {
	fill: var(--strong-cyan);
	transform: translateY(-5px);
}
/* End footer */


/* Change theme button */
.theme-btn {
	position: fixed;
	bottom: 3vh;
	right: 3vw;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	outline: none;
	background-color: var(--dark-grayish-blue);
	cursor: pointer;
	box-shadow: 0 0 15px 2px rgba(100,100,100,0.2);
	z-index: 100;
}

.theme-btn svg {
	width: 25px;
	height: 25px;
	fill: #d3d3d3;
	transition: all 0.3s ease-in-out;
}

.theme-btn:hover {
	animation: bounding 0.6s ease-in;
}

.theme-btn:hover > svg {
	fill: #fff;
}



/* Dark theme */
body.dark {
	background-color: #2c2b2b;
}

body.dark .subtitle,
body.dark .header-title {
	color: #fff;
}

body.dark .section-paragraph,
body.dark .keep__card-paragraph{
	color: #d2d2d2;
}

body.dark .header-paragraph,
body.dark .keep__card-title,
body.dark .workflow-title {
	color: #f2f2f2;
}

body.dark .footer-link {
	color: #d2d2d2;
}

body.dark .footer-link::after {
	background-color: #d2d2d2;
}

body.dark .footer-link:hover {
	color: #fff;
}

body.dark .footer-link:hover::after {
	background-color: #fff;
}

body.dark .footer {
	background-color: #262828;
}

body.dark .footer__icons__link svg {
	fill: #d2d2d2;
}

body.dark .footer__icons__link:hover > svg {
	fill: #fff;
}

body.dark .theme-btn svg {
	fill: #fff;
}


/* For small devices */
@media screen and (max-width: 330px) {
	* {
		font-size: 16px;
	}

	.header {
		background-size: 100% 250px;
	}

	.cta {
		width: 230px;
	}

	.header-title, .subtitle {
		font-size: 25px;
	}

	.header-paragraph {
		font-size: inherit;
	}
	
	.keep__card-title {
		font-size: 20px;
	}

	.workflow-paragraph {
		font-size: inherit;
	}
}


/* For tablets */
@media screen and (min-width: 768px) {
	.header {
		background-image: url(../images/bg-header-desktop.png);
		background-size: 100% 250px;
	}

	.download .buttons__container {
		grid-template-columns: repeat(2,1fr);
	}

	.footer__container {
		grid-template-columns: max-content 1fr max-content;
	}

	.footer-logo {
		width: 60px;
	}

	.footer__links {
		grid-template-columns: repeat(2,1fr);
		text-align: left;
		justify-items: start;
		grid-column-gap: 80px;
	}

	.theme-btn {
		right: 5vw;
		bottom: 5vh;
	}
}

/* For large devices */
@media screen and (min-width: 1024px) {
	.header {
		background-size: 100% 300px;
	}

	.header__container {
		max-width: 700px;
	}

	.header-title {
		font-size: 40px;
	}

	.subtitle {
		font-size: 35px;
	}

	.header-paragraph,
	.section-paragraph {
		font-size: 18px;
	}

	.header-paragraph {
		width: 600px;
	}

	.header .buttons__container {
		grid-template-columns: repeat(2,1fr);
		grid-column-gap: 20px;
	}

	.section-paragraph {
		max-width: 680px;
	}

	/* MAIN */
	.keep__container {
		grid-template-columns: repeat(2,1fr);
		margin-top: 100px;
	}

	.keep__figure {
		position: relative;
	}

	.keep-img {
		max-width: initial;
		width: 175%;
		margin-left: -75%;
	}

	.keep__cards {
		grid-template-rows: repeat(3,max-content);
		align-self: center;
		padding-left: 50px;
	}

	.keep__card {
		text-align: left;
	}

	.access .section-paragraph {
		max-width: 650px;
	}

	.access-img {
		max-width: 600px;
	}

	.workflow__grid {
		max-width: initial;
		grid-template-columns: repeat(3,1fr);
		grid-column-gap: 30px;
	}

	.sponsors {
		grid-template-columns: repeat(5,max-content);
		justify-content: center;
	}

	.sponsors-img {
		width: 100%;
	}

	.download .buttons__container {
		grid-template-columns: repeat(2,max-content);
		justify-content: center;
		grid-column-gap: 20px;
	}

	/* FOOTER */
	.footer__container {
		grid-column-gap: 100px;
	}

	.footer__links {
		grid-template-columns: repeat(3, max-content);
		justify-self: start;
	}

	.footer-link.col-1 {
		grid-column: 1/2;
	}

	.footer-link.col-2 {
		grid-column: 2/3;
	}

	.footer-link.col-3 {
		grid-column: 3/4;
	}

	.footer-link.col-2.c-one {
		grid-row: 1/2;
	}

	.footer-link.col-3 {
		grid-row: 1/2;
	}
}