:root {
    background-image: url(Images/background.png);
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    background-attachment: scroll;
}

* {
    cursor: url('https://cdn.cursors-4u.net/previews/spider-f665de93-32.webp') 32 32, auto !important;
}

@font-face {
    font-family: rob;
    src: url(Fonts/roboto.ttf);
}

@font-face {
    font-family: smf;
    src: url(Fonts/spider.ttf);
}

@font-face {
    font-family: aff;
    src: url("Fonts/The Amazing Spider-Man.ttf");
}

body {
    font-family: rob;
    text-align: center;
}

header,
main,
footer {
    background-color: color-mix(in srgb, white 45%, transparent 55%);
    margin: 20px 20px;
    padding: 20px;
    display: block;

    border-width: 5px;
    border-radius: 15px;
    border-color: black;
    border-style: solid;
    box-shadow: 0px 0px 15px black, inset 0px 0px 15px black;
}

ul.nav-bar {
    display: flex;
    align-items: center;
    background-color: color-mix(in srgb, gray 25%, transparent 75%);
    display: inline;
    padding: 5px;
    margin: 0px auto;
    width: 100%;
    height: 100%;

    border-radius: 25px;
    border-color: color-mix(in srgb, darkred 20%, 80% black);

    li.nav-item {
        display: inline;

        a.nav-item-link {

            background: linear-gradient(to bottom, palevioletred, darkred);

            border-width: 5px;
            border-radius: 15px;
            border-color: color-mix(in srgb, darkred 50%, black 50%);
            border-style: solid;

            /* Shadows and Effects */
            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);

            /* Typography */
            color: black;
            font-family:
                rob, "Lucida Grande", "Lucida Sans Unicode", "Segoe UI", system-ui,
                sans-serif;
            font-weight: 700;
            text-decoration: none;
            text-shadow: 0 2px 0.5em rgba(0, 0, 0, 0.2);

            /* Layout */
            cursor: pointer;
            position: relative;
            transition: all 300ms ease;

            /* Prevent text selection */
            user-select: none;
            -webkit-user-select: none;

            padding: 10px;
            margin-left: 5px;
            margin-right: 5px;

            &.disabled {
                pointer-events: none;
                cursor: none;
                filter: brightness(65%);
            }


        }
    }
}

iframe.borderless-iframe {
    border: none;
}


@media (max-width: 750px) {
    #mothvertisement {
        max-width: 300px;
        width: 100%;
        height: 250px;
    }
}

#mothvertisement {
    margin-left: auto;
    display: block;
    margin-right: auto;
    max-width: 728px;
    width: 100%;
    height: 90px;
}

div.collapsible {
    margin: 20px;

    button.collapse-button {
        margin: 10px auto;
        font-size: x-large;
        background-color: color-mix(in srgb, darkslateblue 70%, black 30%);

        border-width: 6.75px;
        border-radius: 9px;
        border-color: darkslateblue;
        border-style: ridge;
    }

    div.collapsible-content {
        padding: 0 18px;
        max-height: 0px;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: color-mix(in srgb, gray 50%, transparent 50%);

        &.open {
            max-height: 6000px;
            border-color: black;
            border-radius: 25px;
            border-width: 5px;
            border-style: solid;
        }
    }
}

div.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 20px;

    div.gallery-image-container {
        align-self: center;
        padding: 10px;

        img.gallery-image {
            display: block;
            max-width: 75%;
            max-height: 50%;
            width: auto;
            height: auto;
            margin: auto;

            /*Frame style*/
            border-radius: 0px;
            border-width: 10px;
            border-color: darkslategrey;
            border-style: ridge;

            transition: scale 0.45s;

            &:hover {
                scale: 1.25;
            }
        }
    }
}

.poster-image {
    border-style: ridge;
    border-radius: 25px;
    border-width: 5px;
    border-color: whitesmoke;

    box-shadow: 10px 10px 10px black;
    filter: brightness(1);
    transition:
        scale 0.65s,
        filter 0.7s;
    position: relative;

    &:hover {
        cursor: pointer;
        scale: 1.1;
        filter: brightness(1.5);
    }

    max-width: 260px;
    max-height: auto;
}

.contacts-list {
    display: grid;
    padding: 30px;
    pad: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.contact-image {
    width: 50%;
    height: auto;
    opacity: 25%;

    &:hover {
        opacity: 100%;
    }
}