@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

body {
    background-image: url("../misc images/the dancers are all gone.jpg");
    background-attachment: fixed; background-position: center top; background-size: cover; background-repeat: no-repeat;
    font-family: 'Lato', sans-serif;
}

main {
    margin: 4rem 18rem;
    justify-content: center;
    display: grid;
    grid-template-columns: 60% 10% 10% 20%;
    gap: 1rem;
}

img {
    display: block;
    max-width: 100%;
    margin: auto;
}



.bordered {
    padding: 1em;
    border: 2px dashed rgb(100, 100, 100);
    background: white;
}

.text-centered {
    text-align: center;
}

.no-padding {
    padding: 0;
}

.sep, .col-span-2 {
    grid-column: span 2;
}

.row-span-2 {
    grid-row: span 2;
}

.full-width {
    grid-column: span 4;
}

.flex {
    display: flex;
    justify-content: center; align-items: center;
}



#wiz {
    grid-column: 3 / 5;
    grid-row: 5;
    height: 10rem; width: 10rem;
    justify-self: left; align-self: start;
}

#wiz img {
    margin: auto;
    max-width: 100%;
    min-width: 30%;
}

#other-sites {
    grid-column: 3;
    grid-column-end: 5;
    grid-row: 4;
}

#blinkiez img, #dream-dust {
    width: 150px;
}



@media screen and (max-width: 1200px) {
    main {
        margin: 4rem 7rem;
    }
}

@media screen and (max-width: 992px) {
    main {
        margin: 4rem;
    }
    .sep {
        grid-column: unset; grid-row: unset;
    }
    #blinkiez {
        grid-column: 3 / 5;
    }
    #other-sites {
        grid-column: 3 / 5;
        grid-row: 4;
    }
    #wiz {
        grid-column: 3 / 5;
        grid-row: 5;
    }
}

@media screen and (max-width: 600px) {
    main {
        display: unset;
        margin: 0;
    }
    section, nav {
        margin: 1rem auto 2rem;
    }
    section:last-child {
        margin-bottom: 1rem;
    }
    .row-span-2, .col-span-2, #wiz, #other-sites {
        grid-column: unset; grid-row: unset;
    }
    #blinkiez {
        display: flex;
        flex-flow: row wrap;
    }
}