html { font-size: 19px; } body { background: #e0589c; background: radial-gradient(circle, rgba(224, 88, 156, 1) 0%, rgba(179, 255, 208, 1) 100%); font-family: Arial, sans-serif; font-size: 25px; margin: 0; padding: 0; } header, nav, section, footer { width: 90%; max-width: 1000px; margin: 10px auto; background: #F0D8E6; box-sizing: border-box; } header { border: 8px hotpink inset; background: #F0D8E6; padding: 10px; text-align: center; } header img { width:35%; height:35%; } .sitemap { border: 1px solid hotpink; overflow: scroll; max-height: 55%; } .sillyheader { margin-left: auto; } nav { padding: 0.5rem; background: #F0D8E6; border: 8px hotpink inset; text-align: center; } .main { display: flex; gap: 10px; justify-content: center; align-items: flex-start; flex-wrap: wrap; width: 90%; max-width: 1500px; margin: 0 auto; background: #F0D8E6; } section .main-sitemap { justify-content: center; align-items: flex-start; flex-wrap: wrap; width: 90%; max-width: 1500px; margin: 0 auto; background: #F0D8E6; } .main-blog { width: 60%; border:8px inset hotpink; padding: 1%; max-width: 1500px; margin: 0 auto; background: #F0D8E6; line-height:160%; } .posts, .intro, .updates { border: 1px solid hotpink; box-sizing: border-box; background: rgba(255,255,255,0.2); overflow: scroll; } .posts { flex: 2 1 500px; height: 700px; padding-left: 4px; padding-right: 4px; overflow: scroll; } .intro { flex: 1 1 300px; min-height: 700px; } section .updates { width:300px; overflow:scroll; height:700px; margin-top: 0; } .status { font-size: 15px; border: 1px solid hotpink; height: auto; } .ugh { width: 100%; max-width: 200px; height: 100px; overflow-y: auto; border: 1px solid hotpink; } .main img { max-width: 100%; height: auto; } section { border: 8px hotpink inset; padding: 1%; text-align: center; } footer { padding: 1%; border: 8px hotpink inset; } a { color: #300023; text-decoration: underline; text-decoration-style: dashed; } /* mobile shit */ @media (max-width: 768px) { body { font-size: 1em; } .main { flex-direction: column; align-items: center; } .posts, .intro, .updates { width: 100%; min-height: auto; } .sillyheader { position: static; float: none; margin: 0 auto; text-align: center; } header, nav, section, footer { width: 95%; } }