*{box-sizing: border-box; margin: 0; padding: 0;}
html,body{font: 400 24px Inter, system-ui, Arial, sans-serif; height: 100%; line-height: 1.3; width: 100%;}
body{display: flex; flex-direction: column;}

.maincontent{margin: 0 auto; width: 80%;}
.page-wrapper{display: flex; flex-direction: column; min-height: 100vh;}

h1{color: var(--text); font-size: 2rem; font-family: "Libre Baskerville", sans-serif; font-weight: 600; line-height: 1.1; margin: 1.5rem 0}

p{font-size: 1rem; font-weight: 300; line-height: 1.5; margin-bottom: 1rem}

header{background: #fd776a; flex-shrink: 0; margin-bottom: 2rem}
header .maincontent{color: #ffffff; font-size: .8rem; letter-spacing: .02rem; padding: 1rem 0; position: relative; text-align: center;}
header .flags{display: flex; gap: .5rem; right: 0; position: absolute; top: 1rem}
header .flags img{height: auto; width: 30px;}

main{display: flex; flex: 1;}
main .hero{flex: 1; display: flex; width: 100%;}
main .hero .hero-inner{display: flex; gap: 2rem; margin: 0 auto; min-height: 75vh; width: 100%;}
main .hero .hero-inner .hero-content{display: flex; flex-direction: column; gap: 1rem; justify-content: center; width: 50%}
main .hero .hero-inner .hero-content img{height: auto; width: 350px}
main .hero .hero-inner .hero-content .app-links p{color: #262626; font-size: .8rem; margin-top: 1rem}
main .hero .hero-inner .hero-content .app-links div{align-items: center; display: flex; gap: .8rem;}
main .hero .hero-inner .hero-visual{background-image: url('../images/dog.webp'); background-size: contain; background-position: center; background-repeat: no-repeat; width: 42%; min-height: 0;}

footer{background: #000; color: #FFF; flex-shrink: 0; font-size: .7rem; margin-top: 2rem; padding: 1.5rem 0; text-align: center}
footer .maincontent{display: flex; flex-direction: column; gap: .5rem}
footer .maincontent .links{align-items: center; display: flex; gap: 1.5rem; justify-content: center;}
footer a{color: #FFF; text-decoration: none; transition: color .5s ease;}
footer a:hover{color: #DDD}
footer .maincontent .contact a{color: #EF5576; font-size: .85rem}
footer i{color: #EF5576; font-size: 1.25rem; transition: color .5s ease;}
footer i:hover{color: #FFF;}
footer .maincontent .footer-text {font-size: 0.7rem; color: #aaa; line-height: 1.5; margin-top: 5px;}


@media screen and (max-width: 2560px){

	html{font-size: 22px}

}

@media screen and (max-width: 1920px){

	html{font-size: 21px}

	.maincontent{width: 90%;}

}

@media screen and (max-width: 1250px){

	.maincontent{width: 92%;}

	h1{font-size: 1.5rem; margin: .5rem 0}

	main .hero .hero-inner{flex-direction: column; gap: 2rem; min-height: auto}
	main .hero .hero-inner .hero-visual{flex: none; height: 40vh; /*order: -1;*/ width: 100%}
	main .hero .hero-inner .hero-content{flex: none; text-align: center; width: 100%}
	main .hero .hero-inner .hero-content img{margin: 0 auto; width: 300px}
	main .hero .hero-inner .hero-content .app-links{margin-top: 0}
	main .hero .hero-inner .hero-content .app-links div{justify-content: center}

	footer .maincontent .links{flex-direction: column; gap: .75rem;}

}

@media screen and (max-width: 1000px){

	header .flags{justify-content: center; margin-top: .5rem; position: static;}

	main .hero .hero-inner .hero-content img{display: block; width: 100%}

}

@media screen and (max-width: 500px){

	h1{font-size: 1.3rem;}

	main .hero .hero-inner .hero-content .app-links div{flex-direction: column;}
	main .hero .hero-inner .hero-content .app-links div img{width: 70%}

}