* {
    box-sizing: border-box;
}

/*Font*/
@font-face {
    font-family: 'Diatype Semi Mono';
    src: url(styles/font/ABCDiatypeSemi-Mono-Regular.otf);
}

body {
    font-family: 'Diatype Semi Mono', monospace;
    font-size: 1rem;
    line-height: 1.25;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: blue;
}

.a1:hover::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vh;
    height: 60vh;
    background-size: cover;
    background-position: center;
    z-index: -1;
    animation: nothingos1Animation 1500ms infinite;
    animation-timing-function: step-end;
}

.a2:hover::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vh;
    height: 60vh;
    background-size: cover;
    background-position: center;
    z-index: -1;
    animation: cameraAnimation 1500ms infinite;
    animation-timing-function: step-end;
}

.a3:hover::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vh;
    height: 60vh;
    background-size: cover;
    background-position: center;
    z-index: -1;
    animation: ear1Animation 1500ms infinite;
    animation-timing-function: step-end;
}

.a4:hover::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vh;
    height: 60vh;
    background-image: url("styles/image/hands_time.webp");
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.a5:hover::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vh;
    height: 60vh;
    background-image: url("styles/image/cmf_watchface.webp");
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.a6:hover::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vh;
    height: 60vh;
    background-image: url("styles/image/oppo_watchface.webp");
    background-size: cover;
    background-position: center;
    z-index: -1;
}


.a7:hover::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vh;
    height: 60vh;
    background-image: url("styles/image/amie.webp");
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.a8:hover::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vh;
    height: 60vh;
    background-size: cover;
    background-position: center;
    z-index: -1;
    animation: nothingos25Animation 1500ms infinite;
    animation-timing-function: step-end;
}

.a9:hover::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vh;
    height: 60vh;
    background-size: cover;
    background-position: center;
    z-index: -1;
    animation: nothingos3Animation 1500ms infinite;
    animation-timing-function: step-end;
}

.a10:hover::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vh;
    height: 60vh;
    background-image: url("styles/image/essential_space.webp");
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/*Layout*/
.container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.column {
    width: 100%;
    margin-left: 1rem;
    margin-right: 1rem;
}

.item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 1rem;
}

.left {
    width: 50%;
    margin-right: 1rem; 
}

.right {
    flex: 1;
    text-align: left;
}

/* Divider */
.divider {
    height: 0.5px;
    background-color: rgba(128, 128, 128, 0.25);
    margin: 1rem 0;
}

.line {
    width: 100%;
}

.headline {
    width: 100%;
    padding-bottom: 0.5rem;
}

/*Animation*/

/* a1 */
@keyframes nothingos1Animation {
    0%, 100% {
        background-image: url("styles/image/nothing_os_1.0_1.webp");
    }

    50% {
        background-image: url("styles/image/nothing_os_1.0_2.webp");
    }
}

/* a2 */
@keyframes cameraAnimation {
    0%, 100% {
        background-image: url("styles/image/nothing_os_camera_1.webp");
    }

    33.33% {
        background-image: url("styles/image/nothing_os_camera_2.webp");
    }

    66.66% {
        background-image: url("styles/image/nothing_os_camera_3.webp");
    }
}

/* a3 */
@keyframes ear1Animation {
    0%, 100% {
        background-image: url("styles/image/ear_\(1\)_app_1.webp");
    }

    33.33% {
        background-image: url("styles/image/ear_\(1\)_app_2.webp");
    }

    66.66% {
        background-image: url("styles/image/ear_\(1\)_app_3.webp");
    }
}

/* a8 */
@keyframes nothingos25Animation {
    0%, 100% {
        background-image: url("styles/image/nothing_os_2.5_1.webp");
    }

    50% {
        background-image: url("styles/image/nothing_os_2.5_2.webp");
    }
}

/* a9 */
@keyframes nothingos3Animation {
    0%, 100% {
        background-image: url("styles/image/nothing_os_3.0_1.webp");
    }

    33.33% {
        background-image: url("styles/image/nothing_os_3.0_2.webp");
    }

    66.66% {
        background-image: url("styles/image/nothing_os_3.0_3.webp");
    }
}

/*Blinking Time*/
@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

.blink {
    animation: blink 2000ms infinite;
}