@media (min-width: 600px) {
    #logo {
        position: fixed;
        top: 30%;
        left: 40%;
        width: 400px;
        height: 210px;
        margin-left: -50px;
    }

    #name {
        position: fixed;
        top: 40%;
        left: 40%;
        width: 400px;
        height: 210px;
        margin-left: -50px;
    }

    #hexagon {
        stroke-dasharray: 200;
        stroke-dashoffset: 0;
        animation: draw 2s ease-in alternate infinite;
    }

    @keyframes draw {
        from {
            stroke-dashoffset: 200;
        }
        to {
            stroke-dashoffset: 0;
        }
    }

    #brand {
        stroke-dasharray: 200;
        stroke-dashoffset: 0;
        animation: write 2s ease-in alternate infinite;
    }

    @keyframes write {
        from {
            stroke-dashoffset: 200;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
}

@media (max-width: 600px) {
    #logo {
        position: fixed;
        top: 30%;
        left: 20%;
        width: 400px;
        height: 210px;
        margin-left: -50px;
    }

    #name {
        position: fixed;
        top: 43%;
        left: 20%;
        width: 400px;
        height: 210px;
        margin-left: -50px;
    }

    #hexagon {
        stroke-dasharray: 200;
        stroke-dashoffset: 0;
        animation: draw 2s linear alternate infinite;
    }

    @keyframes draw {
        from {
            stroke-dashoffset: 200;
        }
        to {
            stroke-dashoffset: 0;
        }
    }

    #brand {
        stroke-dasharray: 200;
        stroke-dashoffset: 0;
        animation: write 2s linear alternate infinite;
    }

    @keyframes write {
        from {
            stroke-dashoffset: 200;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
}