@import url("styleVariables.css");

/* ================================== Site styles ================================== */
/*********** Body ***********/
body {
    min-height: 100dvh;
    max-width: 100%;
    font-family: var(--fontFamily);
    font-size: var(--fontNormal);
}

/*********** Scrollbar ***********/
body::-webkit-scrollbar-track,
.scrollArea::-webkit-scrollbar-track,
.scrollArea2::-webkit-scrollbar-track {
    background-color: var(--white);
    border: var(--border);
}

body::-webkit-scrollbar,
.scrollArea::-webkit-scrollbar,
.scrollArea2::-webkit-scrollbar {
    width: 0.2dvw;
    height: 0.5dvh;
    background-color: var(--white);
}

body::-webkit-scrollbar-thumb,
.scrollArea::-webkit-scrollbar-thumb,
.scrollArea2::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 0.4dvh 0.2dvh var(--darkGray);
    background-color: var(--lightGray);
}

/*********** Navbar ***********/
.nav {
    z-index: 3;
    position: sticky;
    top: -1px;
    background-color: var(--white);
    box-shadow: var(--bottomShadow);
}

.navbar {
    height: clamp(0px, 5.723dvh, 75px);
    display: grid;
    grid-template-columns: 25% auto auto;
}

.navbar .container {
    display: grid;
    grid-auto-flow: column;
}

.navbar .container img {
    height: 5.2dvh;
    max-height: 60px;
    padding: 0.5dvh 0 0 0.5dvh;
}

.navbar a {
    text-decoration: none;
    text-align: center;
    color: var(--black);
    font-size: var(--fontNormal);
    font-weight: var(--fontBold);
    padding-top: 1dvh;
    width: clamp(0px, 10dvh, 150px);
    display: inline-block;
    border-bottom: 0.3dvh solid transparent;
}

.navbar a:hover {
    border-bottom-color: var(--black);
}

.navbar a.active {
    border-bottom-color: var(--black);
}

/*********** Background ***********/
.background {
    background: url(../images/backgrounds/swedenBlurBG.png);
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: cover;
    min-height: var(--pageHeight);
}

/*********** Popup ***********/
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--fadedBlack);
    z-index: 500;
}

.popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--invertWhite);
    color: var(--invertBlack);
    padding: 2dvh;
    border-radius: 2dvh;
    text-align: center;
}

.popup-content h1 {
    margin-top: 0;
    font-size: var(--fontPopup);
    font-weight: var(--fontBold);
    padding: 2dvh;
}

.popup-content h2 {
    font-size: var(--fontPopup);
    padding: 2dvh;
}

.popup-content hr {
    margin-bottom: 3dvh;
}

.popup-content p {
    font-size: var(--fontBig);
    padding-bottom: 2dvh;
}

.popup-content button {
    padding: 1dvh;
    margin: 0dvh 1dvh;
    width: 42%;
    height: 100%;
    font-size: var(--fontBig);
    font-weight: var(--fontBold);
}

.btn:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}