/* animations */
@keyframes contentFrame_zoom {
    0% { width: 500px; height: 500px; }
    50% { width: 150px; height: 150px; }
    75% { width: 400px; height: 400px; }
    100% { width: 200px; height: 100px; border-radius: 15px; }
}

/* styles */
body { background-color: #e0e0e0; user-select: none; }

#contentFrame {
    width: 500px; height: 500px; background-color: #fff;
    position: fixed; transform: translate(-50%, -50%);
    top: 50%; left: 50%; border-radius: 500px;
    padding: 15px; animation: contentFrame_zoom 1.2s forwards;
}

#timeLabel {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    position: fixed; transform: translate(-50%, -50%);
    top: 50%; left: 50%; text-align: center; width: fit-content;
    font-size: 18px; color: red;
}

.tipLabel {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    position: fixed; transform: translate(-50%, -50%); font-size: 10px;
    top: 65%; left: 50%; width: 100%; text-align: center;
}