* {box-sizing: border-box;}
 body {width:100%; max-width:1000px; margin:auto; background-image:url(images/Background.jpg);}
 h1 {color:blue; font-family:Arial, sans-serif; text-align: center}
 blockquote {text-align:justify}
 blockquote:first-letter {font-size:1.8em; font-weight:bold}
 h2 {color:blue; font-family:Arial, sans-serif; text-align: center}
 p {font-weight:bold; font-size:0.75em}
 img {max-width:100%; height:auto; display: block;}
 header {padding-top:25%; background-image:url('images/header.png'); background-repeat:no-repeat; background-size:cover; background-position:center; position:relative}
 nav {text-align:center; padding:12px; background-color:#CCF;}
 nav a {display:block; color:blue; width:30%; text-decoration:none; transition: 0.3s ease-in-out;}
 nav a:hover {color:yellow}
 nav li {display:inline; list-style:none}
 @media only screen and (min-width:640px){nav a {display:inline}nav li {display:inline;}}
 @media only screen and (min-width:720px){nav a {display:inline}}
 @media only screen and (min-width:1000px){body {max-width:1000px}}
 @keyframes spin {from { transform: rotate(0deg); } to { transform: rotate(360deg); }}
 li {padding:0px 14px} 
 main {color:#009; background-color:#FFC; padding-top: 0px; padding-bottom: 0px; padding-right: 10px; padding-left: 10px} 
 footer {color:#FFF; background-color:#369; font-size:12px; height:30px; text-align:center;}
 footer a {transition: 0.3s ease-in-out;}
 footer a:hover {color:yellow}
 span {color: rgba(0,0,128,.75); font-size:16px}
 hr {width:60%; height:5px; background-color:#039}
 rect {fill:blue; stroke:black; stroke-width:3; opacity:0.5}
 aside {width:25%; float:left; text-align:right; padding:14px; box-sizing:border-box;}
 section {width:75%; padding:14px; box-sizing:border-box;}
 figure {width:320px; display:inline-block; margin:15px; text-align:center}
 figure img:active {animation: spin 0.5s linear;}
 abbr {font-size:14px}
 ul {list-style:square; padding-left: 40px;}
 ol {list-style-type: upper-roman}
 dl {padding-left: 40px}
 #images_with_links {background-color:rgba(0,255,0,.25);width:100%}
 #misc {background-color:rgba(0,255,0,.25);width:100%}
 #figureContainer {text-align:center}
 #specialheader {width:80%; font-size:2.75em}
 .border {border: 2px #000 solid}
 .urgent {color: rgba(255,0,0); font-size:18px}
 .noticeable {color: #FFC}
 .center {text-align: center}
 .fancy {font-family:Georgia}
 .selected {color:green}
 .selected:hover {transition: 0.3s ease-in-out; color:yellow}
 .character {color:purple; font-weight:bold; font-size:1.3em}
 .betterspaced2 {width:80%;}
 .infobar {color:white; background-color:blue}
 .lowheader {color: rgb(110,52,235); font-size:1.05em}
 .box {border:2px black solid}
 .infobox {color:white; background-color:blue; border:2px white solid}

 .portfolio-column {width:50%; float:left; text-align:center; padding:14px; box-sizing:border-box;}
/* Portfolio gallery */
.portfolio-gallery {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; width: 100%; padding: 15px; box-sizing: border-box;}

/* Portfolio figures only */
.portfolio-gallery figure {width: auto; min-width: 0; margin: 0; padding: 0; display: block; text-align: center;}

/* Portfolio images only */
.portfolio-gallery img {display: block; max-width: 100%; height: auto; margin: auto;}

/* Tablet */
@media only screen and (max-width: 900px) {.portfolio-gallery {grid-template-columns: repeat(2, minmax(0, 1fr));}}


/* Phone */
@media only screen and (max-width: 480px) {.portfolio-gallery {grid-template-columns: 1fr;}}