body { line-height: 1.25; --theme-color-primary: black; --theme-color-secondary: white; --theme-color-accent: #1d7fd4; --theme-color-accent-transparent: #1d7fd444; --theme-color-accent2: #ebb716; --theme-color-accent2-transparent: #ebb71644; width: 100vw; margin: 0px; padding: 0px; overflow-x: hidden; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: center; color: var(--theme-color-secondary); background-color: var(--theme-color-primary); } .background-photo { position: fixed; top: 40vh; max-width: 80vw; max-height: 70vh; z-index: -1; } header{ margin-top:1rem; } header,footer{ text-align: center; width:100vw; } footer{ margin-bottom:0; } nav{ background-color:rgba(0,0,0,0.7); border-radius:30%; } p { } a { color: var(--theme-color-accent2); } a:visited { color: var(--theme-color-accent2); } hr { width: 100%; margin-top: 2rem; margin-bottom: 2rem; color: var(--theme-color-accent2); } main,aside { padding:2.5rem; max-width:80rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-evenly; padding:1rem; } .listing { width: 100%; margin: 1rem; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .listing-preview { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; } img, video { max-width: 95%; } audio { width: 100%; } .metadata { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; } .metadata>div { margin: 1rem; } .metadata p { max-width: 20rem; } .metadata-author { padding: 0.5rem; display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap; } .metadata-author>img { max-width: 5rem; border-radius: 3rem; } header { text-align: center; background-color: transparent; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-evenly; bottom: 0; } nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-evenly; } nav>* { margin: 1rem; } section { display:flex; flex-direction: column; align-items: center; margin-top: 0.5rem; margin-bottom: 0.5rem; padding: 1.25rem; border-radius: 1rem; min-width: 30vw; } article { min-width: 30rem; background-color: #000015b6; margin-top: 1rem; margin-bottom: 1rem; padding: 0.5rem; border-radius: 1rem; box-shadow: 0 0 0.45rem var(--theme-color-accent); display: flex; flex-direction: column; align-items: center; padding-left:10%; padding-right:10%; } blockquote { margin-left: 10%; padding-left: 5%; border-left: 0.5rem solid var(--theme-color-accent2); font-style: italic; } section ul, section ol, article ol, article ul { width: 90%; } article>a { text-align: center; } article h3, section h3, article h4, section h4, article h5, article p { width: 100%; } article h3 { text-decoration: underline; } article img, article video, article iframe { align-self: center; max-width: 40rem; } section iframe, article iframe { width: 80%; height: 25rem; } table{ width:fit-content; } td, th { margin: 0; border: 1px solid var(--theme-color-accent2); padding: 0.5rem; text-align: left !important; } video{ background-color:black; } .link-preview{ display:flex; flex-direction: row; flex-wrap: nowrap; padding:1.5%; justify-content: center; text-decoration: none; text-align: left; max-width: 80%; } .link-preview>*{ margin:0.5rem; } .link-preview>img{ max-width: 20%; } .link-preview>div>p{ text-decoration: none !important; color: var(--theme-color-secondary); } .listing img, .listing video { max-width:25rem; margin:1rem; } aside .listing img{ max-height: 15vh; } #sidebar { padding:1rem; padding-top:0; margin:2rem; margin-top:3rem; } .recent,.featured{ width: 100%; display: flex; flex-direction: row; align-items: flex-start; } .recent *, .featured *{ margin:0; padding:0; } .recent img, .featured img{ max-width:20rem; max-height:10rem; margin:1rem; } #social-links{ display: flex; flex-direction: row; flex-wrap: wrap; } .social-link{ display:flex; flex-direction: column; align-items: center; margin:1rem; } .social-link img{ width:5rem; } @media print { body{ background-color: white; } header,footer{ display:none; } body>img{ display:none; } img{ max-height: 60vh; } *,main,section{ color:black; background-color: white; border:none; box-shadow: none; padding:0; max-width:100vw; } main{ max-width:100vw; } } @media screen and (orientation:portrait){ main{ flex-direction: column; } }