body {background-color: #eee}

#Master {width: 960px; margin-left:auto; margin-right:auto; background: rgb(255,255,255); padding-left: 5px; padding-right: 5px; border-left: 1px solid rgb(200,200,200); border-right: 1px solid rgb(200,200,200); margin-top: -10px; margin-bottom: -10px;}

#formhead{ margin-left: 250px; margin-top: 20px; float:left; text-decoration: none; font-family: sans-serif; font-size: 44px; color: yellow;}
#mail {margin-left: 250px; padding-left: 100px;}
header{background-color:rgb(0,81,124); width: 960px; height: 100px; background-image:url(images/blankheader-1.gif);}
    #Logo {background: rgb(255,255,255); width: 150px; height: 100px; float: left}
    #Art { margin-left: 150px; padding-left: 250px; margin-top: 20px;}
    #Title {padding-left: 160px; margin-top: -200px;}
    #TilteArt {margin-left: 200px; margin-top: -200px;}
#headone {padding-top: 15px;margin-bottom: 15px;}
#gentext { margin-left: 35px; margin-right: 35px; margin-top: 20px;}
#hometitle {text-align: center; font-size: 36px; margin-bottom: 25px;}
.dual {float: right;}
nav {background-color:rgb(0,0,0); width: 960px; height: 30px; margin-bottom: 10px; padding-top:18px; text-align:center;}
    nav ul {margin:0; padding:0;margin-left: 30px;}
    nav li {color: rgb(200,200,255); display:inline; font-weight: bold; font-size:20px; list-style-type:none; margin-right: 70px; }
    nav a:link {color: rgb(200,200,255); text-decoration:none;}
    nav a:visited {color: rgb(200,200,255);}
    nav a:hover {color: rgb(0,100,255); font-size:20px;}

navart { background-color: white; width: 960px; height: 10px; margin-bottom: 10px; text-align:right;}
navart li {color: black; display:inline; font-weight: bold; font-size:18px; list-style-type:none; margin-right: 40px; margin-left: 40px;}
    navart a:link {color: rgb(0,2,255); text-decoration:none;}
    navart a:visited {color: rgb(0,2,255);}
    navart a:hover {color: rgb(255,0,0); font-size:18px;}
#artul {text-align: left;}

p {padding-right: 10px;margin-right: 10px;}
navIndex {background-color:rgb(255,255,255); width: 960px; height: 30px; margin-bottom: 10px; padding-top:18px; text-align:right;}
    navIndex ul {margin:0; padding:0; }
    navIndex li {color: rgb(0,2,255); display:inline; font-weight: bold; font-size:20px; list-style-type:none; margin-right: 70px; }
    navIndex a:link {color: rgb(0,2,255); text-decoration:none;}
    navIndex a:visited {color: rgb(0,2,255);}
    navIndex a:hover {color: rgb(255,0,0); font-size:20px;}

navFoot { background-color: white; width: 960px; height: 10px; margin-bottom: 10px; text-align:center; margin-left: 100px;}
navFoot li {color: black; display:inline; font-weight: bold; font-size:18px; list-style-type:none; margin-right: 80px; margin-left: 40px;}
    navFoot a:link {color: rgb(0,2,255); text-decoration:none;}
    navFoot a:visited {color: rgb(0,2,255);}
    navFoot a:hover {color: rgb(255,0,0); font-size:18px;}

object:focus {
    outline: none;
}


span {margin-left: 20px;}
article {width: 960px; height: auto; overflow: scroll}
#home    { background-image: url(images/giraffeemed.gif); background-repeat: repeat-x;} 
    article img {float:right;}
 #indeximg {width: 90%; margin-left: 40px;margin-right: auto; margin-bottom: 10px; border: 5px solid rgb(0,81,124); box-shadow: 5px 5px 5px rgba(0,0,0,0.25);float: none;}
#astate {padding-left: 45px; display:inline-flex; display: -webkit-flex;}

#classimg { border: 5px solid rgb(0,81,124); box-shadow: 5px 5px 5px rgba(0,0,0,0.25); float: right; margin-right: 20px; margin-bottom: 15px; width: 400px; }

#exObj {margin-left: 50px;}

#eximg { box-shadow: 5px 5px 5px rgba(0,0,0,0.25); float: right; margin-right: 20px; margin-bottom: 15px; }
.wshop {padding-left: 20px; padding-right: 20px;} 
#haiku {margin-top: 45px; }
#form1 { margin-left: 200px; width:50%; margin-top: 50px;}

#Afb3 {margin-left: 150; margin-right 30px; height: 400px; width: 955px;}
.ArtImg { width: 70%; margin-left:100px;margin-right: auto; margin-bottom: 10px; margin-top: 10px; border: 5px solid rgb(0,81,124); box-shadow: 5px 5px 5px rgba(0,0,0,0.25);float: none;}

.tags { position: absolute; margin-top: -60px; margin-left: 20%; font-size: 32px; font-family: sans-serif}
.ArtImg2 {position: relative; width: 40%; margin-left:30%;margin-right: auto; margin-bottom: 10px; margin-top: 10px; border: 5px solid rgb(0,81,124); box-shadow: 5px 5px 5px rgba(0,0,0,0.25);float: none;}

.NewArt { width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 0px; border: 5px solid rgb(0,81,124); box-shadow: 5px 5px 5px rgba(0,0,0,0.25);float: none; background-color: rgb(255,255,255; }

    
.FeatureBox {background-color: rgb(0,81,124); width: 310px; height: 400px; float:left; margin-right: 10px; margin-bottom: 10px;}
#fb3 {margin-right:0px;}

navFoot { background-color: white; width: 960px; height: 10px; margin-bottom: 10px; text-align:right;}
navFoot li {color: black; display:inline; font-weight: bold; font-size:18px; list-style-type:none; margin-right: 80px; margin-left: 40px;}
    navFoot a:link {color: rgb(0,2,255); text-decoration:none;}
    navFoot a:visited {color: rgb(0,2,255);}
    navFoot a:hover {color: rgb(255,0,0); font-size:18px;}

footer {background: rgb(0,0,0); width: 960px; height: 20px; clear:both;}


#righty {border: 5px; background-color: aqua; color: blue;}
    footer a:link {color: rgb(0,2,255); text-decoration:none;}
    footer a:visited {color: rgb(0,2,255);}
    footer a:hover {color: rgb(255,0,0); font-size:20px;}

.image-grid {
    --gap: 16px;
    --num-cols: 4;
    --row-height: 300px;
    
    box-sizing: border-box;
    padding: var(--gap);
    
    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    gap: var(--gap);
}

.image-grid > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}