/* @font-face {
    font-family: 'cat';
    src: url(cat.ttf);
} */

body{
    background-size: 400% 400%;
    background-image: linear-gradient(-45deg, lightcoral, plum, #23a6d5, #23d5ab, mediumseagreen);
    background-attachment: fixed;
    background-repeat: no-repeat;
    animation: body 15s ease infinite; 
}

@keyframes body {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
 } 

.container{
    display: block;
    position: relative;
    margin-top: 137px;
    margin-left: 25px;
    background-image: linear-gradient(-45deg, aqua, aquamarine, turquoise, cornflowerblue, mediumslateblue, mediumorchid);
    background-size: 400% 400%;
    background-attachment: fixed;
    animation: gradient 10s linear infinite;
    box-shadow: 0px 0px 10em rgba(13, 13, 14, 0.342);
    height: 450px;
    width: 550px;
    border-radius: 80px;
}

@keyframes gradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
 } 

.img_bg{
    position: absolute;
    top: -81px;
    margin-left: 194px;
    display: block;
    height: 162px;
    width: 162px;
    border-radius: 50%;
    box-shadow: 0px 0px 4em rgba(13, 13, 14, 0.37);
    background-image: linear-gradient(-45deg, #1faee7,#09dfc9,#f36df3);
}

.img{
    display: block;
    height: 154px;
    width: 154px;
    border-radius: 50%;
    padding: 4px;
}

.content{
    position: absolute;
    top: 82px;
    height: 290px;
    width: 550px;
    display: block;
    /* background-color: black; */
}

.apps{
    position: absolute;
    top: 300px;
    display: flex;
    width: 550px;
    margin-left: 66px;
    align-content: flex-end;
    align-items: stretch
    /* background-color: aliceblue; */
}

a{
    text-decoration: none;
}

/* @media only screen and (min-width: 517px) and (max-width: 643px) {
    #container{
        margin-left: -20px;
    }
} */

@media (max-width: 600px) {
    #container{
        margin-left: 32px;
        margin-right: 0%;
        margin-top: 370px;
        padding-left: 30px;
        padding-right: 30px;
    }

    #img_bg{
        height: 200px;
        width: 200px;
        margin-top: -19px;
        margin-left: 175px;
    }

    #img{
        height: 192px;
        width: 192px;
    }

    #content{
        position: absolute;
        top: 92px;
    }
}

h1{
    font-size: 40px;
}

.h2{
    font-family: 'Tangerine';
}

/* @media (min-width: 424px) and (max-width: 600px) {
    #container{
        margin-left: 16%;
        margin-right: 0%;
        margin-top: 500px; 
    }
} */