@import url('https://fonts.googleapis.com/css?family=Nerko+One');

:root {
    --font:'Nerko One', sans-serif;
    --bgColor: rgb(226, 214, 214));
    --accentColor: #DB1B49;
    --largeDeviceBg: url("linkimgs/webbg2.png");
    --smallDeviceBg: url("linkimgs/mobbg.png");
    --grad:linear-gradient(rgb(10, 10, 10), rgb(53, 41, 46), rgb(162, 118, 131), rgb(205, 155, 164), rgb(250, 195, 197));
}
.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
.links {
    max-width: 675px;
    width: auto;
    display: block;
    margin:30px auto;
}
body {
    color: #E2D6D6;
    background-color: black;
    background-image: var(--smallDeviceBg);
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-size: cover;

} 


.container{
    margin: auto;
    padding: 15px;
    display: block;
}
.userName {
    display: grid;
    text-decoration: none;
    color: var(--bgColor);
    margin: auto;
    text-align: center;
    font-family: var(--font);
    font-size: 60px;
}
.userPhoto {
    margin: auto;
    background-color: black;
    width: 110px;
    height:110px;
    display: grid;
    border-radius: 50%; 
    outline-color: black;
    border: black;
    margin: auto;
    
}
@media only screen and (min-width:600px) {
    body {
        background-color: black;
        background-image: var(--largeDeviceBg);
        background-size: cover;
        box-sizing: border-box;
        box-sizing: 100%;
    } 
    .links {
        max-width: 675px;
        width: auto;
        display: block;
        margin:30px auto;
    }
}
.link {
    display: grid;
    text-decoration: none;
    font-size: 1.7em;
    font-family: var(--font);
    margin: auto;
    color: var(--bgColor);
    background-color: var(--accentColor);
    margin-bottom: 20px;
    transition: all .25s cubic-bezier(.08, .59, .29, .99);
    box-sizing: border-box;
    border-radius: 25px;
    padding: 15px;
    grid-template-columns: auto auto;
    grid-gap: 15px;
    border: solid var(--grad) 20px;

}

.link > img{
    font-size: 25px;
}

.link:hover {
    background-color: #0F0D0F;
    color: #E2D6D6;
    
}