@import url('https://fonts.googleapis.com/css2?family=Brygada+1918&family=Italianno&display=swap');

:root {
    /* Custom pairs */
    --base-font: sans-serif;
    --color-fg: #333;
    --color-bg: #f1f1f1;
}

iframe {
    max-width: 100%;
}

html {
    max-width: 100%;
}

body {
    position: relative;
    font-family: var(--base-font);
    color: var(--color-bg);
    background-color: var(--color-fg);
    max-width: 100%;
}

.container {
    position: relative;
    width: min(90rem, 100vw - 1em);
    display: grid;
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
}

.button {
    display: inline-block;
    border-radius: 4px;
    background-color: #238326;
    border: none;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    padding: 20px;
    width: 185px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button:hover span {
    padding-right: 25px;
}

.button:hover span:after {
    opacity: 1;
    right: 0;
}

.filter {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(./images/kajetan-sumila-e8ULlZbWu0I-unsplash.jpg);
    background-size: cover;
    background-clip: content-box;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
}

h1 {
    position: relative;
    font-family: 'Italianno', cursive;
    font-size: 6rem;
    letter-spacing: 2px;
}

h2,
h3,
table,
button {
    font-family: 'Brygada 1918', serif;
    max-width: 100%;
}


td {
    font-size: 2rem;
    border-bottom: 1px solid #8b8b8b;
}

table {
    caption-side: bottom;
    border-collapse: collapse;
}

.price {
    white-space: nowrap;
}

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

    td {
        display: grid;
        grid-template-columns: auto;
        border-bottom: none;
    }

    .border-bottom {
        border-bottom: 3px solid #8b8b8b;
    }
}



.header {
    display: grid;
    justify-items: center;
    margin-bottom: 1rem;
    max-width: 100%;
}

.headerButtons {
    display: flex;
    justify-content: space-evenly;

    && span {
        font-size: 1.25rem;
    }
}

.about {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin: 1rem;

    && h2 {
        margin-bottom: 1.5rem;
    }
}

.tider {
    grid-area: 1 / 1 / 3 / 2;
}

.kontaktInfo {
    grid-area: 1 / 2 / 3 / 3;
}