@import "./_stu-body";
@import "./_stu-form";

.box {
    width: 100%;
    position: relative;
    font-family: 'Source Han Sans';
    background: none;

    .body {
        width: 100%;
        height: calc(100vh - 100px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .icon {
            --w: 240px;
            width: var(--w);
            height: var(--w);
            position: relative;
            margin-bottom: 50px;
            background: url('/Content/Image/ExerciseV2/timer_1.png') no-repeat 100%/100%;

            &:after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: var(--w);
                height: var(--w);
                background: url('/Content/Image/ExerciseV2/timer_2.png') no-repeat 100%/100%;
                animation: spin 4s linear infinite;
            }

            .ico {
                position: absolute;
                width: 90px;
                height: 90px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .name {
            font-weight: 500;
            font-size: 40px;
            display: flex;
            color: #094B88;
            letter-spacing: 5px;
            padding-left: 5px;
            margin-bottom: 20px;
        }

        .group {
            width: 150px;
            padding: 8px;
            text-align: center;
            font-size: 18px;
            color: #fff;
            background: #094B88;
            letter-spacing: 2px;
            opacity: 0.6;
            border-radius: 40px;
        }
    }

    &.public {
        .title {
            letter-spacing: 5px;
            padding-left: 5px;
        }

        .body {
            .icon {
                --w: 180px;

                .ico {
                    width: 120px;
                    height: 120px;
                }
            }

            .name {
                font-size: 40px;
                letter-spacing: 10px;
                padding-left: 10px;
            }
        }
    }
}

@media(min-width:1200px) {
    .box.public .body .icon {
        --w: 300px;
    }

    .box.public .body .name {
        font-size: 90px;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}