@font-face {
    font-family: Electrolize;
    src: url('../fonts/electrolize-v20-latin-regular.woff2') format('woff2');
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3 {
    font-family: Electrolize;
}

h1, h2 {
    margin: 15px 0;
    text-align: center;
}

p {
    margin: 15px;
}

a {
    text-decoration: none;
}

text-danger {
    color: darkred;
}

.text-success {
    color: darkcyan;
}

.main-text form {
    display: grid;
    min-width: 350px;
}

.main-text input {
    width: 100%;
    padding: 12px;
    margin: 5px 0;
    box-sizing: border-box;
}

.main-text textarea {
    width: 100%;
    height: 150px;
    padding: 12px;
    box-sizing: border-box;
}

.main-text label {
}

#nav-toggle,
.burger-menu {
    display: none;
}

.main-header {
    grid-area: header;
    padding: 0.5rem;
}

.main-content {
    grid-area: main;
    padding: 0.5rem;
}

    .main-content img {
        max-width: 100%;
    }

.main-nav {
    grid-area: nav;
}

    .main-nav li {
        padding: 5px;
        list-style: none;
    }

    .main-nav .nav-active {
        color: red;
    }

.main-side {
    grid-area: aside;
}

.main-iframe {
    margin: 15px;
}

    .main-iframe iframe {
        width: 100%;
    }

@media (max-width: 1200px) {
    .wrapper {
        display: grid;
        grid-template-areas:
            "nav"
            "header"
            "main";
    }

    .main-header {
        padding-top: 15px;
    }

    .main-nav {
        background-color: none;
        border-bottom: 1px solid #dcdcdc;
    }

    .hamburger {
        width: 25px;
        height: 3px;
        background-color: dodgerblue;
        margin: 4px 0;
    }

    .burger-menu {
        display: inline-block;
        margin-left: 5px;
    }

    .left-menu {
        display: none;
    }

    #nav-toggle:checked ~ .left-menu {
        display: grid;
    }

    .main-nav {
        margin-top: 5px;
        border-radius: 0px;
    }

    .gallery {
        display: grid;
        text-align: center;
    }

    .main-side figure {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}

@media (min-width: 1200px) {
    .wrapper {
        display: grid;
        grid-template-columns: 180px 3fr;
        grid-template-areas:
            "nav header"
            "nav main";
    }

    .main-text {
        display: grid;
        grid-template-columns: auto auto;
        gap: 15px;
    }

        .main-text img {
            float: left;
            margin: 15px;
            border: 1px solid red;
            max-width: 400px;
        }

        .main-text .col-wide {
            grid-column: 1 / span 2;
        }

        .main-text .main-form {
            margin: 15px 15px 0 0;
        }

    .main-header {
    width: 100%;
    background-image: url("images/backimage.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    }

    .main-nav {
        background-color: #fffff0;
        border-right: 1px solid #dcdcdc;
        border-bottom: 1px solid #dcdcdc;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
        gap: 5px;
        text-align: center;
    }
}