body {
    font-family: 'Montserrat', sans-serif !important;
}

.header-txt {
    font-size: 1.5rem !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #2991ff;
    font-weight: bolder;
}

.small-header-txt {
    font-size: 1rem;
}

/** Navigation Bar **/

#title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2991ff ;
    align-items: center;
    margin: auto;   
    margin-left: 1rem;
    font-family: 'Montserrat', sans-serif;
}

.nav-link:hover {
    border: 1px solid #2991ff; 
    border-radius: 5px;
    color: #f8f9fa;
    background-color: #2991ff;
}

/** Welcome Screen **/

.jumbotron {
    margin-bottom: 0 !important;
}

#downloadBgImg {
    background-image: url("img/computer-mobile.jpg");
    height: 30rem;
    width: 100%;
    /* Add the blur effect */
    filter: blur(4px);
    -webkit-filter: blur(4px);
}

#downloadTextBox { 
    color: white;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.6); /* Black w/opacity/see-through */
    border: 1px solid #f1f1f1;
    width: 85%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

#welcomeTxt {
    font-size: 2rem;
}

#name {
    color: #2991ff !important;
}

.dl-btn {
    margin-top: 1rem;
}

/** Tutorial Slides **/

.card-title {
    font-size: 1rem;
    font-weight: bold;
}

#backArrow, #forwardArrow {
    color: #2991ff;
    font-size: 2rem;
}

/** 20-20-20 Rule **/

#icareRuleSection {
    padding-top: 1rem;
    padding-bottom: .5rem;
}

#eyestrainRule {
    font-weight: bold;
    color: #2991ff;
}

.link-info {
    color: #2991ff;
}

.footer-copyright {
    font-size: .8rem;
    margin-top: 0;
}

/** Support Page **/

.support-section {
    border-bottom: 1px solid #2991ff;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.question {
    font-size: 1.1rem;
    font-weight: bold;
}


/** Super tiny screens **/
@media (max-width: 768px) {
    #downloadTextBox {
        width: 100% !important;
    }
}


/* Portrait Smartphones */
@media only screen
and (min-device-width: 480px) 
and (max-device-width: 1024px)
and (orientation: landscape) {
    #downloadTextBox {
        top:60%;
        width: 60% !important;
    }
}

/* Portrait Ipads */
@media only screen
and (orientation: portrait) 
and (min-device-width: 768px) 
and (max-device-width: 1024px) {
    #downloadTextBox {
        width: 60% !important;
        height: auto;
    }

    #downloadBgImg {
        height: 40rem !important;
    }
}


/* iPads (portrait) and higher width----------- */
@media (min-device-width : 768px) {
/* Styles */
    .nav-item {
        padding-right: 2rem;
    }
    
    #downloadBgImg {
        background-image: url("img/computer-987-h.jpg");
        width: 100%;
        height: 50rem;
    }

    #downloadTextBox {
        width: 33%;
    }

    .description-txt {
        font-size: 1.3rem !important;
    }
}



/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}