@media only screen and (max-width: 780px) {
    header#index h1 {
        font-size: 40px !important;
    }
    header#index h1 #logo-design-1::first-letter, header#index h1 #logo-design-2::first-letter {
        font-size: 60px !important;
    }
}
@media only screen and (max-width: 550px) {
    header#index h1 {
        font-size: 30px !important;
    }
    header#index h1 #logo-design-1::first-letter, header#index h1 #logo-design-2::first-letter {
        font-size: 40px !important;
    }
}
@media only screen and (max-width: 380px) {
    header#index h1 {
        font-size: 20px !important;
    }
    header#index h1 #logo-design-1::first-letter, header#index h1 #logo-design-2::first-letter {
        font-size: 30px !important;
    }
}

@media only screen and (max-width: 700px) {
    .task-question {
        font-size: 22px !important;
    }
}

@media only screen and (max-width: 500px) {
    .task-bar {
        width: 100% !important;
        height: 100% !important;
    }
}

@media only screen and (max-width: 440px) {
    #logo {
        display: none;
    }
    h1 {
        margin: 0 !important;
    }
}

@media only screen and (max-width: 400px) {
    .task-bar {
        padding: 5px !important;
    }
}

@media only screen and (max-width: 370px) {
    .task-question-icon {
        width: 60px !important;
    }
    .task-question-heading {
        margin-left: 10px !important;
        font-size: 24px !important;
    }
}

@media only screen and (max-width: 300px) {
    h1 {
        font-size: 27px;
    }
}