html {
    background-image: url('backgroundRose.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    image-rendering: pixelated;
  }

  
.flex-octo {
    display: flex;
    align-items: center;
    justify-content: center;
}


.octo {
    left: 1vw;
    position: absolute;
    transition: transform .2s; 
    image-rendering: auto;
}


.trans {
    right: 1vw;
    position: absolute;
    image-rendering: auto;
}


.octo > a > img {
    height: 100px;
}

.octo:hover {
    transform: scale(1.2);

}




.pain > img {
    image-rendering: pixelated;
}

.flex-pfp {
    display: flex;
    padding: 5vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.flex-pfp > div > p {
    color: antiquewhite;
    font-family: "Pixelify Sans", sans-serif;
    font-size: 60px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.flex-pfp > div > p > a {
    color: antiquewhite;
    font-family: "Pixelify Sans", sans-serif;
    font-size: 60px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-decoration: none;
}

.fa-discord {
    color:#5865F2;
}
.fa-youtube {
    color: #CD201F;
}

.pfp  {
    border-radius: 50%;
}







    
@media screen and (max-width: 980px) {
    .octo > a > img {
        height: 5vh;
    }



    .pain > img {
        height: 5vh;
    }

    .flex-pfp > div > img {
        height: 25vh;
    }

    .flex-pfp > div > p {
        color: antiquewhite;
        font-family: "Pixelify Sans", sans-serif;
        font-size: 3vh;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        text-align: center;
    }
    .flex-pfp > div > p > a {
        color: antiquewhite;
        font-family: "Pixelify Sans", sans-serif;
        font-size: 3vh;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        text-align: center;
    }


}