@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');
*,
*:after,
*:before {
    box-sizing: inherit;
}
body{
    font-family: "Amatic SC", cursive;
    background-image: url("resume_bg.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: #161c1f;
    color: ghostwhite;
    font-size: 150%;


}
.parent{

    display: block;
    width: 800px;
    align-items: center;
    justify-content: center;
}
.container{
    height: 10em;
    display: flex;
    align-items: center;
    justify-content: center;

}




.clip {

    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.svg--source {
    display: none;
}

.svg--icon {
    width: 100%;
    max-width: 5rem;
    max-height: 5rem;
    display: block;
    margin: 0 auto;
    fill: currentColor;
}

.wrapper {
    width: 100%;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.share {
    width: 5rem;
    height: 5rem;
    float: left;
    margin: 0.5rem 1rem 0.5rem 0;
    color: #353c4a;
    border: 0.125rem solid #f3f3f3;
    box-shadow: 0 0 8px 0 rgba(50, 50, 50, 0.15);
    border-radius: 50%;
    transition: 250ms;
}
.share:last-child {
    margin-right: 0;
}
.share:focus {
    outline-color: inherit;
}

.twitter:hover, .twitter:focus {
    color: #ffffff;
    box-shadow: 0 0 24px 0 #c9c9c9;
}

.github:hover, .github:focus {
    color: #ffffff;
    box-shadow: 0 0 24px 0 #dcdcdc;
}


@media (max-width: 600px) {
    body {
        width: 100%;
        background-image: url("resume_bg_mobile.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-color: black;

    }
    .parent{
        width: 50%;
        max-width: 100%;
        padding-top: 10px;

    }
    .container{
        padding-top: 500px;
        padding-bottom: 400px;
    }

}