body{
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

h1{
   padding: 5px;
   border-bottom: 4px solid rgb(255, 238, 0);

   max-width: 300px;
   margin: auto;
   text-align: left;
}

.branding-img{
    border-bottom: 4px solid rgb(255, 188, 0);
    min-width: 320px;
    padding: 15px;
    width: 30%;
}

#header{
    width: 300px;
    animation: shake 0.75s;
    animation-iteration-count: infinite;
}

.inblk{
    position: relative;
    display: inline-block;
}

#social{
    height: 130px;
    padding: 5px;
    margin:auto;
}

.typed-cursor{
    font-size: 11px;
}

#copy{
    vertical-align: top;
    font-size: 11px;
    font-family: 'Courier New', Courier, monospace;
    color: darkgrey;

    /* animation: flash 0.75s;
    animation-iteration-count: infinite; */
}

.social{
    --w : 45px;
    width: var(--w);
    height: var(--w);

    margin: 5px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: 0.5s;
    filter: invert(0.95);
    opacity: 0.9;

    animation: flash 0.75s;
    animation-iteration-count: infinite;

}

.social:hover{
    transform: rotateX(360deg) rotate(-7deg);
    filter: invert(0);
}

@keyframes shake {
    9% { transform: translate(0px, 0px);}
    10% { transform: translate(1px, 1px);}
    11% { transform: translate(0px 0px);}
    29% { opacity: 1;}
    30% { opacity: 0;}
    34% { opacity: 1;}
    49% { transform: translate(0px, 0px);}
    50% { transform: translate(-1px, 1px);}
    51% { transform: translate(0px 0px);}
    100% { transform: translate(0px 0px);}
}


@keyframes flash {
    29% { filter: invert(1);}
    31% { filter: invert(0);}
    32% { filter: invert(1);}
}