.content_layer {

    padding: 17% 8%;

}

.content_layer {

    padding: 5%;

}

.start_btn{

    color: rgb(255, 255, 255);

    background-color: #5b328b;

    border-color: transparent;

}

.start_btn:hover{

    background-color: #7449a5;

}

.start_btn:focus{

    outline: none;

}

.greeting {

    font-size: 1.25rem;

    margin-bottom: 12%;

}

.greeting .student_name{

    font-weight: bold;

    color: #472172;

}



.test_name{

    color: rgb(0,0,0);

    margin-bottom: 4%;

    font-size: 1.15rem;

    font-weight: 500;

}

.course_name{

    margin-bottom: 4%;

    font-weight: 500;

}



.test_detail{

    font-size: 0.85rem;

}



.title_line{

    height: 2px;

    background-color: rgb(199, 199, 199);

    margin: 8.5% auto 2rem;

}



.score{

    color: #5b328b;

    font-size: 3rem;

    font-weight: bold;

}



@media (min-width: 576px) {

    .greeting {

        font-size: 1.85rem;

    }

    .test_name{

        font-size: 1.5rem;

    }

    .test_detail{

        font-size: 1rem;

    }

}



@media(min-width: 1200px) {

    #content_area {

        padding: 4% 35%;

    }

    .content_layer {

        padding: 8% 5%;

    }

    .greeting {

        margin-bottom: 8%;

    }

    .title_line{

        margin: 5.5% auto 1.5rem;

    }

}



@media(min-width: 1400px){

    .greeting {

        margin-bottom: 12%;

    }

    .title_line{

        margin: 8.5% auto 2rem;

    }

}