* {
    color: white;
}

#copyBtn, #example1 {
    display: inline-flex;
    padding-top: 10px;
}

#copy {
    background-color: black;
    border: none;
    color: #FFFF40;
    font-size: 20px;
}

.fa-copy{
    color: #FFFF40;
}

.fa-copy:hover{
    color: #007FFF;
    cursor: pointer;
}

#clipboard {
    color: white;
    width: 2em;
    height: auto;
}

.footer-container {
    background-color: black;
    max-width: 100%;
    display: flex;
    padding: 1.5em;
    font-family: "new-hero", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 300px;
}

.footer-col-1 {
    width: 50%;
    text-align: left;
    margin-left: .5em;
}

.footer-col-2 {
    width: 50%;
    text-align: right;
    padding-top: .5em;
    justify-content: right;
}

#linkedin-icon, #instagram-icon {
    width: 2em;
    height: auto;
    margin-right: .5em;
}

#linkedin-icon:hover {
    filter: invert(34%) sepia(58%) saturate(7090%) hue-rotate(184deg) brightness(92%) contrast(102%);
    cursor: pointer;
}

#instagram-icon:hover {
    border-radius: 10px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    cursor: pointer;
}

@media (min-width: 320px) and (max-width: 780px) {
    .footer-container {
        font-size: .8em;
    }

    .fa-copy{
    font-size: 10px;
}

    #instagram-icon:hover {
        border-radius: 7px;
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
        background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
        cursor: pointer;
    }
    
    .footer-container {
        font-size: 9px;
        padding-top: 0px;
    }

    .footer-col-2 {
        padding-top: 15px;
    }
}