@font-face {
    font-family: 'newtype';
    src: url('../fonts/MyUnderwood-webfont.woff');
}

@font-face {
    font-family: "cascadia";
    src: url("../fonts/Cascadia.ttf");
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Verdana, sans-serif;
    /*
    background: linear-gradient(135deg, #422c16 21px, #896e52 22px, #896e52 24px, transparent 24px, transparent 67px, #896e52 67px, #896e52 69px, transparent 69px), linear-gradient(225deg, #422c16 21px, #896e52 22px, #896e52 24px, transparent 24px, transparent 67px, #896e52 67px, #896e52 69px, transparent 69px)0 64px;
    background-color: #422c16;
    background-size: 64px 128px;
    */
    background-color: #422c16;
    background-image: linear-gradient(90deg, rgba(137,110,82,.07) 50%, transparent 50%), linear-gradient(90deg, rgba(137,110,82,.13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(137,110,82,.17) 50%), linear-gradient(90deg, transparent 50%, rgba(137,110,82,.19) 50%);
    background-size: 13px, 29px, 37px, 53px;
    
}

header {
    height: 70px;
    width: 100%;
    background-color: #422c16;
    
    position: sticky;
    top: 0px;
    padding-bottom: 20px;
    text-align: right;
    z-index: 20;
}

h1 {
    font-family:newtype;
    font-size: 2em;
    padding-right:10px;
    color:#efd87e;
}

h2 {
    font-family: newtype;
    font-size: 1.5em;
    color:#ffffff;
    text-align:center;
}

h3 {
    font-family: newtype;
    font-size: 1.3em;
    color: #efd87e;
    text-align: center;
}

.coursecontain, .coursecontain2, .coursecontain3 {
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 5px;
    width: 60%;
    margin: auto;
    background-color: #422c16;
}

.coursecontain2 {
    
    grid-template-columns: 50% 50%;
    width: 60%;
    
}

    [class*="coursecontain"] > a {
        display: inline-block;
        height: 70px;
        background-size: cover;
        filter: sepia(100%);
        text-align: center;
        font-size: 1.3em;
        color: #422c16;
        /*-webkit-text-stroke: 1px #211a17;*/
        font-weight: bolder;
        font-family: cascadia;
        text-decoration: none;
        overflow: hidden;
    }

        [class*="coursecontain"] > a:hover {
            filter: sepia(0%);
            color: #422c16;
        }

        [class*="coursecontain"] > a > p {
            background-color: rgb(255 255 255 / 0.75);
        }


#current {
    /* background-size: 110px 110px;
    background-image: radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%), radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
    background-color: #C8D3A7;
    background-color: #52564d;
    background-position: 0 0, 55px 55px;
    */ 
    background-color: #523e30;
    background-image: radial-gradient(circle at 100% 150%, #523e30 24%, #634e3f 24%, #634e3f 28%, #523e30 28%, #523e30 36%, #634e3f 36%, #634e3f 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #523e30 24%, #634e3f 24%, #634e3f 28%, #523e30 28%, #523e30 36%, #634e3f 36%, #634e3f 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, #634e3f 10%, #523e30 10%, #523e30 23%, #634e3f 23%, #634e3f 30%, #523e30 30%, #523e30 43%, #634e3f 43%, #634e3f 50%, #523e30 50%, #523e30 63%, #634e3f 63%, #634e3f 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, #634e3f 5%, #523e30 5%, #523e30 15%, #634e3f 15%, #634e3f 20%, #523e30 20%, #523e30 29%, #634e3f 29%, #634e3f 34%, #523e30 34%, #523e30 44%, #634e3f 44%, #634e3f 49%, transparent 49%, transparent), radial-gradient(circle at 0 50%, #634e3f 5%, #523e30 5%, #523e30 15%, #634e3f 15%, #634e3f 20%, #523e30 20%, #523e30 29%, #634e3f 29%, #634e3f 34%, #523e30 34%, #523e30 44%, #634e3f 44%, #634e3f 49%, transparent 49%, transparent);
    background-size: 100px 50px;
    background-attachment: fixed;
}

.coursecontain3 a:nth-child(1) {
    background-image: url("../images/w23/backgroundsm.jpg");
    
}

.coursecontain3 a:nth-child(2) {
    background-image: url("../images/sp22/eng351tile.jpg");
}

.coursecontain3 a:nth-child(3) {
    background-image: url("../images/sp22/dms380tile.jpg");
}

.coursecontain3 a:nth-child(4) {
    background-image: url("../images/sp22/dms381tile2.jpg");
    background-position-y:bottom;
}

.coursecontain3 a:nth-child(6) {
    background-image: url("../images/sp22/dms383js_canvastile.jpg");
}

.contactcontain {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-gap: 10px;
    width: 70%;
    margin: auto;
    background-color: #422c16;
    padding-right:10px;
}

    .contactcontain > div {
        height: 32px;
        font-family: cascadia;
        font-size: 1.3em;
        font-weight: bolder;
        color: #ffffff;
        border-bottom: groove 2px #896e52;
        
    }

.contactcontain > div:nth-child(odd) {
    text-align:center;
    font-size:1.7em;
}

div a {
    color:#efd87e;
    
}

    div a:hover {
        text-decoration: none;
        color:#efc319;
        background-color: #896e52; 
    }