* {
    cursor: url("./assets/cursor-shut.png"), auto;
}

a, a * {
    cursor: url("./assets/cursor-open.png"), auto;
}

body {
    font-family: 'SimSun';
    font-size: 20px;
    font-weight: 500;
    background-color: black;
    background-image: url("./assets/bg.png");
    background-attachment: fixed;
    image-rendering: pixelated;
    background-size: 400px;
    color: white;
}

p {
    word-wrap: break-word;
    text-wrap: normal;
}

p a, ul a {
    color: #99f;
    text-decoration: underline;
    &:hover {
        color: rgb(221, 109, 255);
        text-decoration: none !important;
    }
}

li {
    padding: 0.35em;
    list-style: circle;
}

.screenshots {
    max-width: 700px;
    margin: 0 auto;
}

.screenshots img {
    border: 3px solid navy;
    image-rendering: auto;
}

@keyframes phonogramBouncing {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.1);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

.soundtrack {
    transform-origin: bottom;
    cursor: url("./assets/cursor-open.png"), auto;
}

.playing {
    animation: phonogramBouncing 1s ease-in-out infinite;
}

details {
    border: 1px solid #550055;
    padding: 10px;
    
    & summary {
        margin-bottom: 5px;
        color: #99f;
    }
    
}