body,b,ol,p,ul,figcaption{ font-family: 'Ubuntu Mono', 'Roboto', 'Droid Sans Mono', 'Source Code Pro', Consolas, 'Courier New', monospace, 'SF Mono', 'Menlo', monospace; } body,h1{ color:#f8f8f2 } figcaption{ font-weight:bold; font-size:90%; color:#50fa7b } .posts,h1,h2,h3,ol,p,ul{ margin-left:8vw } .main-header { text-align: center; font-size: 0.75vw; font-weight: bolder; color: #8be9fd; padding: 25px; text-decoration: none; } svg { margin-right:2%; margin-top:2%; margin-bottom:-0.75%; } svg.posts { margin-right:0.75%; margin-top:-2%; margin-bottom:-0.13%; margin-left:0%; width: 16px; height: 16px; } svg.postinfo { margin-right:0.75%; margin-top:0%; margin-bottom:-0.35%; margin-left:-0.2%; width: 20px; height: 20px; } svg.heading2 { margin-right:0.75%; margin-top:0%; margin-bottom:-0.35%; margin-left:-0.2%; width: 32px; height: 32px; } svg.footer-posts{ margin-right:0.4%; margin-top:0%; margin-bottom:-0.45%; margin-left:0%; width: 24px; height: 24px; } svg.titles { margin-right:0.50%; margin-top:0.5%; margin-bottom:-0.53%; margin-left:0%; width: 40px; height: 40; } .pane{ padding-left: 1vw; margin-right: 5px; list-style-type: none; } .nested-list,.posts,h1,ol,ul{ margin-top:1vw; margin-bottom:1vw } .responsive,div.desc,footer{ text-align:center } body{ background:#282b35 } p,ol,ul{ margin-right:8vw; font-weight:400 } img{ width:30vw } b{ font-weight:700 } ol,ul{ font-weight:400 } code,h1,h2,h3{ font-weight:700; } hr{ width:87%; color:#6272a4 } code{ color:#50fa7b; overflow-wrap:break-word; font-size: 140%; } a{ color:#8be9fd } footer{ margin-top:1.5% } h1{ font-size:200% } h2{ font-size:150%; margin-top:1.5vw; margin-bottom:1.5vw } h3{ font-size:110% } i{ margin-right:10px } .posts{ list-style-type:none } .code-posts{ color:#6272a4; font-size:80% } .homepage-title{ display:block; padding-top:3.25vw; padding-bottom:3vw; margin-left:auto; margin-right:auto; width:30%; max-width:35%; height:7.5% } .footer-text{ } .nested-list{ margin-left:-2vw; margin-right:3vw } div.gallery{ border:1px solid #6272a4 } div.gallery:hover{ border:1px solid #8be9fd } div.gallery img{ width:100%; height:auto } div.desc{ padding:15px } *{ box-sizing:border-box } .main{ margin-left:10vw; margin-right:7vw; width:90vw; margin-bottom:4vw } .responsive{ padding:0 6px; margin:auto; display:block; float:left; width:22% } .clearfix:after{ content:""; display:table; clear:both } .column { float: left; width: 33.33%; padding: 2px; } .row:after { content: ""; display: flex; grid-template-columns: 1fr 1fr 1fr; clear: both; } .row { width: 100%; } @media screen and (max-width:1150px){ .posts,h1,h2,h3,ol,p,ul{ margin-left:20px; margin-right:20px; margin-top:30px } .column { width: 100%; } .row { width: 100%; } hr{ width:93% } .posts{ font-size:90%; padding:0 } .main-header { text-align: center; font-size: 1.95vw; font-weight: bolder; padding: 15px; } .code-posts{ font-size:75% } svg.footer-posts{ margin-right:0.75%; margin-top:0%; margin-bottom:-1.5%; margin-left:0%; width: 24px; height: 24px; } svg.heading2 { margin-right:2.75%; margin-top:2%; margin-bottom:-2.35%; margin-left:-0.2%; } .homepage-title{ width:50%; max-width:75%; height:12.5% } svg.posts { margin-right:3%; margin-top:0%; margin-bottom:-0.55%; margin-left:0%; } svg.postinfo { margin-right:2.75%; margin-top:0%; margin-bottom:-2.00%; margin-left:-0.2%; } svg.titles { margin-right:1.50%; margin-top:0.5%; margin-bottom:-2.53%; margin-left:0%; } .nested-list{ margin-left:-6vw; margin-top:4vw; margin-bottom:4vw } .responsive{ width:100%; padding-bottom:4vw } div.gallery{ border:1px solid #282b35 } div.gallery:hover{ border:1px solid #8be9fd } .main{ width:75vw; margin-top:7vw; padding:8px } } @media screen and (max-width:1150px){ img{ width:75vw } }