html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.main-site {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),url(images/bg.jpeg);
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

    .rectangle {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0, 0, 0, 0.2);
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: transform 0.5s;
    border: 0.5rem solid rgb(255 255 255 / 15%);
    border-radius: 15px;
    z-index: 1;
}

.rectangle:hover {
    font-size: 25px;
    transform: translateY(-10px);
    background-color: rgba(0,0,0, 0.1);
    filter: brightness(500%);
}

.main-image {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; 
}

    .main-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

@keyframes enlargeAndFade {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

#myBtn {
    aspect-ratio: 1/1;
    transform: scale(1.5);
    display: none; 
    position: fixed; 
    bottom: 20px; 
    left: 50px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color: MediumPurple; 
    color: white; 
    cursor: pointer; 
    padding: 10px; 
    border-radius: 50%; 
    font-size: 12px; 
}

    #myBtn:hover {
        background-color: DarkSlateBlue; 
    }



.content-section {
    flex: 1;
    height: 100vh;
    display: flex;
    justify-content: center; 
    align-items: center; 
    background-color: GhostWhite;
    min-height: 100vh;
}

.centered-rectangle {
    width: 35%; 
    height: 30%; 
    background-color: lavender; 
    color: #fff; 
    font: 30px arial;
    text-align: center;
    line-height: 50px; 
    cursor: pointer;
    border: 5px double #c4b3ea;
    border-radius: 15px;
    align-items: center;
}

    .centered-rectangle img {
        width: 230px; 
        height: 230px; 
        border-radius: 5px; 
        display: block; 
        margin: 0 0 10px 0; 
    }

.profile-container {
    display: flex;
    align-items: center; 
}

.icon-links {
    display: flex; 
    margin-left: 10px; 
}

    .icon-links a {
        text-decoration: none;
        color: #007bff; 
        margin-left: 5px; 
    }

    .icon-links img {
        width: 100px; 
        height: 100px; 
    }