﻿* { box-sizing: border-box; }
:root { --primary-color: #f68d2e; --secondary-color: #FBDFC5; --text-color: #000; --band-margin: 100px; --global-padding-inline: 190px; }

html, body { margin: 0; padding: 0; font-size: 1rem; }
h1, h2, h3, h4, h54, h6 { margin: 0; }

body { font-family: "DM Sans", sans-serif; }

img { height: auto; display: block; }

::-webkit-scrollbar-track { background-color: #FFF; }
::-webkit-scrollbar { width: 6px; background-color: #FFF; }
::-webkit-scrollbar-thumb { background: var(--primary-color); }

.wrapper { height: 100dvh; width: 100%; color:#fff; text-shadow: 0 0 5px rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: stretch;}

.wrapper .header video {height: 100dvh; width: 100%; background-color: #fff; object-fit: cover; filter: brightness(70%);}

.wrapper .centered {position: relative;}
.wrapper .content {position: absolute; top:0; left: 0; width:100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 5%;}
.wrapper .content .title {font-size: 6rem; line-height: 1.1; font-weight: 700; text-align: center;}
.wrapper .content .subtitle {font-size: 4rem; line-height: 1.2; font-weight: 500; margin-top:30px;}

.wrapper .footer {position: absolute; bottom: 0; left: 0; width:100%; height: auto; padding: 30px 5%; }
.wrapper .footer .footer-copyright {display: flex; align-items: center; justify-content: center; gap:30px; line-height: 1.3;}
.wrapper .footer .footer-copyright > div {display: block; width: auto;}

/*RGB*/
/*.header-image {box-sizing: border-box; border: solid var(--b) #0000; object-fit: cover; border-radius: calc(2*var(--b)); background: repeating-conic-gradient(from var(--a, 0deg), var(--l, #0000 0% 70%, #0000ff7f)) border-box; filter: var(--f, url(#glow-0)); animation: a 2s linear infinite; --f: url(#glow-1); --l: #ff45457f, #00ff997f, #006aff7f, #ff00957f, #ff45457f}*/

@property --a {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false
}

@keyframes a { to { --a: 1turn } }

@media (pointer:fine) {
    .content-inner-wrapper .flex-content a:hover { transform: scale(1.05); }
}

@media (min-width:2200px) {
    :root { --global-padding-inline: 250px; }
}

@media (max-width:1800px) {
    :root { --global-padding-inline: 150px; }
}

@media (max-width:1600px) {
    :root { --global-padding-inline: 120px; }
}

@media (max-width:1400px) {
    :root { --band-margin: 80px; --global-padding-inline: 100px; }

    .wrapper .content .title {font-size: 5rem;}
    .wrapper .content .subtitle {font-size: 3rem;}
}

@media (max-width:1200px) {
    :root { --band-margin: 60px; --global-padding-inline: 60px; }

}

@media (max-width:1023px) {
    :root { --band-margin: 60px; --global-padding-inline: 40px; }

}

@media (max-width:767px) {
    .wrapper .content .title {font-size: 4rem;}
    .wrapper .content .subtitle {font-size: 2.5rem;}
    .wrapper .content {top:-15%;}
    .wrapper .footer .footer-copyright {flex-direction: column; gap:10px; text-align: center;}
}

@media (max-width:640px) {
    :root { --band-margin: 30px; --global-padding-inline: 30px; }

}

@media (max-width:480px) {
    :root { --global-padding-inline: 25px; }

    .wrapper .content .title {font-size: 2.8rem;}
    .wrapper .content .subtitle {font-size: 1.8rem;}
}

@media (orientation:landscape) and (max-height:640px) {
    .wrapper .content .title {font-size: 4rem;}
    .wrapper .content .subtitle {font-size: 2.5rem;}
    .wrapper .content {top:-15%;}
}

@media (orientation:landscape) and (max-height:480px) {
    .wrapper .content .title {font-size: 2.8rem;}
    .wrapper .content .subtitle {font-size: 1.8rem;}
}