body {
    background-image: url("../images/index_background.jpg");
    background-size: cover;
    background-attachment: fixed;
    
    margin: 0;
    padding: 0;
}

.main_Header {
    width: 100%;
    text-align: center;
    font-family: 'ZCOOL QingKe HuangYou', cursive;
    color: SlateBlue;
}

.bats-title {
    width: 90%;
    margin: 2.5% 5% 0 5%;
    font-family: 'Nova Flat', cursive;
    color: SpringGreen;
}

.bats-p1 {
    width: 90%;
    margin: 0 5% 0 5%;
    font-family: 'Open Sans Condensed', sans-serif;
    color: Yellow;
}

.bats-link {
    width: 90%;
    margin: 0.5% 5% 2.5% 5%;
    font-family: 'Felipa', cursive;
    text-align: center;
    text-decoration: none; 
    color: Chartreuse;
}

@media screen and (min-width: 1280px) {
    .main_Header {
        margin: 1.5% 0 1.5% 0;
        font-size: 3em;
    }
    
    .bats-screenshot {
        width: 60%;
        margin: 0 20% 0 20%;
    }
    
    .bats-title {
        font-size: 1.5em;
    }
    
    .bats-p1 {
        font-size: 1.2em;
    }

    .bats-link {
        font-size: 1.25em;
    }
}

@media screen and (min-width: 600px) and (max-width: 1279px) {
    .main_Header {
        margin: 1.5% 0 1.5% 0;
        font-size: 2em;
    }
    
    .bats-screenshot {
        width: 80%;
        margin: 0 10% 0 10%;
    }
    
    .bats-title {
        font-size: 1.25em;
    }
    
    .bats-p1 {
        font-size: 0.8em;
    }

    .bats-link {
        font-size: 0.9em;
    }
}

@media screen and (max-width: 599px) {   
    .main_Header {
        margin: 1.5% 0 1.5% 0;
        font-size: 1.5em;
    }
    
    .bats-screenshot {
        width: 80%;
        margin: 0 10% 0 10%;
    }
    
    .bats-title {
        font-size: 1em;
    }
    
    .bats-p1 {
        font-size: 0.65em;
    }

    .bats-link {
        font-size: 0.9em;
    }
}