* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    color: #ccc;
    line-height: 1.2em;
}

main {
    padding: 1em 0;
    margin: 0 auto;
    max-width: min(calc(1000px + 1em), calc(100% - 1em));
}

#modules {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

#modules .modulebox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 500px;
    max-width: 100%;
    padding: 0 1em;
    border: 1px solid #eee;
    border-radius: 4px;
}

#modules .modulebox .screenshot {
    width: 100%;
}

#modules .modulebox pre {
    max-width: 100%;
    overflow-x: scroll;
    color: black;
    background-color: #BBB;
    padding: 0.5em;
}

#modules .modulebox .buttons {
    display: flex;
    gap: 1em;
}

@media screen and (max-width: 1020px) {
    main {}

}