@font-face {
src : url(font.woff2);
font-family: ahmad;
}

:root {
     font-size: 18px;
     font-family: ahmad;
     --font-scale: 1.618;
     --p: 0.8rem;
     --h3: calc(var(--p) * var(--font-scale));
     --h2: calc(var(--h3) * var(--font-scale));
     --h1: calc(var(--h2) * var(--font-scale));
}
 html{
    scroll-behaviour : smooth
}
 *{
    margin : 0;
     padding :0;
     font-weight: 400;
     box-sizing: border-box
}
 body {
    height: 100dvh;
     display: flex;
     flex-direction: column;
     justify-content: space-between
}
 p{
    font-size: var(--p) ;
     display : flex;
     gap : 10px ;
     align-items : center ;
     margin : 0
}
 h2{
    font-size: var(--h2)
}
 h1{
    font-size: var(--h1);
     line-height: 0.9
}
 a {
    font-size : 0.8rem
}
 p.available:before {
     content:'';
     width : 12px;
     height: 12px;
     border-radius : 50px;
     display : inline-block;
     background : #00b803;
     animation : 1s linear infinite alternate breathe;
}
 header {
     height : 80px ;
     width: 100% ;
     display : flex ;
     align-items : center;
     justify-content : center ;
     gap : 20px
}
 @keyframes breathe {
     from {
        scale : 1 ;
         opacity : 1
    }
     to {
        scale : 1.2 ;
         opacity : 0.8
    }
}
 .block {
    animation : appear linear;
     animation-timeline: view();
     animation-range : entry 0% cover 50%
}
 @keyframes appear {
     from {
        opacity : 0;
        transform: translateX(-100px)
    }
     to {
        opacity : 1 ;
        transform: translateX(0px)
    }
}
 .downup {
    animation : downup linear;
     animation-timeline: view();
     animation-range : entry 0% cover 50%
}
 @keyframes downup {
     from {
        opacity : 0;
        transform: translateY(100px)
    }
     to {
        opacity : 1 ;
        transform: translateY(0px)
    }
}
 .downup2 {
    animation : downup2 linear;
     animation-timeline: view();
     animation-range : entry 0% cover 20%
}
 @keyframes downup2 {
     from {
        opacity : 0;
        transform: translateY(100px)
    }
     to {
        opacity : 1 ;
        transform: translateY(0px)
    }
}
/* .personalimg {
    width : 500px;
     border-radius : 25px;
     filter: hue-rotate(280deg) brightness(0.8) blur(1px);
     animation : blur2 linear;
     animation-timeline: view();
     animation-range : entry 100% cover 100% 
}
 */
 .personalimg {
    width : 500px;
     border-radius : 25px;
     filter: brightness(0.8) blur(1px);
     animation : blur2 linear;
     animation-timeline: view();
     animation-range : entry 100% cover 100% 
}
 a {
     position: relative;
     text-decoration: none;
     color: #505050;
}
 a:hover {
     position: relative;
     text-decoration: none;
     color: #000;
}
/* Style for the underline effect */
 a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -2px;
     left: 0;
     transition: width 0.3s ease, left 0.3s ease;
     background : black;
}
/* On hover, expand underline from left to right */
 a:hover::after {
     width: 100%;
     right: auto;
     left: 0;
}
/* On unhover, shrink underline from right to left */
 a:hover::after {
     width: 50%;
     right: auto;
     left: 0;
}
/* Hide underline by shrinking to the right on unhover */
 a::after {
     width: 0;
     right: 0;
     left: auto;
}
 

footer{
	font-size : 0.8rem; 
	height : 60px ; 
	width: 100% ; 
	display : flex ; 
	align-items : center; 
	justify-content : center ; 
	gap : 20px
}