b,ol,p,ul,figcaption{ font-family:jetbrains } body,h1{ color:#f8f8f2 } figcaption{ font-weight:bold; font-size:90%; color:#50fa7b } .posts,h1,h2,h3,ol,p,ul{ margin-left:8vw } .pane{ margin-left:1vw; } .nested-list,.posts,h1,ol,ul{ margin-top:1vw; margin-bottom:1vw } .responsive,div.desc,footer{ text-align:center } @font-face{ font-family:jetbrains; font-weight:400; font-display:swap; src:url("fonts/woff2/jetbrains-light-woff2.woff2") format('woff2'),url(fonts/woff/jetbrains-light-woff.woff) format('woff') } @font-face{ font-family:jetbrains; font-weight:700; font-display: swap; src:url("fonts/woff2/jetbrains-bold-woff2.woff2") format('woff2'), url(fonts/woff/jetbrains-bold-woff.woff) } 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; font-family:jetbrains } hr{ width:87%; color:#6272a4 } code{ color:#50fa7b; overflow-wrap:break-word } a{ color:#8be9fd } footer{ padding:3px } 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{ font-family:jetbrains; list-style-type:none } .code-posts{ font-family:jetbrains; 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{ font-family:jetbrains } .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{ font-family:jetbrains; padding:0 6px; margin:auto; display:block; float:left; width:22% } .clearfix:after{ content:""; display:table; clear:both } .column { float: left; width: 33%; padding: 10px; } .row:after { content: ""; display: table; clear: both; } .row { width: 85%; margin: auto; } @media screen and (max-width:600px){ .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 } .code-posts{ font-size:75% } .homepage-title{ width:50%; max-width:75%; height:12.5% } .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 } }