* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #010409;
    color: #fff;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

#logo {
    position: relative;
    width: 240px;
    height: 240px;
    display: block;
    margin: 2rem auto 3rem;

    & img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    & .secondary {
        display: inline-block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 30%;
        height: 30%;
        cursor: pointer;

        & img {
            padding: 6px;
            background: #010409;
        }
    }

}

#social {
    > div {
        display: block;
        width: 240px;
        margin: auto;
        margin-top: 360px;
        position: relative;
        > a {
            position: absolute;
            bottom: calc(sin(var(--position) * pi / 5) * 120%);
            left: calc(50% - cos(var(--position) * pi / 5) * 120%);
            height: 30%;
            width: 30%;
            transform: translate(-50%, -50%);
            transition: transform .2s;
            &:hover {
                transform: translate(-50%, -50%) scale(1.25);
            }
            & img {
                height: 100%;
                width: 100%;
            }
        }
        > a:nth-child(2) {
            --position: 0;
        }
        > a:nth-child(3) {
            --position: 1;
        }
        > a:nth-child(4) {
            --position: 2;
        }
        > a:nth-child(5) {
            --position: 3;
        }
        > a:nth-child(6) {
            --position: 4;
        }
        > a:nth-child(7) {
            --position: 5;
        }
    }
}

#services {
    display: block;
    width: 50%;
    margin: 3rem auto;
    padding: 10px;
    border-radius: 20px;
    border: 3px solid #0d1117;

    & p {
        width: 60%;
        margin: auto;
        padding: 20px;
        border-radius: 20px;
        background: #0d1117;
    }

    > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: center;
        margin-top: 2rem;

        & a {
            display: block;
            width: 265px;
            padding: 20px;
            margin: 20px;
            border-radius: 20px;
            background: #0d1117;
            color: #fff;
            text-decoration: none;

            & img {
                display: block;
                margin: 20px auto;
                height: 128px;
            }

        }

    }

}

@media only screen and (max-width: 600px) {
    #services {
        width: 90%;
        & p {
            width: 100%;
        }
        > div {
            & a {
                width: 128px;
                margin: 10px;
                & img {
                    height: 64px;
                }
            }
        }
    }
}