body {

    margin: 0;

    min-height: 100vh;

    background-image: url("../imges/background.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;


    font-family: 'Lato', sans-serif;

}





.hero {


    height: 100vh;


    display: flex;

    flex-direction: column;


    justify-content: center;

    align-items: center;


    color: white;


    text-align: center;


}




.line {


    width: 900px;

    max-width: 80%;


    height: 4px;


    background: white;


    margin: 20px 0;


}





h1 {


    margin: 15px 0;


    font-size: 5rem;


    font-weight: 700;


    letter-spacing: 3px;


    text-transform: uppercase;


}




p {


    margin: 8px 0;


    font-size: 2rem;


    font-weight: 300;


}





/* Buttons */


.buttons {


    display: flex;


    gap: 25px;


    margin-top: 25px;


}



.cv-button {


    padding: 12px 40px;


    background: white;


    color: black;


    border: none;


    border-radius: 5px;


    cursor: pointer;


    font-family: inherit;


    font-size: 1.2rem;


    transition: 0.3s;


}



.cv-button:hover {


    transform: scale(1.05);


}





/* Popup background */


.cv-modal {


    display: none;


    position: fixed;


    z-index: 9999;


    left:0;

    top:0;


    width:100%;


    height:100%;


    background: rgba(0,0,0,0.45);


    backdrop-filter: blur(8px);


    justify-content:center;


    align-items:center;


}





/* CV window */


.cv-box {


    width:85%;


    height:90%;


    background:white;


    border-radius:12px;


    overflow:hidden;


    position:relative;


    animation:openBox .3s ease;


}




.cv-box iframe {


    width:100%;


    height:100%;


    border:none;


}





/* About window */


.about-box {


    width:70%;


    max-height:90%;


    overflow:auto;


    background:white;


    border-radius:12px;


    padding:40px;


    position:relative;


    text-align:center;


    color:black;


    animation:openBox .3s ease;


}




.profile-image {


    width:220px;


    height:220px;


    object-fit:cover;


    border-radius:50%;


    margin-bottom:25px;


}





.about-text p {


    font-size:1.2rem;


    line-height:1.6;


    font-weight:400;


}





.close-button {


    position:absolute;


    right:15px;


    top:15px;


    width:40px;


    height:40px;


    border-radius:50%;


    border:none;


    cursor:pointer;


    font-size:20px;


}





@keyframes openBox {


    from {

        transform:scale(.85);

        opacity:0;

    }


    to {

        transform:scale(1);

        opacity:1;

    }


}





@media(max-width:768px){


    h1 {

        font-size:3rem;

    }



    .hero p {

        font-size:1.2rem;

    }



    .buttons {

        flex-direction:column;

    }



    .cv-box {


        width:95%;


        height:85%;


    }



    .about-box {


        width:90%;


        padding:25px;


    }



    .profile-image {


        width:160px;


        height:160px;


    }



}