h2 {
    font-size: 50px;
}
h1 {
    font-size: 50px;
}
/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width:961px) and (max-width:1025px)  { 
    .content{
        min-height: auto;
    }
    .circle-1 {
        height: 500px;
        width: 500px;
        top: -77px;
        left: -89px;
    }
    .circle-2 {
        height: 250px;
        width: 250px;
        top: 144px;
        left: 250px;
    }
    .circle-3 {
        height: 600px;
        width: 600px;
        top: 268px;
        left: -92px;
    }
    .circle-4 {
        height: 35px;
        width: 35px;
        top: 100px;
        left: 387px;
    }
    .circle-5 {
        height: 50px;
        width: 50px;
        top: 600px;
        left: 300px;
    }
    .box-1 {
        left: 25px;
        top: 180px;
        height: 190px;
        width: 160px;
    }
    .box-1 span {
        font-size: 75px;
    }
    .box-2 {
        left: 220px;
        top: 210px;
        height: 130px;
        width: 110px;
    }
    .box-2 span {
        font-size: 35px;
    }
    .box-3 {
        left: 197px;
        top: 360px;
        height: 120px;
        width: 100px;
    }
    .box-3 span {
        font-size: 30px;
    }
    .right-container {
        margin-top: 50px;
    }
    h2 {
        font-size: 40px;
    }
    h1{
        font-size: 40px;
    }
    .input-username {
        width: 95%;
    }
    .input-password {
        width: 95%;
    }
    .input-button {
        width: 95%;
    }
    .input-forgot {
        width: 95%;
    }

}

@media (min-width:1025px) and (max-width: 1199.98px) {
    .content{
        min-height: auto;
    }
    .left-container{
        left: 70px;
    }
    .right-container{
        margin-right: 70px;
    }
    .circle-1 {
        height: 500px;
        width: 500px;
        top: -77px;
        left: -89px;
    }
    .circle-2 {
        height: 250px;
        width: 250px;
        top: 144px;
        left: 250px;
    }
    .circle-3 {
        height: 600px;
        width: 600px;
        top: 268px;
        left: -92px;
    }
    .circle-4 {
        height: 35px;
        width: 35px;
        top: 100px;
        left: 387px;
    }
    .circle-5 {
        height: 50px;
        width: 50px;
        top: 600px;
        left: 300px;
    }
    .box-1 {
        left: 25px;
        top: 180px;
        height: 190px;
        width: 160px;
    }
    .box-1 span {
        font-size: 75px;
    }
    .box-2 {
        left: 220px;
        top: 210px;
        height: 130px;
        width: 110px;
    }
    .box-2 span {
        font-size: 35px;
    }
    .box-3 {
        left: 197px;
        top: 360px;
        height: 120px;
        width: 100px;
    }
    .box-3 span {
        font-size: 30px;
    }
    .right-container {
        margin-top: 50px;
    }
    h2 {
        font-size: 40px;
    }
    h1{
        font-size: 40px;
    }
    .input-username {
        width: 95%;
    }
    .input-password {
        width: 95%;
    }
    .input-button {
        width: 95%;
    }
    .input-forgot {
        width: 95%;
    }
}

@media (min-width:1281px) and (max-width:1600px) { 
    .content{
        min-height: auto;
    }
    .left-container{
        left: 70px;
    }
    .right-container{
        margin-right: 70px;
    }
    .circle-1 {
        height: 500px;
        width: 500px;
        top: -77px;
        left: -89px;
    }
    .circle-2 {
        height: 250px;
        width: 250px;
        top: 144px;
        left: 250px;
    }
    .circle-3 {
        height: 550px;
        width: 550px;
        top: 268px;
        left: -50px;
    }
    .circle-4 {
        height: 35px;
        width: 35px;
        top: 100px;
        left: 387px;
    }
    .circle-5 {
        height: 50px;
        width: 50px;
        top: 500px;
        left: 200px;
    }
    .box-1 {
        left: 40px;
        top: 160px;
        height: 190px;
        width: 160px;
    }
    .box-1 span {
        font-size: 75px;
    }
    .box-2 {
        left: 240px;
        top: 195px;
        height: 130px;
        width: 110px;
    }
    .box-2 span {
        font-size: 35px;
    }
    .box-3 {
        left: 215px;
        top: 340px;
        height: 120px;
        width: 100px;
    }
    .box-3 span {
        font-size: 30px;
    }
    .right-container {
        margin-top: 50px;
    }
    h2 {
        font-size: 40px;
    }
    h1{
        font-size: 40px;
    }
    .input-username {
        width: 90%;
    }
    .input-password {
        width: 90%;
    }
    .input-button {
        width: 90%;
    }
    .input-forgot {
        width: 90%;
    }
 }