/*BECAUSE THESE PAGES ARE SEPARATED INTO 3 PARTITIONS, I'D RECOMMEND YOU USE MULTIPLES OF 1*/
@keyframes fadein {
    from {
        opacity: 0;
        top: 10px;
    }
    to {
        opacity: 100;
        top: 0;
    }
}
* {
    font-family: "Courier New", Courier, monospace;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    margin: 0 0 0 30px;
}
body {
    background-size: cover;
}
img {
    float: left;
    padding-right: 10px;
    width: 200px;
    height: 200px;
}
a {
    display: block;
    border: solid 1px;
    border-radius: 5px;
    padding: 5px;
    margin: 10px;
}
.container {
    grid-template-columns: repeat(3, 1fr);
    height: fit-content;
    width: 90%;
    margin: auto;
    padding: 5px;
    display: grid;
    gap: 10px;
}
.segment {
    position: relative;
    border: solid 1px;
    border-radius: 5px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
    word-break: break-word;
    padding: 5px;
    max-height: 35vh;
    overflow-x: hidden;
    animation-name: fadein;
    animation-duration: 1s;
}
.slowfade{
    animation-duration: 2s;
}
.double {
    grid-row: span 2;
    max-height: 70vh;
}
.triple {
    grid-row: span 3;
    max-height: 105vh;
}
.wide {
    grid-column: span 2;
}
.ultrawide{
    grid-column: span 3;
}
.denseflow {
    grid-auto-flow: dense;
}

@media (max-width: 600px) {
    .segment {
        grid-column: span 3;
        height: fit-content;
    }
    .wide {
        grid-column: span 3;
    }
    .double {
        grid-column: span 3;
    }
    img {
        width: 49%;
        height: unset;
    }
}