#headerinner { display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; background-color: #741e94; background: url(/images/logo_back_full.svg); } form label { display: inline-block; width: 100px; } form div { margin-bottom: 10px; } .container { background-color: var(--background-alt); background-image: linear-gradient(var(--background-alt), var(--background)); } details { margin-top: 0; } summary { background-color: var(--background-alt); padding-bottom: 0; } details p, details section { text-align: right; } aside { display: none; } h1 { margin-top: 0rem; } .right-sidebar { display: none; flex-direction: row; margin-left: 1rem; } .right-sidebar a { color: var(--text-muted); } #pagination { display: flex; justify-content: flex-start; margin: 1rem; } #pagination a { padding-right: 1rem; } #menu { display: flex; justify-content: flex-end; flex-wrap: wrap; padding-right: .5rem; align-items: center; } #menu a { margin-left: .5rem; color: var(--text-header); } footer { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1rem; margin-left: 1rem; margin-right: 1rem; } footer div { margin-top: 1rem; } p a { text-decoration: underline; } article a:hover { text-decoration: none; } article p:first-child { margin: 0; } article #readmore { margin-top: 1rem; } #nav-posts { display: flex; flex-direction: column; } .post_tag { text-transform: capitalize; margin-left: .5rem; } article { display: flex; flex-direction: column; margin-bottom: 1rem; padding: 1rem; } article h2 { margin: 0; } article h3 { margin: 0; } #articlemeta { margin-bottom: 1rem; } #articlecontent { display: flex; flex-direction: column; } #articleimage { margin-top: 1rem; } #articledata { display: flex; flex-direction: column-reverse; } .articlebgcol1 { background-color: var(--background); } #readmore { margin-bottom: 1rem; } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { details { display: none; } h1 { margin-top: .5rem; margin-bottom: 1rem; } #headerinner { padding: 10px; } .container { min-height: 100vh; } .content { padding-left: 10px; padding-right: 10px; display: flex; justify-content: space-between; min-height: 70vh; } .right-sidebar { display: flex; flex-shrink: 0; flex-grow: 0; margin-left: 2rem; text-align: right; flex-direction: column; min-width: 15%; min-height: 100vh; margin-top: 1rem; margin-right: .5rem; } footer { padding-left: 10px; padding-right: 10px; } #articledata { display: flex; flex-direction: row; } .text, #articleimage { margin-top: .5rem; display: flex; flex-direction: column; flex-shrink: 0; margin-right: 1rem; max-width: 30%; min-width: 1rem; } .notext { margin-top: .5rem; flex-shrink: 0; max-width: 50%; height: 50%; margin-right: 1rem; } .borderrad25 { border-radius: 25px; } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...} /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {...} /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {...}