/*
 * @Author: Collin Blatt 
 * @Date: 2020-12-21 23:46:39 
 * @Last Modified by: blattinum
 * @Last Modified time: 2020-12-22 00:14:27
 */
    :root {

    }

    html {
        font-size: 62.5%;
    }

    body {
        margin: 0;
        padding: 0;
        /*background-color: #e2e2e2;*/
        background-color: #a3a5a1;
        background-image: linear-gradient(121deg, #a3a5a1 0%, #4e4a4f 66%);        
        /*background-color: #83A39E;
        background-image: linear-gradient(160deg, #83a39e 0%, #3d4b49 100%);*/
        background-attachment: fixed;
        /*background-image: url('../img/higbee.jpg');
        background-repeat: no-repeat;
        background-size: cover;*/
        color: #2b2b2b;
        font-family: 'Ubuntu', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 300;
        font-size: 2.4rem;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow-y: scroll;
    }

    .profile {
        background-color: #f5f5f5;
        border-radius: 1rem;
        border: rgb(221, 221, 221) 1rem solid;
        /*box-shadow: 1.5px 1.5px 1.5px 0.5px #ccc;*/
        box-shadow: 1.5px 1.5px 1.5px 0.5px #586e69;
        margin: 1rem;
        padding: 4rem 10rem 4rem 10rem;
        transition: 0.5s ease all;
    }

    .profile hr {
        border: #e6e6e6 0.009rem solid;
    }

    .social {
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
    }

    .social a {
        text-decoration-line: none;
        text-align: center;
    }

    .btn {
        margin: 1rem;
        padding: 1rem;
        font-size: 2.2rem;
        background-color: #f5f5f5;
        /*background-image: url('../img/brushed-metal.svg');
        background-repeat: no-repeat;
        background-size: cover;*/
        color: #2b2b2b;
        border-radius: 1rem;
        border: 0.05rem solid rgb(160, 140, 140);
        transition: 0.25s ease all;
    }

    .btn:hover, .btn:active {
        background-color: slategrey;
        background-image: none;
        color: #f5f5f5;
        cursor: pointer;
        text-shadow: -0.5px 0.5px 0 #2b2b2b, 0.5px 0.5px 0 #2b2b2b, 0.5px -0.5px 0 #2b2b2b, -0.5px -0.5px 0 #2b2b2b;
        box-shadow: 1px 1px 0.5px 0.5px #384441;
    }

    .fb:hover, .fb:active {
        background-color: #3b5998;
        background-image: linear-gradient(147deg, #6186d6 0%, #3b5998 74%);  
        color: #f5f5f5;
    }

    .ms:hover, .ms:active {
        background-color: #ff00e5;
        background-image: linear-gradient(147deg, #ff00e5 0%, #280096 74%);
        color: #f5f5f5;
    }

    .twtr:hover, .twtr:active {
        background-color: #1DA1F2;
        background-image: linear-gradient(147deg, #1DA1F2 0%, #1671aa 74%);  
        color: #f5f5f5;
    }

    .ph:hover, .ph:active {
        background-color: #FFE53B;
        background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);        
        color: #f5f5f5;        
    }

    .profile img {
        width: 25rem;
        border: #eee 1rem solid;
        border-radius: 100rem;
        box-shadow: 1.5px 1.5px 1.5px 0.5px #586e69;
    }

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

        .profile {
            background: transparent;
            border: none;
            box-shadow: none;
            margin: 0;
            padding: 2rem 5rem 2rem 5rem;
        }

        .profile img {
            border-color: rgb(221, 221, 221);
            box-shadow: 3px 3px 3px 1px #40504c;
        }

        .profile hr {
            border: transparent;
        }

        .social {
            background-color: rgb(221, 221, 221);
            border-radius: 1rem;
            border: 0.05rem solid lightgrey;
        }

    }