body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
}

h1, h2, h3, h4, h5, h6 {text-align: center;}

img {
    width: 100%;
    margin-bottom: 5px;
}

header {padding: 5px 20px;}

.nav-item, .nav-current {
    text-decoration: none;
    width: 100%;
    padding: 5px;
    margin: 0px;
    display: inline;
}

main {padding: 20px;}

.card-grid {display: grid;}

footer {
    text-align: center;
    padding: 5px 20px;
}

@media screen {
    body {
        background: #009888;
        color: black;
    }

    img {border: 2px solid #009888;}

    a {color: #2201A9;}
    a:hover {color: #A1E600;}
    a:active {color: black;}
    a:visited {color: #2201A9;}
    
    header, footer {
        background: #2201A9;
        color: white;
    }

    nav {background:#2201A9;}
    .nav-current {
        background: black;
        color: white;
    }
    .nav-current:hover {
        background: #A1E600;
        color:#2201A9;
    }
    .nav-current:active {
        background: black;
        color: white;
    }
    .nav-current:visited {
        background: black;
        color: white;
    }
    .nav-item {
        background: #2201A9;
        color: #A1E600;
    }
    .nav-item:hover {
        background: #A1E600;
        color:#009888;
    }
    .nav-item:active {
        background: black;
        color: white;
    }
    .nav-item:visited {
        background: #2201A9;
        color: #A1E600;
    }

    main {background: white;}

    .crumb {color:white;}
    .crumb:hover {color: #A1E600;}
    .crumb:active {color: black;}
    .crumb:visited {color:white;}
}

@media print {
    * {
        background: none;
        color: black;
    }

    nav, .breadcrumbs {display: none;}

    header {border-bottom: 2px solid black;}

    main {
        padding: 20px;
        gap: 20px;
        grid-template-columns: auto auto auto;
    }

    footer {border-top: 2px solid black;}
}