body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "comfortaa", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
    /* background-color: #fdc32d; */
    display: grid;
    grid-template-rows: 1fr auto 0.3fr;
    grid-template-areas: header main footer;
    height: 100dvh;
    width: 100dvw;
    justify-content: center;
    align-items: center;
}
header {
    
    display: flex;
    flex-direction: column;
    background-color: #fdc32d;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 1rem;
    
}
#logo {
    
 z-index: 2;
 max-width: 100dvw;
 translate:0 -35%;
 margin-bottom: -5rem;
 
 
}


#profile-picture {
    z-index: 1;
    max-width: 100%;
    
    
}
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #58585a;
    max-width: 100%;
    
    
}
main h1 {
    font-size: clamp(2.5rem, 4rem, 2.5rem);
    color: #fdc32d;
    font-size-adjust: none;
    max-width: 100%;
    text-wrap: nowrap;
}
main p {
    color: #fdc32d;
    font-size: clamp(1.3rem, 2rem, 1rem);
    margin-top: 2rem;
    text-wrap: nowrap;
    max-width: 100%;
}
#website {
    
    justify-items: center;
    align-items: center;
    display: flex;

}
#mail {
    
    justify-items: center;
    align-items: center;
    display: flex;

}
#phone {
    display: flex;
    justify-items: center;
    align-items: center;
        
}
a {
    text-decoration: none;
    color: #fdc32d;
}
a:hover {
    color: #ecff82;
}
.contact-info {
    width: 100%;
    color: #fdc32d;
}
footer {
    
    background-color: #fdc32d;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-block: 1rem;
    z-index: -2;
}
button {
    
    justify-self: center;
    align-self: center;
    padding: 2rem 2rem;
    color: #fdc32d;
    background-color: #58585a;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: "Comfortaa", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 2rem;
    position: relative;
    
    
}
button:hover {
    background-color: #3f3f3f;
}


@property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
    
}

button::after, button::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(from var(--angle), #141414, #fdc32d,#141414);
    top:50%;
    left: 50%;
    translate: -50% -50%;
    z-index:  -1;
    padding: 3px;
    border-radius: 10px;
    animation: 3s spin linear infinite;
    

}
button::before {
    filter: blur(2rem);
    opacity: 0.5;
    
}
@keyframes  spin{
    from{
        --angle: 0deg;
    }
    to{
        --angle: 360deg;
    }
}