body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        font-family: sans-serif;
        color: #333;
        background:
                radial-gradient(circle at top left, #eee, transparent 80%),    
                linear-gradient(to bottom, dodgerblue 0%, transparent 70%),    
                linear-gradient(to top left, transparent, #e0e0e066 70%),
                #1e90ff;  
        animation: bg 30s infinite;
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        margin: 0;
}
.header {
        padding: 1em;
        background: white;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 4em;
        font-size: 1.5em;
        font-weight: 600;
        box-sizing: border-box;
}
.case {
        width: 560px;
        display: flex;
        flex-direction: column;
        margin-bottom: 4em;
        background: white;
        box-shadow: 1em 1em 2em #00000040;
        border-radius: 0.3em;
        padding: 0.5em;
}
.title {
        padding: 0.3em;
        width: 100%;
        font-size: 1.5em;
        box-sizing: border-box;
}
.description {
        padding: 0.3em;
        width: 100%;
        box-sizing: border-box;
        line-height: 1.5em;
        font-size: 1.2em;
}
.screenshot {
        overflow: hidden;
}
.screenshot img {
        width: 100%;
        cursor: pointer;
        transition: 0.3s ease-in-out all;
        transform: scale(0.95);
}
.screenshot img:hover {
        transform: scale(1);
}
@keyframes bg {
        0%, 100% { background-color: #1e90ff; }
        25% { background-color: #39d24a; }
        50% { background-color: #ffe244; }
        75% { background-color: #ff36a3; }
}