@import "/static/css/fonts.css";
@import "/static/css/buttons.css";
@import "/static/css/navigation.css";
@import "/static/css/sections.css";
@import "/static/css/animations.css";
@import "/static/css/timer.css";
@import "/static/css/cards.css";
@import "/static/css/weather.css";
@import "/static/css/articles.css";
@import "/static/css/pills.css";
@import "/static/css/modal.css";
@import "/static/css/loader.css";
@import "/static/css/steps.css";
@import "/static/css/inputs.css";
@import "/static/css/toaster.css";
@import "/static/css/infopage.css";
@import "/static/css/slider.css";
@import "/static/css/responsive.css";
@import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css";

:root{
    --font-family-titles: "Njord";
    --font-family-secondary: "Odinson";
    --font-family-texts: "Space Grotesk";
    --logo-size: 135px;
    --default-radius: 10px;
    --button-width-medium: 100px;
    --button-height-medium: 55px;
    --translate-bio-description: -79px;
    --map-square-side: 450px;
    --gradient-background-turquoise-dark: linear-gradient(0deg, rgba(2,104,105,1) 0%, rgba(1,52,53,1) 100%);
    --gradient-background-turquoise-light: linear-gradient(180deg, rgba(18,190,191,1) 0%, rgba(2,104,105,1) 100%);;
    --gradient-background-purple: linear-gradient(0deg, rgba(181,13,133,1) 0%, rgba(105,7,77,1) 100%);
    --gradient-background-green-diagonal: linear-gradient(156deg, rgba(61,181,40,1) 0%, rgba(35,105,23,1) 100%);
    --red-color-1: #F52F1D;
    --red-color-2: #B52316;
    --red-color-3: rgb(105, 20, 13);
    --blue-color-1: #05F1F5;
    --blue-color-2: #04B2B5;
    --green-color-1: #52F536;
    --green-color-2: #236917;
    --green-color-3: #28751A;
    --purple-color-1: #F511B4;
    --purple-color-2: #B50D85;
    --brown-color-1: #F5742A;
    --light-dark-color: #4A4A4A;
    --default-white-border: 2px solid white;
    --default-black-border: 2px solid black;
    --default-text-shadow: 1px 2px black;
    --padding-img-figure: 10px;
    --modal-content-padding: 16px;
    --modal-width-expanded: 600px;
    --modal-width-collapsed: 250px;
    --modal-height: 700px;
    --width-content: 100vw;
    --scroller-width: 600px;
    --scroll-width: calc(var(--scroll-item-width) * (var(--num-of-items) * 2));
    --scroll-item-width: calc(var(--scroller-width) * 0.25);
    --num-of-items: 4;
    --text-size-large: 1.25em;
}
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body:has(dialog[open]){
    overflow-y: hidden;
}

html{
    scroll-behavior: smooth;
}

.drop-shadow{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.background{
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.blurred-image{
    background-size: cover;
    width: 101%;
    height: 101%;
    position: absolute;
    z-index: 1;
}

.blurred-image::after{
    backdrop-filter: blur(3px);
    content: "";
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.section-widget{
    height: 240px;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: var(--width-content);
}

.section-widget:is(.white-font){
    color: white;
}

.self-centered{
    align-self: center;
}

.profile-page{
    display: flex;
}

.flex{
    display: flex;
}

.flex.column{
    flex-direction: column;
}

.flex.column.h-center{
    align-items: center;
}

.flex.column.v-center{
    justify-content: center;
}

.flex.column.center{
    justify-content: center;
    align-items: center;
}

.flex.space-between{
    justify-content: space-between;
}

footer{
    display: flex;
    background: var(--gradient-background-purple);
    padding-bottom: 50px;
}

footer div{
    width: 33.333333%;
}

footer .logo{
    position: unset;
}

footer #center{
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer #urls{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

footer #urls a{
    text-decoration: none;
    color: whitesmoke;
    font-family: var(--font-family-texts);
}

footer #urls a span{
    color: rgba(255, 255, 255, 0.5);
}

footer i{
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.5);
}

footer .logo{
    width: 25%;
}

.logo{
    width: 200px;
    inset: 0;
    position: absolute;
    z-index: 2;
}