sufyaan-website/style.css

body,b,ol,p,ul,figcaption{
	font-family: 'JetBrainsMono Nerd Font Propo', 'JetBrains Mono', 'Fira Code', 'Inconsolata', 'Source Code Pro', 'Consolas', 'Monaco', 'Courier New', 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 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 
    }
}


.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px;
}

.image-container img {
  max-width: 100%;
  margin-bottom: 10px;
  flex: calc(33.33% - 10px);
  border-radius: 15px;
  box-sizing: border-box;
}

 .gallery {
   display: flex;
   flex-wrap: wrap;
   justify-content:left;
margin-left: 7vw;
margin-right: 7vw;
 }

 .image-container {
   position: relative;
   width: calc(33.33% - 20px);
   margin: 10px;
   overflow: hidden;
  border-radius: 10px;
 }

 .image {
   width: 100%;
   height: auto;
   border-radius: 10px;
 }
@media screen and (max-width:1150px){
  .image-container {
    flex-direction: column;
    align-items: center;
  }
    .gallery {
      justify-content: flex-start;
    }
    .image-container {
      width: calc(100% - 20px);
  }
  }