/*
    xs widow and up
*/
@media (min-width: 1px) {
    html {
        color: black;
    }
    main {
        background: white;
        padding: 10px 0;
    }
    body {
        background: plum;
        font-family:'Courier New', Courier, monospace;
        font-size: 1em;
    }

    .h1 {
        color: white;
        text-shadow: 0 0 5px indigo;
    }
    .h2 {color: indigo;}
    .h3 {color: indigo;}
    .h4 {padding: 5px;}
    .h5 {color: black;}
    .row {margin: auto;}
    .content {padding: 5px;}

    .navbar {background: purple;}
    .navbar-brand {
        color: white;
        background: violet;
        padding: 0 3px;
        border-radius: 3px;
    }
    .navbar-toggler {
        background: none;
        color: white;
        border: 2px solid white;
    }
    .navbar-toggler:hover {
        background: white;
        color: purple;
    }
    .navbar-toggler:focus {
        background: none;
        color: white;
    }

    .nav-link {color: white;}
    .nav-link:hover {color: violet;}
    .nav-link:focus {color: violet;}

    .dropdown-menu {
        background: lavender;
        color: purple;
    }
    .dropdown-header {
        color: purple;
        font-weight: bold;
    }
    .dropdown-item {color: fuchsia;}
    .dropdown-item:hover {
        color: mediumpurple;
        background: none;
    }
    .dropdown-item:focus {color: fuchsia;}
    .dropdown-divider {background: indigo;}

    .jumbotron {
        background-image: url("../images/background1.jpg");
        border-radius: 0 0 .3em .3em;
    }

    .breadcrumb {background: rgba(255,255,255,0.8);}
    .breadcrumb li.active {color: black;}
    .breadcrumb li a {color: magenta;}
    .breadcrumb li a:hover {color: grey;}
    .breadcrumb li a:active {color: black;}

    .card {
        border-color: indigo;
        border-radius: 0;
    }
    .card-img-top {border-radius: 0;}
    .card-title {background: rgba(255,255,255,0.4);}
    .card-subtitle{background: rgba(255,255,255,0.4);}
    
    .carousel-caption {background: rgba(0,0,0,0.4);}

    .info {
        background: purple;
        color: white;
        text-decoration: none;
        font-weight: bold;
        padding: 0 7px;
    }
    .info:hover {
        background: magenta;
        text-decoration: none;
        color: white;
    }
    .info:active {
        background: purple;
        color: white;
        text-decoration: none;
    }
    
    .warning {
        background: white;
        color: purple;
        font-weight: bold;
        border: 1px solid purple;
        text-decoration: none;
        padding: 0 7px;
    }
    .warning:hover {
        background: magenta;
        text-decoration: none;
        color: white;
    }
    .warning:active {
        background: white;
        color: purple;
        text-decoration: none;
    }

    .page-link {
        border-color: indigo;
        color: indigo;
        background: white;
    }
    .page-link:hover {
        color: white;
        background: mediumpurple;
    }
    .page-link:active {
        color: white;
        background: mediumpurple;
    }
    .page-item.active .page-link {
        border-color: indigo;
        background: indigo;
    }
    .page-item.active .page-link:hover {
        border-color: indigo;
        background: indigo;
    }

    .footer {
        padding: 5px 0;
        background: purple;
        color: white;
    }

    button.card {
        padding: 0;
        background: white;
        white-space: wrap;
    }
    button.card .card-block {text-align: left;}
    
    form {
        text-align: left;
        margin-left: 20px;
        margin-right: 20px;
    }

    .btn-info-outline {
        color: dimgrey;
        border-color: dimgrey;
    }
    .btn-info-outline:hover {
        color: white;
        background: dimgrey;
        border-color: dimgrey;
    }
    .btn-info-outline:focus {
        color: white;
        background: dimgrey;
        border-color: dimgrey;
    }
    
    .btn-primary-outline {
        color: darkviolet;
        border-color: darkviolet;
    }
    .btn-primary-outline:hover {
        color: white;
        background: darkviolet;
        border-color: darkviolet;
    }
    .btn-primary-outline:focus {
        color: white;
        background: darkviolet;
        border-color: darkviolet;
    }
    
    .btn-secondary-outline {
        color: magenta;
        border-color: magenta;
    }
    .btn-secondary-outline:hover {
        color: white;
        background: magenta;
        border-color: magenta;
    }
    .btn-secondary-outline:focus {
        color: white;
        background: magenta;
        border-color: magenta;
    }

    thead {background: magenta;}
    th {color: white;}
    .table-striped {background: violet;}
    .vert {vertical-align: middle;}
}

/*
    sm window
*/
@media (min-width: 544px) {
    body {
        background: powderblue;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 1.1em;
    }
    .h1 {text-shadow: 0 0 5px midnightblue;}
    .h2 {color: midnightblue;}
    .h3 {color: midnightblue;}
    .content {padding: 5px 10px;}

    .navbar {background: blue;}
    .navbar-brand {
        background: none;
        padding: 0;
        border-radius: 0;
        font-style: italic;
    }
    .navbar-toggler:hover {color: blue;}

    .nav-link:hover {color: skyblue;}
    .nav-link:focus {color: skyblue;}

    .dropdown-menu {
        background: skyblue;
        color: blue;
    }
    .dropdown-header {
        color: blue;
        font-weight: 100;
        text-decoration: double;
    }
    .dropdown-item {color: mediumblue;}
    .dropdown-item:hover {color: dodgerblue;}
    .dropdown-item:focus {color: dodgerblue;}
    .dropdown-divider {background: midnightblue;}
    
    .jumbotron {background-image: url("../images/background2.jpg");}
    
    .breadcrumb li a {color: royalblue;}

    .card {border-color: midnightblue;}

    .info {
        background: blue;
        color: white;
        text-decoration: none;
        font-weight: bold;
        padding: 0 7px;
    }
    .info:hover {
        background: royalblue;
        text-decoration: none;
        color: white;
    }
    .info:active {
        background: blue;
        color: white;
        text-decoration: none;
    }
    
    .warning {
        background: white;
        color: blue;
        font-weight: bold;
        border: 1px solid blue;
        text-decoration: none;
        padding: 0 7px;
    }
    .warning:hover {
        background: royalblue;
        text-decoration: none;
        color: white;
    }
    .warning:active {
        background: white;
        color: blue;
        text-decoration: none;
    }

    .page-link {
        border-color: midnightblue;
        color: midnightblue;
    }
    .page-link:hover {
        background: mediumblue;
    }
    .page-link:active {
        background: mediumblue;
    }
    .page-item.active .page-link {
        border-color: midnightblue;
        background: midnightblue;
    }
    .page-item.active .page-link:hover {
        border-color: midnightblue;
        background: midnightblue;
    }

    .footer {background: blue;}

    .card-title {
        background: rgba(255,255,255,0.6);
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .card-subtitle{
        background: rgba(255,255,255,0.6);
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btn-primary-outline {
        color: darkblue;
        border-color: darkblue;
    }
    .btn-primary-outline:hover {
        background: darkblue;
        border-color: darkblue;
    }
    .btn-primary-outline:focus {
        background: darkblue;
        border-color: darkblue;
    }
    
    .btn-secondary-outline {
        color: mediumturquoise;
        border-color: mediumturquoise;
    }
    .btn-secondary-outline:hover {
        color: grey;
        background: mediumturquoise;
        border-color: mediumturquoise;
    }
    .btn-secondary-outline:focus {
        color: grey;
        background: mediumturquoise;
        border-color: mediumturquoise;
    }

    thead {background: steelblue;}
    .table-striped {background: mediumturquoise;}
}

/*
    md window
*/
@media (min-width: 768px) {
    body {
        background: palegreen;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .h1 {text-shadow: 0 0 5px darkgreen;}
    .h2 {color: darkgreen;}
    .h3 {color: darkgreen;}

    .navbar {background: green;}
    .navbar-brand {
        font-style: normal;
        font-weight: bold;
    }
    .navbar-toggler:hover {color: green;}

    .nav-link:hover {color: lime;}
    .nav-link:focus {color: springgreen;}

    .dropdown-menu {
        background: lightgreen;
        color: green;
    }
    .dropdown-header {
        color: green;
        font-style: italic;
        text-decoration: none;
    }
    .dropdown-item {color: mediumseagreen;}
    .dropdown-item:hover {color: lime;}
    .dropdown-item:focus {color: lime;}
    .dropdown-divider {background: darkgreen;}
    
    .jumbotron {background-image: url("../images/background3.jpg");}
    
    .breadcrumb {background: rgba(0,0,0,0.4);}
    .breadcrumb li.active {color: white;}
    .breadcrumb li a {color: springgreen;}
    .breadcrumb li a:hover {color: grey;}
    .breadcrumb li a:active {color: white;}

    .card {border-color: darkgreen;}

    .info {
        background: green;
        color: white;
        text-decoration: none;
        font-weight: bold;
        padding: 0 7px;
    }
    .info:hover {
        background: springgreen;
        text-decoration: none;
        color: white;
    }
    .info:active {
        background: green;
        color: white;
        text-decoration: none;
    }
    
    .warning {
        background: white;
        color: green;
        font-weight: bold;
        border: 1px solid green;
        text-decoration: none;
        padding: 0 7px;
    }
    .warning:hover {
        background: springgreen;
        text-decoration: none;
        color: white;
    }
    .warning:active {
        background: white;
        color: green;
        text-decoration: none;
    }

    .page-link {
        border-color: darkgreen;
        color: darkgreen;
    }
    .page-link:hover {
        background: mediumseagreen;
    }
    .page-link:active {
        background: mediumseagreen;
    }
    .page-item.active .page-link {
        border-color: darkgreen;
        background: darkgreen;
    }
    .page-item.active .page-link:hover {
        border-color: darkgreen;
        background: darkgreen;
    }

    .footer {
        padding: 10px 0;
        background: green;
    }
    
    .btn-primary-outline {
        color: forestgreen;
        border-color: forestgreen;
    }
    .btn-primary-outline:hover {
        background: forestgreen;
        border-color: forestgreen;
    }
    .btn-primary-outline:focus {
        background: forestgreen;
        border-color: forestgreen;
    }
    
    .btn-secondary-outline {
        color: limegreen;
        border-color: limegreen;
    }
    .btn-secondary-outline:hover {
        background: limegreen;
        border-color: limegreen;
    }
    .btn-secondary-outline:focus {
        background: limegreen;
        border-color: limegreen;
    }

    thead {background: forestgreen;}
    .table-striped {background: lightgreen;}
}

/*
    lg window
*/
@media (min-width: 992px) {
    body {
        background: lightyellow;
        font-family:Georgia, 'Times New Roman', Times, serif;
        font-size: 1.2em;
    }
    .h1 {text-shadow: 0 0 5px darkorange;}
    .h2 {color: darkorange;}
    .h3 {color: darkorange;}
    .content {padding: 5px 20px;}

    .navbar {
        background: gold;
        text-align: right;
    }
    .navbar-brand {
        color: grey;
        font-style: normal;
        font-weight: 100;
        text-decoration: underline;
    }
    .navbar-toggler:hover {color: gold;}

    .nav-link {color: grey;}
    .nav-link:hover {color: yellow;}
    .nav-link:focus {color: darkkhaki;}

    .dropdown-menu {
        background: lemonchiffon;
        color: gold;
    }
    .dropdown-header {
        color: goldenrod;
        font-style: normal;
        text-decoration: wavy;
    }
    .dropdown-item {color: darkorange;}
    .dropdown-item:hover {color: yellow;}
    .dropdown-item:focus {color: yellow;}
    .dropdown-divider {background: goldenrod;}
    
    .jumbotron {background-image: url("../images/background4.jpg");}
    
    .breadcrumb li a {color: yellow;}

    .card {
        border-color: darkorange;
        border-radius: 0.25rem;
    }
    .card-img-top {border-radius: 0.25rem 0.25rem 0 0;}
    .card-title {
        background: rgba(0,0,0,0.4);
        text-wrap: wrap;
        overflow: visible;
    }
    .card-subtitle {
        background: rgba(0,0,0,0.4);
        text-wrap: wrap;
        overflow: visible;
    }
    .card-subtitle.h5 {color: white;}

    .info {
        background: gold;
        color: grey;
        text-decoration: none;
        font-weight: bold;
        padding: 0 7px;
    }
    .info:hover {
        background: yellow;
        text-decoration: none;
        color: grey;
    }
    .info:active {
        background: gold;
        color: grey;
        text-decoration: none;
    }
    
    .warning {
        background: grey;
        color: gold;
        font-weight: bold;
        border: 1px solid gold;
        text-decoration: none;
        padding: 0 7px;
    }
    .warning:hover {
        background: yellow;
        text-decoration: none;
        color: grey;
    }
    .warning:active {
        background: grey;
        color: gold;
        text-decoration: none;
    }

    .page-link {
        border-color: darkorange;
        color: darkorange;
    }
    .page-link:hover {
        background: yellow;
        color: grey;
    }
    .page-link:active {
        background: yellow;
        color: grey;
    }
    .page-item.active .page-link {
        border-color: darkorange;
        background: darkorange;
    }
    .page-item.active .page-link:hover {
        border-color: darkorange;
        background: darkorange;
    }

    .footer {
        background: gold;
        color: grey;
    }

    .btn-primary-outline {
        color: orange;
        border-color: orange;
    }
    .btn-primary-outline:hover {
        color: grey;
        background: orange;
        border-color: orange;
    }
    .btn-primary-outline:focus {
        color: grey;
        background: orange;
        border-color: orange;
    }
    
    .btn-secondary-outline {
        color: goldenrod;
        border-color: goldenrod;
    }
    .btn-secondary-outline:hover {
        background: goldenrod;
        border-color: goldenrod;
    }
    .btn-secondary-outline:focus {
        background: goldenrod;
        border-color: goldenrod;
    }

    thead {background: orange;}
    .table-striped {background: peachpuff;}
}

/*
    xl window
*/
@media (min-width: 1200px) {
    body {
        background: tomato;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }    
    .h1 {text-shadow: 0 0 5px darkred;}
    .h2 {color: darkred;}
    .h3 {color: darkred;}

    .navbar {background: red;}
    .navbar-brand {
        color: crimson;
        font-style: italic;
        font-weight: bolder;
        text-decoration: none;
        padding: 0 5px;
        border-radius: 8px;
        background: white;
    }
    .navbar-toggler:hover {color: red;}

    .nav-link {color: white;}
    .nav-link:hover {color: hotpink;}
    .nav-link:focus {color: pink;}

    .dropdown-menu {
        background: pink;
        color: red;
    }
    .dropdown-header {
        color: red;
        font-style: italic;
        font-weight: 300;
        text-decoration: none;
    }
    .dropdown-item {color: crimson;}
    .dropdown-item:hover {color: deeppink;}
    .dropdown-item:focus {color: deeppink;}
    .dropdown-divider {background: darkred;}
    
    .jumbotron {background-image: url("../images/background5.jpg");}
    
    .breadcrumb {background: rgba(255,255,255,0.8);}
    .breadcrumb li.active {color: black;}
    .breadcrumb li a {color: red;}
    .breadcrumb li a:hover {color: grey;}
    .breadcrumb li a:active {color: black;}

    .card {border-color: firebrick;}
    .card-title {background: rgba(255,255,255,0.4);}
    .card-subtitle{background: rgba(255,255,255,0.4);}
    .card-subtitle.h5 {color: black;}

    .info {
        background: firebrick;
        color: white;
        text-decoration: none;
        font-weight: bold;
        padding: 0 7px;
    }
    .info:hover {
        background: red;
        text-decoration: none;
        color: white;
    }
    .info:active {
        background: firebrick;
        color: white;
        text-decoration: none;
    }
    
    .warning {
        background: white;
        color: firebrick;
        font-weight: bold;
        border: 1px solid firebrick;
        text-decoration: none;
        padding: 0 7px;
    }
    .warning:hover {
        background: red;
        text-decoration: none;
        color: white;
    }
    .warning:active {
        background: white;
        color: firebrick;
        text-decoration: none;
    }

    .page-link {
        border-color: firebrick;
        color: firebrick;
    }
    .page-link:hover {
        background: crimson;
        color: white;
    }
    .page-link:active {
        background: crimson;
        color: white;
    }
    .page-item.active .page-link {
        border-color: firebrick;
        background: firebrick;
    }
    .page-item.active .page-link:hover {
        border-color: firebrick;
        background: firebrick;
    }

    .footer {
        padding: 20px 0;
        background: firebrick;
        color: white;
    }

    .btn-primary-outline {
        color: red;
        border-color: red;
    }
    .btn-primary-outline:hover {
        color: white;
        background: red;
        border-color: red;
    }
    .btn-primary-outline:focus {
        color: white;
        background: red;
        border-color: red;
    }
    
    .btn-secondary-outline {
        color: orangered;
        border-color: orangered;
    }
    .btn-secondary-outline:hover {
        color: white;
        background: orangered;
        border-color: orangered;
    }
    .btn-secondary-outline:focus {
        color: white;
        background: orangered;
        border-color: orangered;
    }

    thead {background: crimson;}
    .table-striped {background: lightcoral;}
}