A New Kind of Science Gallery of Art

body {background:#f0f0f0;padding:0px;margin:0px;} #container div.card {display:inline-block; margin:9px; background:white; padding:15px; box-shadow: 0 0 4px 1px #dddddd; font-family:'Source Sans Pro'; width:375px;} #container div.card img {max-width:375px; width:100%;} #container {max-width:1700; margin:auto;} div.pagetitle { max-width: 1080px; margin: auto; padding: 60px 20px; } div.pagetitlemobile { margin: auto; display: none; max-width: 385px; padding: 25px 10px 45px 10px; } div.title { font-size: 14px; color: #3a3a3a; margin: 10px 0 2px 0; font-weight: 600; } div.artist { font-size: 14px; color: #777; margin: 0 0 2px 0; font-style: italic; } .grid {visibility:hidden;} #container a div.card:hover {box-shadow: 0px 0px 4px 1px #ff8100;} a div.card:hover div.title{color:#e03400;} div#outercontainer {max-width:1800px; margin:auto;padding-top:40px;} div#nav {background:#3b3b3b; text-align:center;} div#nav a {font-family:'Source Sans Pro'; text-transform:uppercase; font-size:12px; color:white; text-decoration:none; vertical-align:middle; display:inline-block; padding:15px; letter-spacing:.09em;} div#nav a:hover {color:#ea6100;} div#outercontainer {min-width:300px;max-width:1700px;margin:auto;padding-left:15px;} #container div.card .studentphoto img {width: 50px; height: 50px;} #container div.card .studentphoto {vertical-align: middle;} .studentgroup div {display: inline-block;} .studentgroup { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border-top: solid 1px #ccc; padding-top: 15px; margin-top: 15px; gap: 10px; } .nav ul.show { display: block; } div#relatedlinks { max-width: 80%; margin: auto; text-align: center; border-top: solid 1px #ccc; padding-top: 0.7rem; margin-top: 40px; } #relatedlinks a { color: #333; display: inline-block; border-radius: 5px; padding: 1px 10px; margin: 3px 2px; background: #ffd15b; text-decoration: none; } #relatedlinks a:hover { opacity: .7; } #all-encompassing header { width: inherit !important; } @media (max-width:1840px) { div#outercontainer {max-width:1275px;margin:auto;} } @media (max-width:1330px) { div#outercontainer {max-width:1020px;margin:auto;} #container div.card {width: 290px;} } @media (max-width:1040px) { div#outercontainer {max-width:900px;margin:auto;} #container div.card {width: 250px;} } @media (max-width:925px) { div#outercontainer {max-width:750px;margin:auto;} #container div.card {width: 195px;} div.pagetitle {display:none;} div.pagetitlemobile {display:block;} #relatedlinks {font-size: .9rem;} } @media (max-width:780px) { div#outercontainer {max-width:600px;margin:auto;} #container div.card {width: 150px;} } @media (max-width:635px) { div#outercontainer {max-width:515px;padding-left:7px;} #container div.card {width:140px;margin:4px;padding:7px;} div.title {font-size:13px;margin:8px 0 1px 0;} div artist {font-size:13px; margin:0 0 2px 0;} #container div.card {margin:4px;} #relatedlinks {font-size: .8rem;} } @media (max-width:515px) { #container div.card {margin:4px;padding:7px;width:146px;} div.title {font-size:12px;margin:7px 0 1px 0;} div.artist {font-size:12px;margin:0 0 4px 0;} div.card {margin:4px;} div#outercontainer {padding-left:5px;max-width:351px;} } @media (max-width:350px) { #container div.card {margin:4px;padding:7px;width:126px;} div#outercontainer {padding-left:5px;max-width:300px;} div#relatedlinks span {display: block;} }