@font-face {
    font-family: piconic;
    font-weight: bold;
    src: url(assets/font/picoopic-Bold.ttf);
}
@font-face {
    font-family: piconic;
    font-weight: Medium;
    src: url(assets/font/picoopic-Medium.ttf);
}
body{
    background: url(assets/image/5297135\ 2.png) ,linear-gradient(110deg, #222 0.5%, #111 100%), #FFF;
position: relative;
overflow: hidden;
height: 100svh;
width: clamp(100px,100vw,500px);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
html{
    display: flex;
    align-items: center;
    justify-content: center;
}
.itemDesign{
    border-radius: 120px 0px 0px 120px;
    height: 25%;
    width: 65%;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 15vh;
background:  linear-gradient(67deg, #2A5B52 0%, #4B8D81 107.6%);
}
@media screen and (min-width:800px) {
   .itemDesign{
    border-radius: 120px;
   } 
}
.pattern{
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    mix-blend-mode: color-burn;
    background:  url(assets/image/white-concrete-wall\ 1.png)
}
.myPhoto{
    height: 70%;
    z-index: 2;

}
.myNameBox{
position: fixed;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
flex-direction: column;
}
.myNameBox div{
    height: 240px;
}
.myNameBox img{
    width:  clamp(80px,80%,300px);
}
.boxSkill{
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
   
    width: clamp(80px,80%,380px);
    position: fixed;
    bottom: 10%;
    background:  linear-gradient(67deg, #2A5B52 0%, #4B8D81 107.6%);
    border-radius: 90px;
    overflow: hidden;
}
.boxSkill p{
    font-size: 14px;
    color: #333;
    font-family: piconic;
    font-weight: Medium;
}
.socialMediaBox{
    display: flex;
    gap: 8px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: center;
    align-items: flex-end;
    color: #2A5B52;
}
.signature{
    position: absolute;
    top: 8px;
}