html {
    background-color: black;
    color: white;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}

body {
    height: 100%;
    padding: 15px;
}

a:link, a:visited {
    color: white;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.logo img {
    width: auto;
    height: auto;
    max-height: 800px;
    max-width: 100%;
    padding: 3px;
    margin: 0px 10px;
    border: 1px solid white;
    box-sizing: border-box;
}

.logo {
    /* border: 1px solid red; */
    width: 50%;
    height: 100%;
    padding: 0px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.details {
    /* border: 1px solid blue; */
    /* display: inline-flex; */
    width: 50%;
    height: 100%;
    font-size: 32px;
}

.top {
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom {
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.social {
    height: 80px;
    margin: 20px;
    border: 2px solid white;
    box-sizing: border-box;
    border-radius: 10px;
}

.msg {
    height: 50%;
}

.social-img {
    border-right: 1px solid #dddddd;
    width: 20%;
    min-width: 80px;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-img i {
    font-size: 48px;
}

.social-name {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-name img {
    max-height: 50px;
}

.facebook {
    background-color: #3b5998;
}

.facebook:hover {
    background-color: #5b79a8;
}

.instagram {
    background: linear-gradient(25deg,
        #405DE6 10%, 
        #5851D8 20%, 
        #833AB4 30%, 
        #C13584 40%, 
        #E1306C 50%, 
        #FD1D1D 60%, 
        #F56040 70%, 
        #F77737 80%, 
        #FCAF45 90%, 
        #FFDC80 100%
    );
}

.instagram:hover {
    background: linear-gradient(25deg,
        #B13584 20%, 
        #C1306C 40%, 
        #D11D1D 60%, 
        #E56040 80%, 
        #F77737 100%
    );
}

.email {
    background-color: #444444
}

.email:hover {
    background-color: #666666;
}

.instagram .social-name {
    padding: 6px 0px;
}

@media screen and (max-width: 800px) {

    body {
        padding: 0px 15px;
        margin: 0px;
    }

    .logo {
        text-align: center;
    }

    .logo, .details {
        width: 100%;
        display: block;
        height: initial;
        padding: 0px;
        margin: 20px 0px;
    }

    .logo img {
        padding: 0px;
        margin: 0px;
    }

    .details {
        width: 100%;
        display: block;
    }

    main {
        display: block;
    }

}