/* MAIN */

main {
    display: grid;
    margin-top: 56px;
    grid-template-columns: repeat(12, 1fr);
}

section {
    grid-column: 5 / 13;
    background-color: blue;
    padding: 32px;
    padding-top: 0px;
}

h1 {
    width: 100%;
    background-color: #74FB8A;
    margin-left: -32px;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-family: "Junicode";
    text-transform: uppercase;
    font-size: 24px;
}

p {
    font-family: "Uncut";
}

.paper {
    height: calc((100vh - 56px) / 2);
    color: #252525;
    text-decoration: none;
    line-height: 150%;
}

a:active {
    color: #252525;
    text-decoration: none;
}

.paper:hover {
    background-color: #252525;
    color: white;
}

.paper:hover p:nth-child(2) {
    text-decoration-line: underline;
}

.paper p:first-child {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 24px;
    font-family: "Junicode";
    text-transform: uppercase;
}

.paper p:nth-child(2) {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
}

.paper1 {
    grid-column: 1 / 5;
    background-color: #EF8354;
}

.paper2 {
    grid-column: 5 / 9;
    background-color: #FF85EB;
}

.paper3 {
    grid-column: 9 / 13;
    background-color: #E0E0E0;
}

.paper4 {
    grid-column: 1 / 4;
    background-color: #E0E0E0;
}

.paper5 {
    grid-column: 4 / 8;
    background-color: #CB5CFF;
}

.paper6 {
    grid-column: 8 / 13;
    background-color: #74FB8A;
}

.paper7 {
    grid-column: 1 / 5;
    background-color: #EF8354;
}

.paper8 {
    grid-column: 5 / 9;
    background-color:  #84DD63;
}

.paper9 {
    grid-column: 9 / 13;
    background-color: #CBFF4D;
}