#info-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6vh;
    padding-left: 5vw;
    max-width: calc(100vw - (100vw - clamp(400px, 100vh - 700px + 50vw, 100vh - 100px)));

    * {
        margin: 0px
    }
}

h1 {
    font-size: clamp(25px, 2vw + 2vh, 75px);
    font-weight: 300;
    text-align: center;
}

h2 {
    font-weight: 900;
    display: block;
    font-size: clamp(18px, (2vw + 2vh)/2, 25px);
    text-align: center;
    padding-top: 25px;
}

#social-icons {
    display: flex;
    gap: 25px;
    padding-top: clamp(20px, 10vh + 5px, 250px);
    list-style: none;
    padding-left: 0px;

    li {
        cursor: pointer;
        padding: 2px;
        margin: auto;

        a > img {
            height: clamp(25px, 3.5vw, 35px);
        }
    }

    li:hover {
        filter: invert(20%) sepia(66%) saturate(7500%) hue-rotate(17deg) brightness(96%) contrast(103%);
    }
}

#portrait-image {
    height: clamp(400px, 100vh - 700px + 50vw, 100vh - 325px);
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: -1;
}

@media (max-width: 800px) {
    #info-group {
        padding-top: 0px;
    }
    
    h2 {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
}

@media (orientation:portrait)  {
    #portrait-image {
        right: -65px;
        bottom: -65px;
        height: 65vh;
    }

    #social-icons {
        flex-direction: column;
        align-self: start;
        justify-content: center;
        padding-left: clamp(35px, (100vw - clamp(400px, 100vh - 700px + 25vw, 100vh - 100px) - 30px), 200px);
    }
}