:root { --body-bg:#351C75; --nav-button-bg:#00CC00; --content-bg:#F751D5; --accent-dark-one:#FFFF00; --accent-dark-two:; --accent-light-one:#FF9900; --accent-light-two:#FFFF00; } html, body { margin:5px; font-family:Mabook; src: url("/.ttf") format("truetype"); font-size:20px; } strong { color:var(--accent-dark-one); } em { color:var(--accent-dark-two); } u { color:var(--accent-dark-one); } a { color:var(--accent-dark-two); font-weight:bold; } .nav li { background-color:var(--nav-button-bg); margin-bottom:2px; text-align:center; display:block; padding:20px; } .nav li a { font-weight:bold; text-decoration:none; color:white; } .nav { padding-left:0; margin:0; margin-top:5px; list-style-type:none; margin-bottom:10px; } nav.ul { padding:none; margin:none; padding-bottom:10px; } body { background-color:var(--body-bg); } .container { max-width:1000px; } .alignment { display:flex; justify-content:center; } .content-wrapper { max-width:2000px; margin-left:20px; margin-right:20px; } .content { background-color:var(--content-bg); border:0px solid white; border-top:none; border-bottom:none; box-shadow: -0.5em 0 .5em black; display:flex; flex-wrap:wrap; margin-top:-5px; max-width:100%; div { } .footer { width:100%; text-align:center; z-index:99; position:center; bottom:-150px; left:0; color:var(--accent-dark-one); } .left-content { max-width:350px; margin-right:10px; } .padding p { padding-left:20px; } .right-content { width:200px; flex:2; } .header { margin: auto; max-width:813px;div border-start-start-radius: 5rem; border-start-end-radius: 2rem; border-end-end-radius: 4rem; border-end-start-radius: 3rem;} .footer-img { max-width:700px; border-start-start-radius: 5rem; border-start-end-radius: 2rem; border-end-end-radius: 4rem; border-end-start-radius: 3rem;} } .footer-img img { max-width:100%; border-start-start-radius: 5rem; border-start-end-radius: 2rem; border-end-end-radius: 4rem; border-end-start-radius: 3rem; } .header img { max-width:100%; border-start-start-radius: 5rem; border-start-end-radius: 2rem; border-end-end-radius: 4rem; border-end-start-radius: 3rem; padding-bottom: 19px; } div { margin:20; padding:20; } h1 { background-color:var(--accent-light-one); color:white; } h2 { background-color:var(--accent-light-one); color:white; } h1, h2 { padding:12px; border-start-start-radius: 4rem; border-start-end-radius: 3rem; border-end-end-radius: 4rem; border-end-start-radius: 3rem; } h1, h2, h3, h4 { font-size:20px; margin-top:20px; margin-bottom:20px; } h3 { background-color:var(--accent-light-one); color:white; padding:12px; border-start-start-radius: 4rem; border-start-end-radius: 3rem; border-end-end-radius: 4rem; border-end-start-radius: 3rem; } h4 { border-bottom:3px solid var(--nav-button-bg); } .subtitle { font-weight:bold; color:var(--accent-dark-one); font-size:20px; border-bottom:10px dotted var(--nav-button-bg); } @media only screen and (max-width: 719px) { .content { box-shadow: -0.2em 0 .3em black; border-left:2px solid white; border-right:2px solid white; flex-direction:column; flex-wrap:wrap; } .content-wrapper { max-width:100%; margin-left: 7.85%; margin-right: 6%; } .right-content { display:block; width:100%; order:1; } .left-content { order:1; display:block; width:100%; margin-right:0; } .footer { bottom:-350px; padding-bottom:50px; } } .removeThis { background-color:yellow; } .gallery img { width:250px; /* this sets the width for every image */ height:200px; border-start-start-radius: 5rem; border-start-end-radius: 2rem; border-end-end-radius: 4rem; border-end-start-radius: 3rem; object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */ } /* this is the div which CROPS every image */ .gallery > div { { width:200px; /* this should match the image height */ height:150px; /* this should match the image width */ margin-right:10px; /* this controls the gaps between the images */ margin-bottom:10px; /* this controls the gaps between the images */ div { } /* this resizes the image on hover. note that objects in 'portrait' */ .gallery img:hover { transform:scale(2.5); /* this scales up the image when you hover over it */ object-fit:contain; } .borderDiv { div { border-start-start-radius: 5rem; border-start-end-radius: 2rem; border-end-end-radius: 4rem; border-end-start-radius: 3rem; }