body {
    /* cursor: url("http://aspyn.gay/assets/normal.cur"), auto; */
    background-color: #ff77ff;
    min-height: 100vh;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
    margin: 0;
    color: black;
}

main, footer {
    margin:8px;
}

footer {
    text-align: center;
}

hr {
    border-color: #161616;
}

.badges a {
    text-decoration: none;
    display: inline-block;
}

.badges img {
    width: 88px;
    height: 31px;
}

#infoboxcontainer {
    display: flex;
    flex-wrap: wrap;
}

.infobox {
    border-style:double;
    border-color: purple;
    border-width: 5px;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 400px;
    min-width: 200px;
    margin-left: 1px;
    margin-right: 4px;
    margin-bottom: 4px;
}

nav {
    overflow: hidden;
    position: sticky;
    top: 0;
    background-color: #FF4CFF;
    padding:8px;
    line-height: 0;
    border-style: groove;
    border-color: purple;
    z-index: 999;
}

nav > .left {
    float: left;
}

nav > .right {
    float: right;
}

@media only screen and (max-width: 700px) {
    nav > .right {
        display:none;
    }
}

.mosaic{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 1rem;
}

.tile img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.15s ease-in-out;
    
    opacity: 0;
    transform: translateX(10%);
    animation: fadeIn 0.8s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tile img:hover{
    transform: scale(1.04) rotate(1deg) !important;
}

.tile:nth-child(1){
    grid-column: span 4;
    grid-row: span 2;
}

.tile:nth-child(2),
.tile:nth-child(3),
.tile:nth-child(4),
.tile:nth-child(8),
.tile:nth-child(5){
    grid-column: span 2;
}

.tile:nth-child(6),
.tile:nth-child(7){
    grid-column: span 3;
}

.tile:nth-child(9),
.tile:nth-child(10){
    grid-column: span 4;
}

@media screen and (max-width: 650px){
    .mosaic{
        display: block;
    }
    .tile{
        margin-bottom: 1rem;
    }
}

p > code {
    background-color: #FF4CFF;
}

pre {
    border-style:double;
    border-color: purple;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #161616;
    color:white;
    max-width: fit-content;
    overflow-x: auto;
}

a:hover {
    color:#ff00ff;
    transition: color 0.2s;
}

#fourohfour {
    text-align: center;
    font-size: 60px;
}