@import 'theme';
@import 'states';

html,
body {
    height: 100%;
}

body {
    color: $text;
    margin: 0;
    font-family: Verdana, sans-serif;
}

.nolist {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
        display: inline-block;
    }
}

.heading {
    color: $primary;
    padding: 0;
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
}

.icon.icon-href {
    fill: $shadow;

    :hover {
        fill: $primary;
    }
}

.scenes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
    grid-gap: 1rem;
}

@media(max-width: $breakpoint) {
    .scenes {
        grid-template-columns: repeat(auto-fit, minmax(22.5rem, 1fr));
    }
}