*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background-image: url("made-it.svg"); 
    background-repeat: repeat; 
    background-size: 20%;
    background-position: top center;
} 

body {
    padding: 1rem 0.5rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto; 
    font-family: monospace;
} 

main {
    border: 2px solid dimgray;
    padding: 1rem;
    background: white;
    max-width: max(420px, 60ch);
}


#welcome-img {
    width: 100%; 
    margin: 0 auto;
    display: block;
    image-rendering: pixelated;
} 


the-web {
    display: block;
    border: 1px solid black;
    width: 100%;
    padding: 1rem;
    margin: 1rem 0;
}

the-web blockquote {
    background: pink;
    padding: 0.5em 1em; 
    margin: 0;
}


music-box {
    display: block; 
    border: 1px solid black;
    width: 100%;
    padding: 1rem;
    margin: 1rem 0;
 }

music-box audio {
    width: 100%; 
    margin: 0.5rem 0;
    border-radius: 0;
}


figure {
    display: block;
    max-width: 100%;
    margin: 1rem 0; 
}

figure img {
    width: 100%;
    image-rendering: pixelated; 
    border: 1px solid black;
}


spin-box {
    display: flex;
    max-width: 100%; 
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
    flex-direction: column;
}

#spin {
    max-width: 80%;
    margin: 0 auto; 
    padding: 0
    border: 0;
    animation: spin 1.5s linear infinite;
}

#spin img {
    max-width: 100%;
    margin: 0 auto; 
}

@keyframes spin {
    100% { transform: rotate(-360deg); } 
}


#be-gay {
    transition: 0.5s filter;
}

#be-gay:hover {
    filter: hue-rotate(-64deg) contrast(128%);
}


footer {
    width: 356px;
    margin: 0 auto;
    margin-top: 1rem;;
    display: block;
    font-size: 0; 
}

footer .badge {
    margin: 0 0.5px;
    padding: 0;
    border: 0;
}

footer > a.badge > img {
    image-rendering: pixelated;
    padding: 0; 
    margin: 0.5px 0; 
    border: 0;
    width: 88px; 
    height: 31px;
    display: inline-block;
    vertical-align: middle;
    background: pink;
    transition: filter 0.2s, box-shadow 0.2s;  
} 

footer > a.badge > img:hover {
    box-shadow: 1px 1px 2px black;
    filter: hue-rotate(90deg);
}

footer > still-alive {
    display: block;
    text-align: center; 
    font-size: 0.8rem; 
    margin-top: 0.5rem;
}

.footer-text { 
    display: block!important;
    text-align: center;
    font-size: 0.8rem;
    margin: 0.5rem 0;
}


god-list {
    display: block; 
}

god {
    display: block;
    max-width: 100%;
    margin: 0.25rem 0;
    padding-top: 0.5rem;
    transition: border 1s;
    border: 1px solid white;
}

god a {
    display: block;
    width: max(240px, 50%);
    margin: 0 auto;
    text-align: center;
}

god img {
    width: max(240px, 50%);
    margin: 0 auto;
    display: block;
    border: 1px solid black;
    image-rendering: pixelated;
    transition: 0.4s filter;
}

god img:hover {
    filter: sepia(40%) hue-rotate(-60deg);
}

god p {
    text-align: center;
} 

god:target { 
    border: 1px solid black;
 }


.medusa {
    width: max(200px, 20%);    
    display: block; 
    margin: 1rem auto;
    image-rendering: pixelated;
    transition: 0.4s filter;
}

.medusa:hover {
    filter: sepia(30%) hue-rotate(-60deg);
}

contact-box {
    display: block;
    background: paleturquoise;
    border: 1px solid black; 
    padding: 0.5rem 1rem;  
    margin: 0 auto; 
    text-align: center;
    image-rendering: pixelated;
}

contact-box img {
    vertical-align: middle;
}


.secret {
    /*
    opacity: 0.16;
    transition: 4s opacity;
    */
}

.secret:hover {
    /*opacity: 1;*/
}


#statuscafe {
    padding: 1rem;
    background-color: papayawhip;
    border: 1px solid black;
    min-height: 32ch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
}

#statuscafe-body {
    background: paleturquoise; 
    margin: 1em 0; 
    padding: 0.5em 1em;
    border: 1px solid midnightblue;
    
}

#status-cafe-badge img {
    display: block;
    background: pink;
    image-rendering: pixelated;
}

#status-cafe-badge {
    align-self: center;
    text-align: center;
}

#statuscafe-username {
    margin-top: 1em;
}

#statuscafe-content {
    margin: 1em 1em;
}

#statuscafe-content a {
    text-overflow: clip;
    overflow-wrap: anywhere;
}

#statuscafe-title {
    align-self: center;
}