sufyaan-website/portfolio/style.css

b,ol,p,ul{
    font-family:futura
}
body,h1{
    color:#121212
}
.responsive,div.desc,footer{
    text-align:center
}

a:link {
  color: #121212;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #606060;
  background-color: transparent;
  text-decoration: underline;
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 7vw;
  margin-right: 7vw;
  margin-top: 2.5vw;
  animation: portfolioItems normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.8s 1.5s;
}

.image-details {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: futura;
  font-weight: bolder;
  font-size: 150%;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

h1.image-details {
	color: #efefef
}

.item:hover .image-details {
  opacity: 1;
}
 .gallery {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
margin-left: 7vw;
margin-right: 7vw;
	animation: portfolioItems normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.9s 1.5s;
 }

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

 .image {
   width: 100%;
   height: auto;
   transition: transform 0.3s;
   border-radius: 10px;
 }

 .image-container:hover .image {
   transform: scale(1.2);
 }

 .image-details {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   color: #efefef;
   padding: 10px;
   opacity: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   transition: opacity 0.3s;
 }

 .image-container:hover .image-details {
   opacity: 1;
 }

.item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
  width: calc(33.33% - 20px);
  box-sizing: border-box;
  margin-bottom: 25px;
}

.item:hover {
  background-color: #000;
  border: 1px solid #efefef;
  color: #efefef;
  transition: ease-in-out
}

/* ANIMATIONS */

@keyframes titleAnim {
	0% {
		transform: scale(0.3);
		margin-top: 5%;
		padding-bottom: 0;
	}
	70% {
		transform: scale(1);
		margin-top: 5%;
		padding-bottom: 0
	}
	100% {
		transform: scale(1);
		margin-top: 2%;
		padding-bottom: 3%;
	}
}

@keyframes glideIn {
	0% {
		opacity: 0;
		margin-top: 3%;
		padding-bottom: 0%;
	}
	90% {
		opacity: 100;
		margin-top: -1.5%;
		padding-bottom: 4.5%;
	}
	100% {
		opacity: 100;
		margin-top: -1.5%;
		padding-bottom: 4.5%;
	}
}

@keyframes portfolioItems {
	0% {
		opacity: 0;
		margin-top: 5%;
		padding-bottom: 0%;
	}
	100% {
		opacity: 100;
		margin-top: 2.5%;
		padding-bottom: 4.5%;
	}
}

@keyframes lineAnimation {
	0% {
		width: 0;
		opacity: 0;
	}
	100% {
		width: 80%;
	}
}

/* CLASSES */

.main-header {
	text-align: center;
	animation: titleAnim normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.9s;
}

.navigation {
	text-align: center;
	color: #efefef;
	animation: glideIn normal both cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.7s;
}

.lines {
	animation: lineAnimation normal both 0.5s 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	margin-top: -3%;
}

@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{
    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
}
h1{
    font-size:200%
}
h2{
    font-size:150%;
}
h3{
    font-size:110%
}
@media screen and (max-width:600px){
    .posts,h1,h2,h3,ol,p,ul{
        margin-left:20px;
        margin-right:20px;
        margin-top:30px
    }
	.item {
		width: 100%;
	}
	@keyframes titleAnim {
		0% {
			transform: scale(0.3);
			margin-top: 12%;
			padding-bottom: 0%;
		}
		70% {
			transform: scale(1);
			margin-top: 12%;
			padding-bottom: 0%;
		}
		100% {
			transform: scale(1);
			margin-top: 7.5%;
			padding-bottom: 4.5%;
		}
	}
	@keyframes glideIn {
		0% {
			opacity: 0;
			margin-top: 3%;
			padding-bottom: 0%;
		}
		90% {
			opacity: 100;
			margin-top: 0%;
			padding-bottom: 3%;
		}
		100% {
			opacity: 100;
			margin-top: 0%;
			padding-bottom: 3%;
		}
	}
	@keyframes portfolioItems {
		0% {
			opacity: 0;
			margin-top: 3%;
			padding-bottom: 0%;
		}
		90% {
			opacity: 100;
			margin-top: 0%;
			padding-bottom: 3%;
		}
		100% {
			opacity: 100;
			margin-top: 0%;
			padding-bottom: 3%;
		}
	}
	@keyframes lineAnimation {
		0% {
			width: 0;
			opacity: 0;
		}
		100% {
			width: 100%;
		}
	}
    hr{
        width:93%
    }
    .posts{
        font-size:90%;
        padding:0
    }
    .code-posts{
        font-size:75%
    }
	.container {
		margin-top: 7.5vw;
		margin-left: 2vw;
		margin-right: 2vw;
	}
    .homepage-title{
        width:50%;
        max-width:75%;
        height:12.5%
    }
    .gallery {
      justify-content: flex-start;
    }

    .image-container {
      width: calc(100% - 20px);
  }
    .nested-list{
        margin-left:-6vw;
        margin-top:4vw;
        margin-bottom:4vw
    }
	.main-header{
		font-size: 7.5px;
	}
    .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
    }
	.navigation{
		font-size: 90%;
	}
	.lines {
		margin-top: 5%;
	}
}
@media screen and (max-width:1150px){
    img{
        width:75vw
    }
}