/*I want to give a big massive thank you to Mr. Miles for teaching me this stuff, 
he is a great web fundamentals teacher. Trying to make this site look nice and be
responsive was really fun to do to pass the time. It basically took me only two bells,
I could've done it in one but I wanted to make the images float nicely*/

h1,h2,.foot {text-align:center}
h1 {margin:10px 0 5px} h2 {margin-top:0}
body {background-color:silver;font-family: "Verdana", sans-serif;line-height:1.33;
padding:0;margin:0}
li {margin-bottom:0.66em}

.head {width:100%;height:calc(5vw + 100px);background: blue url(../photos/middle.jpg);background-position: 50% 27.5%;background-size:cover}/*putting position and size in the background: confuses the browser a lot*/
h1 img:first-child {margin-right:5px} h1 img:last-child {margin-left:5px}
h1 a {text-decoration:none;color:inherit}

.body p {tab-size:4} /*tab:	*/
/*maybe windows just doesn't like this? idk*/
.body {background-color:white;border:2px solid #777;border-radius:0 0 10px 10px;
width:calc(100% - 44px);max-width:906px;
padding:20px;margin:-2px auto 0;
position:relative}
.foot {font-size:0.8em}
.container {width:100%}
.container img {max-width:300px;height:auto;border-radius:7.5px 7.5px 0 0;}
.container > img, .container .fig {
float:right;margin-left:10px;margin-right:5vw;margin-top:30px;
position:relative;z-index:5} /*pos rel is the only way to make the z index work*/
.fig {background-color:#ddd;border:2px solid gray;border-radius:10px;max-width:325px;}
figure{margin:0;text-align:center} figcaption{padding:5px}

.navi,.links {background-color:#777;width:calc(100% - 20px);max-width:1360px;padding:10px;margin:auto;}
.navi{padding-bottom:0;color:#eee}
.links {display:flex;flex-wrap:wrap;justify-content:center;row-gap:10px;position:sticky}
/*pos sticky doesn't work idk y*/

.links a {text-decoration:none;color:#eee;padding:5px;max-height:calc(1em + 10px);
background-color:#505050;border:2px solid silver;border-radius:10px}
.links a:hover {background-color:#3a3a3a}
.links a:active {background-color:silver}

.arrow {display:flex;align-items:center}
.arrow div:first-child {width:40px;height:10px;background-color:silver}
.arrow div:last-child {height:0;width:0;border-bottom:20px solid transparent;border-top:20px solid transparent;border-left:20px solid silver}

@media only screen and (max-width:1170px) {
.links {justify-content:flex-start}
}
@media only screen and (max-width: 550px) {
.container img, .container .fig {float:none;display:block;margin:10px auto;}
}
@media only screen and (max-width: 540px) {
h1 {font-size:calc(6.5vw - 4px)}
}