body {
    background: linear-gradient(#1C5F73, #3F3E65);

    font-size: 24px;
    font-family: Helvetica, Calibri, sans-serif;

    text-align: center;

    min-height: 100vh;

    padding-left: 0.4em;
    padding-right: 0.4em;

}

 .container {
  margin-left: 0 env(safe-area-inset-left);
  margin-right: 0 env(safe-area-inset-right);
}

@media (pointer:coarse) {
    /* custom css for "touch targets" */
    body { font-size: 17px;
    }
}




h1 {
    display: flex;
    justify-content: center;
    flex-flow: column wrap;

    color: #ffeef2;
    font-size: 1.7em;

    padding-bottom: 0.5em;
    padding-top: 0;
    margin-bottom: 0;

}


h2 {
    display: flex;
    justify-content: center;
    flex-flow: column wrap;

    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;

    color: #edd3c4;

    font-weight: 200;
    font-size: 1.2em;

    margin-top: 0;
    margin-bottom: 2em;
}


h3 {
    display: flex;
    justify-content: center;
    flex-flow: column wrap;

    padding-left: 1em;
    padding-right: 1em;

    margin: 0.4em auto;

    color: #edd3c4;

    font-weight: 400;
    font-size: 1.3em;

    padding-top: 0.4em;
    padding-bottom: 0.4em;

    min-width: 7em;
    max-width: 10em;

    margin-top: 2em;
    margin-bottom: -0.3em;
}



.link-box {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    align-items: center;
    background-color: #2D3238;
    flex: 1;
    margin: 0.4em auto;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    text-align: center;
    font-size: 1.2em;
    font-weight: 400;
    padding: 1.2em 3.4em 1.2em 3.4em;
    border: solid 2px #2D3238;
    border-radius: 0.4em;
    height: 2.2em;
    min-width: 15em;
    max-width: 30em;
    box-shadow: -0.25em 0.25em 0.25em 0 rgba(41,41,41,1);;
}


#aboutme {
    display: flex;
    justify-content: center;
    flex-flow: column wrap;

    text-align: left;

    padding-left: 1em;
    padding-right: 1em;

    margin: 0.4em auto;

    color: #edd3c4;

    font-weight: 200;
    font-size: 1.1em;

    padding-top: 0.4em;
    padding-bottom: 0.4em;

    min-width: 7em;
    max-width: 33em;

    margin-top: 0.4em;
    margin-bottom: 2em;
}


#photo {
    width:9.5em;
    height:9.5em;
    object-fit:cover;
    border-radius:50%;

    margin-top: 1.2em;

    padding-bottom: 0;
    margin-bottom: 0;
}



/* ============================================================= */

/* Background Images */


#github {
    background-image: url('images/github.png');
    background-repeat: no-repeat;
    background-size: 1.7em;
    background-position: 0.4em center;
}

#linkedin {
    background-image: url('images/linkedin.png');
    background-repeat: no-repeat;
    background-size: 1.7em;
    background-position: 0.4em center;
}


#twitter {
    background-image: url('images/twitter.png');
    background-repeat: no-repeat;
    background-size: 1.7em;
    background-position: 0.4em center;
}

#instagram {
    background-image: url("images/insta.png");
    background-repeat: no-repeat;
    background-size: 1.7em;
    background-position: 0.4em center;
}

#medium {
    background-image: url(images/medium.png);
    background-repeat: no-repeat;
    background-size: 1.7em;
    background-position: 0.4em center;
}

#px {
    background-image: url(images/px.png);
    background-repeat: no-repeat;
    background-size: 1.7em;
    background-position: 0.4em center;
}

#gmail {
    background-image: url(images/gmail.png);
    background-repeat: no-repeat;
    background-size: 1.7em;
    background-position: 0.4em center;
}

#youtube {
    background-image: url(images/youtube.png);
    background-repeat: no-repeat;
    background-size: 1.7em;
    background-position: 0.4em center;
}

#pdf {
}


/* ============================================================= */

/* Stylink links */







a {
    display: inline-block;
}
a:link {
    color: #FFEEF2;
    text-decoration: none;
}
a:visited {
    color: #FFEEF2;
    text-decoration: none;
}
a:hover {
    color: #FFEEF2;
    text-decoration: none;
    font-weight: 400;
    letter-spacing: 0.01em;
    border: solid 2px #292929;
    box-shadow: -0.25em 0.25em 0.25em 0.15em rgba(41,41,41,1);;
}
a:active {
    color: #FFEEF2;
    text-decoration: none;
    font-weight: 400;
    border: solid 2px #292929;
    box-shadow: -0.25em 0.25em 0.25em 0 rgba(41,41,41,1);;
    position: relative;
    top: 1px;
}


/* End of:  Stylink links */
/* ============================================================= */


a.just-link {
    display: inline;
}
a.just-link:link {
    color: #edd3c4;
    text-decoration: underline;
}
a.just-link:visited {
    color: #edd3c4;
    text-decoration: underline;
}
a.just-link:hover {
    color: #edd3c4;
    text-decoration: underline;
    font-weight: 400;
    letter-spacing: 0.01em;
    border: none;
    box-shadow: none;
}
a.just-link:active {
    color: #edd3c4;
    text-decoration: underline;
    font-weight: 400;
    position: relative;
    top: 1px;
    border: none;
    box-shadow: none;
}








footer {

    color: rgba(237, 211, 196, 0.4);

    margin-top: auto;

    padding: 2em 0 1.5em;
    vertical-align: middle;

    font-weight: lighter;

    bottom: 0;
    width: 100%;
    height: 2.5em;   /* Height of the footer */
    text-align: center;

    clear:  both;
}