@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"); :root {
--white: #FBFBFC;
--txt: #2A3033;
--lightgrey: #CAD0D3;
--transparent-light: #FBFBFC1F;
--transparent-hover-light: #FBFBFC52;
--transparent-dark: #2A303380;
--transparent-hover-dark: #2A3033A8; --font: 'Roboto', sans-serif; --h1-size: clamp(1.6rem, 1rem + 1.6vw, 3rem);
--desc-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.1rem);
--pad-left: clamp(1.5rem, 6vw, 8rem);
--pad-right: clamp(1.25rem, 5vw, 5rem);
--nav-offset: clamp(12px, 2.8svh, 28px);
--nav-height: 4em;
--content-gap: clamp(16px, 7svh, 64px);
} html,
body {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
}  .slider-wrapper .slide.lightmode .text-bg,
.slider-wrapper .slide.lightmode a {
background-color: var(--transparent-light);
}
.slider-wrapper .slide.lightmode a:hover,
.slider-wrapper.lightmode .slidenav-btn::before {
background-color: var(--transparent-hover-light);
}
.slider-wrapper.lightmode .slidenav-btn::after {
background-color: var(--white);
} .slider-wrapper .slide.darkmode .text-bg,
.slider-wrapper .slide.darkmode a {
background-color: var(--transparent-dark);
}
.slider-wrapper .slide.darkmode a:hover,
.slider-wrapper.darkmode .slidenav-btn::before {
background-color: var(--transparent-hover-dark);
}
.slider-wrapper.darkmode .slidenav-btn::after {
background-color: var(--txt);
} .slider-wrapper * {
font-family: var(--font);
}
.slider-wrapper .slides {
display: flex;
flex-direction: row;
position: relative;
max-width: 3840px;
width: calc(100vw - var(--scrollbar-width, 0px)); height: clamp(420px, 70svh, 860px);
background-color: var(--txt);
color: var(--white);
margin: 0 auto;
z-index: 1;
}
.slider-wrapper .slide {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
display: flex;
flex-direction: column;
inset: 0;
opacity: 0;
pointer-events: none;
transform: scale(0.98);
transition: opacity .6s ease, transform .6s ease;
}
.slider-wrapper .slide.active {
opacity: 1;
transform: scale(1);
pointer-events: auto; 
} .slider-wrapper .content {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: auto !important;
margin-top: auto;
margin-bottom: calc(var(--content-gap) + var(--nav-height));
padding-left: var(--pad-left);
padding-right: var(--pad-right);
} .slider-wrapper h1 {
font-size: var(--h1-size);
color: var(--white);
font-weight: 600 !important;
margin: 0;
text-wrap: balance;
hyphens: auto;
overflow-wrap: anywhere;
} .slider-wrapper .description {
font-size: var(--desc-size);
color: var(--white);
line-height: 1.5em;
margin-top: 2em;
margin-bottom: 0;
text-shadow: 1px 1px 5px var(--txt);
}
.slider-wrapper .text-bg {
margin-bottom: 2em;
padding: 2em;
width: 100%;
max-width: clamp(55%, calc(-25vw + 1280px), 100%);
;
margin-inline: 0;
} .slider-wrapper a {
width: max-content;
color: var(--white);
font-weight: 700;
border-radius: 2px;
border: 1px solid var(--transparent-hover-light);
text-decoration: none;
text-shadow: none;
padding: 1em;
}
.slider-wrapper a:hover {
color: var(--white) !important;
box-shadow: 1px 1px 2px var(--transparent-dark), -1px -1px 2px var(--transparent-light);
} .slider-wrapper .slidenav {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} .slider-wrapper .slidenav-btns {
position: absolute;
height: auto;
display: flex;
gap: 1rem;
z-index: 5;
bottom: var(--nav-offset);
}
.slider-wrapper .slidenav-btn {
position: relative;
-webkit-appearance: none; appearance: none;
padding: 0;
background-color: transparent;
border: none;
cursor: pointer;
height: 4em;
overflow: hidden;
transition: transform .3s ease;
}
.slider-wrapper .slidenav-btn.active {
transform: translateY(-0.6em);
opacity: 0.75;
} .slider-wrapper .slidenav-btn::before,
.slider-wrapper .slidenav-btn::after {
content: "";
position: absolute;
top: 50%;
left: 0;
height: 2px;
transform: translateY(-50%);
} .slider-wrapper .slidenav-btn::before {
width: 100%;
} .slider-wrapper .slidenav-btn::after {
width: 0%;
background: transparent;
}
.slider-wrapper .slidenav-btn.animating::after {
animation: fill var(--timer, 5s) linear forwards;
}
@keyframes fill {
from {
width: 0%;
}
to {
width: 100%;
}
} @media (max-width: 480px) {
.slider-wrapper .slides {
height: clamp(480px, 75svh, 860px);
}
.slider-wrapper .content {
height: auto;
}
.slider-wrapper .text-bg {
margin-bottom: 1.5em;
padding: 1em;
}
.slider-wrapper .slidenav-btn {
flex: 1 1 0; min-width: 3rem;
max-width: 6rem;
}
} @media (min-width: 481px) and (max-width: 1024px) {
.slider-wrapper .slidenav-btn {
flex: 1 1 0; min-width: 6rem;
max-width: 10rem;
}
} @media (min-width: 1025px) {
.slider-wrapper .slidenav-btn {
flex: 1 1 0; min-width: 10rem;
max-width: 15rem;
}
} @supports not (height: 1svh) {
.slider-wrapper .slides {
height: clamp(480px, 75vh, 860px);
}
.slider-wrapper .slidenav-btns {
bottom: clamp(12px, 2.8vh, 28px);
}
}