body {
    font-family:'Times New Roman', Times, serif;
    color: black;
    margin: 0;
    padding: 0;
    text-align: center;
    background-image: linear-gradient(rgb(20, 20, 20), rgb(10, 10, 10))
}

#profile-pic {
    margin-top: 20px;
    border-radius: 50%;
    border: 1px solid black;
    width: 150px;
}

#handle {
    font-size: 20px;
    color: rgb(240, 240, 240);
}

.main {
    margin: auto;
    width: 300px;
}

/* btns */

.btn {
    margin: 10px;
    width: 280px;
    height: 60px;
    border-radius: 20px;
    border: 1px solid rgb(20, 20, 20);
    transition: transform 0.2s ease;
    cursor: pointer;
}

.btn:active {
    transform: scale(0.95)
}

/* linkedin btn */

.linkedin {
    color: rgb(240, 240, 240);
    background: linear-gradient(blue, darkblue);
    border-radius: 20px;
    cursor: pointer;
}

.linkedin:hover {
    color:rgb(180, 180, 180);
    background: rgb(0, 0, 200);
}

/* github btn */

.github {
    background: linear-gradient(rgb(1, 238, 1), rgb(0, 60, 0));
}

.github:hover {
    background: rgb(0, 100, 0);
}

/* youtube btn*/

.youtube {
    background: linear-gradient(red, darkred);
    cursor: pointer;
}

.youtube:hover {
    background: rgb(200, 0, 0);
}

/* instagram btn*/

.instagram {
    background: linear-gradient(rgb(252, 110, 134), rgb(251, 33, 69));
}

.instagram:hover {
    background: rgb(254, 52, 86);
}

/* smiley btn*/

.smiley {
    position: relative;
    background: linear-gradient(yellow, rgb(171, 171, 1));

    font-size: 25px;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.smiley:hover {
    background: rgb(240, 240, 0);
}

.smiley::before,
.smiley::after {
    content: "";
    position: absolute;
    left: 50%;
    height: 100%;
    width: 120%;
    transform: translateX(-50%); 
    z-index: 1;
    background-repeat: no-repeat;
}

.smiley.animate::before {
    top: -70%;
    background-image: 
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%),
        radial-gradient(circle, transparent 20%, rgb(250, 250, 18) 20%, transparent 30%),
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, rgb(250, 250, 18) 15%, transparent 20%),
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%),
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%),
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%),
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 18% 18%;
    background-position: 10% 90%, 30% 90%, 70% 90%, 15% 90%, 45% 90%, 25% 90%, 90% 90%, 55% 90%;
    animation: topBubbles 0.6s ease-in-out forwards;
}

@keyframes topBubbles {
    50% {
        background-position: 5% 50%, 25% 0%, 80% 30%, 15% 10%, 40% 25%, 25% 10%, 100% 50%, 60% 0%;
    }
    100% {
        background-position: 0% 40%, 25% -10%, 90% 20%, 15% 0%, 40% 15%, 25% 40%, 110% 40%, 70% -10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.smiley.animate::after {
    bottom: -70%;
    background-image: 
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, rgb(250, 250, 18) 15%, transparent 20%),
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%),
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%),
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%),
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%),
        radial-gradient(circle, rgb(250, 250, 18) 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
    background-position: 10% 0%, 30% 10%, 55% 0%, 70% 0%, 85% 0%, 70% 0%, 70% 0%;
    animation: bottomBubbles 0.6s ease-in-out forwards;
}

@keyframes bottomBubbles {
    50% {
        background-position: 0% 25%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }
    100% {
        background-position: 0% 35%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.footer {
    margin-top: 100px;
}

#icons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

a:link {
    color: rgb(240, 240, 240);
    cursor: pointer;
    text-decoration: none;
}

a:visited {
    color: rgb(240, 240, 240);
}

a:hover {
    color: rgb(180, 180, 180);
    cursor: pointer;
}

a:active {
    color: rgb(240, 240, 240);
    cursor: pointer;
}

#copyright {
    color: rgb(240, 240, 240);
    font-size: 14px;
    margin: 25px;
}