:root {
    --base-font: sans-serif;

    --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
    --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
    --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
    --step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
    --step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
    --step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
    --step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
    --step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);

    --space-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem);
    --space-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem);
    --space-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
    --space-s: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
    --space-m: clamp(1.69rem, calc(1.62rem + 0.33vw), 1.88rem);
    --space-l: clamp(2.25rem, calc(2.16rem + 0.43vw), 2.50rem);
    --space-xl: clamp(3.38rem, calc(3.24rem + 0.65vw), 3.75rem);
    --space-2xl: clamp(4.50rem, calc(4.33rem + 0.87vw), 5.00rem);
    --space-3xl: clamp(6.75rem, calc(6.49rem + 1.30vw), 7.50rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.54vw), 0.63rem);
    --space-2xs-xs: clamp(0.56rem, calc(0.43rem + 0.65vw), 0.94rem);
    --space-xs-s: clamp(0.88rem, calc(0.74rem + 0.65vw), 1.25rem);
    --space-s-m: clamp(1.13rem, calc(0.86rem + 1.30vw), 1.88rem);
    --space-m-l: clamp(1.69rem, calc(1.40rem + 1.41vw), 2.50rem);
    --space-l-xl: clamp(2.25rem, calc(1.73rem + 2.61vw), 3.75rem);
    --space-xl-2xl: clamp(3.38rem, calc(2.81rem + 2.83vw), 5.00rem);
    --space-2xl-3xl: clamp(4.50rem, calc(3.46rem + 5.22vw), 7.50rem);

    /* Custom pairs */
    --space-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem);

    --color-primary1: #292A2E;
    --color-primary2: #1A1B1D;
    --color-secondary: #F2F4F3;
    --color-tertiary1: #FB3640;
    --color-tertiary2: #79A1EE;
    --color-border: #C7C7C7;
}

html {
    scroll-behavior: smooth;
    margin: 0;
    height: 100%;
}

body {
    font-family: 'League Spartan', sans-serif;
    background-color: var(--color-primary1);
    color: var(--color-secondary);
    margin: 0;
    height: 100%;
}

nav {
    z-index: 1;
    position: fixed;
    height: 3rem;
    width: 100%;
    background-color: var(--color-primary2);
}

.background {
    background-image: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), url("images/pissa.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.icon {
    width: 4rem;
    height: 3rem;
    position: fixed;
    padding-left: 1rem;
}

.title1 {
    /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
    text-align: center;
    padding-top: 20vh;
    margin: 0;
    font-size: 300%;
    font-weight: 900;
}

.title2 {
    margin: 0;
    padding-top: 2vh;
    font-size: 200%;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 900;
    padding-bottom: 10vh;
}

.open {
    text-align: center;
    /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
    font-size: 150%;
}

.contact {
    position: fixed;
    top: 1%;
    right: 1rem;
    color: white;
    text-decoration: none;
    font-size: xx-large;
}

.menu {
    color: white;
    position: fixed;
    top: 1%;
    right: 10rem;
    text-decoration: none;
    font-size: xx-large;

}

.scroller {
    width: 3rem;
    height: 1rem;
    background-color: var(--color-secondary);
    filter: opacity(50%);
    border-radius: 100px;
    margin-right: auto;
    margin-left: auto;
    transform: translateY(-3rem);
}


.h1 {
    text-align: center;
    font-weight: 700;
    font-size: 3rem;
    margin-top: 3rem;
}

.h2 {}

.h3 {}

hr {}

.menuContainer {
    text-align: center;
    margin-bottom: 3rem;
}

.menuButton {
    width: 15%;
    height: 2.5rem;
    margin-right: 1rem;
    font-size: var(--space-s);
    font-weight: 400;
    color: var(--color-secondary);
    background-color: var(--color-primary1);
    border-color: var(--color-border);
    border-radius: 30px;
    transition: 0.3s;
}

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

    .menuButton {
        margin-top: 1rem;
        width: 70vw;
    }
}

.menuButton:hover {
    color: var(--color-primary1);
    background-color: var(--color-secondary);
}

.menuButtonFocus {
    color: var(--color-primary1);
    background-color: var(--color-secondary);
}

.menuItem {
    list-style: none;
    margin-right: 10%;
    margin-left: 10%;
    padding: 0;
}

.menuDiv {
    display: flex;
}

.menuItemName {
    font-size: var(--space-m);
    font-weight: 500;
    margin: 0;
}

.menuItemPrice {
    font-size: var(--space-m);
    font-weight: 500;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 0;
}

.menuItemText {
    font-size: var(--space-s);
    font-weight: 300;
}

.aboutUsContainer {
    background-color: var(--color-primary2);
    width: 100%;
    height: fit-content;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.aboutUsContainer p {
    text-align: center;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3rem;
    font-size: var(--space-m);
    font-weight: 300;
}

.contactContainer {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 4rem;
}

#alert {
    background-image: url("./images/italianboi.png");
}

iframe {
    width: 80vw;
    height: 20rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.karta {
    width: 80vw;
    height: 20rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


.contactItems {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.individualContactItems {
    margin-right: 3rem;
}

.contactTitle {
    font-size: var(--space-m);
    font-weight: 500;
    margin-top: 1rem;
    margin-bottom: 0.2rem;
}

.contactText {
    font-size: var(--space-s);
    font-weight: 300;
    margin: 0.2rem;
}

:target {
    scroll-margin-top: 3ex;
}

* {
    box-sizing: border-box
}

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    max-height: 665px;
    position: relative;
    margin: auto;
    padding-top: 3rem;
}

.aboutP {
    padding-top: 1rem;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    background-color: var(--color-primary1);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: var(--color-primary2);
}

/* Caption text */
.text {
    color: #f2f2f2;
    background-color: var(--color-primary2);
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: -53px;
    width: 100%;
    text-align: center;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 40px 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}