sufyaan-website/portfolio/style.css

b,ol,p,ul{
    font-family:futura
}
body,h1{
    color:#121212
}
.posts,h1,h2,h3,ol,p,ul{
    margin-left:8vw
}
.nested-list,.posts,h1,ol,ul{
    margin-top:1vw;
    margin-bottom:1vw
}
.responsive,div.desc,footer{
    text-align:center
}

/* ANIMATIONS */

@keyframes scaleUp {
	from {
		transform: scale(0.7)
	}
	to {
		transform: scale(4)
	}
}

/* CLASSES */

.main-header {
	text-align: center;
	margin-left: 0;
	margin-top: 25%;
	animation-name: scaleUp;
	animation-duration: 1s;
	animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86);
	animation-delay: 0;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: both;
}

@font-face{
    font-family:futura;
    font-weight:400;
    font-display:swap;
    src:url("fonts/woff2/futura-woff2.woff2") format('woff2'),url(fonts/woff/futura-woff.woff) format('woff') }
@font-face{
    font-family:futura;
    font-weight:700;
    font-display: swap;
    src:url("fonts/woff2/integral-woff2.woff2") format('woff2'), url(fonts/woff/integral-woff.woff)
}
body{
    background:#efefef
}
p{
    margin-right:8vw;
    font-weight:400
}
.center{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:50%;
}
img{
    width:40vw
}
b{
    font-weight:700
}
ol,ul{
    font-weight:400
}
code,h1,h2,h3{
    font-weight:700;
    font-family:futura
}
hr{
    width:87%;
    color:#6067ff
}
code{
    color:#50fa7b;
    overflow-wrap:break-word
}
a{
    color:#000bef
}
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:futura;
    list-style-type:none
}
.code-posts{
    font-family:futura;
    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:futura
}
.nested-list{
    margin-left:-2vw
}
div.gallery{
    border:1px solid #6272a4
}
div.gallery:hover{
    border:1px solid
}
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:futura;
    padding:0 6px;
    margin:auto;
    display:block;
    float:left;
    width:22%
}
.clearfix:after{
    content:"";
    display:table;
    clear:both
}
@media screen and (max-width:600px){
    .posts,h1,h2,h3,ol,p,ul{
        margin-left:20px;
        margin-right:20px;
        margin-top:30px
    }
    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 #121212
    }
    div.gallery:hover{
        border:1px solid
    }
    .main{
        width:75vw;
        margin-top:7vw;
        padding:8px
    }
}
@media screen and (max-width:1150px){
    img{
        width:75vw
    }
}