/* --- GLOBAL STYLES --- */

body {

    font-family: Arial, sans-serif;

    margin: 0;

    background: #f7f7f7;

    text-align: center;

}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

h1 {
  font-size: 25px;
  line-height: 0.1;
}

h2 {
  font-size: 12px;
  line-height: 0.1;
  color: #999999;
}

/* Bio Section below profile image */

.bio {

    margin-top: 60px; /* gives space under overlapping profile */

    padding: 20px;

}

.Absolute-Center {
   width: 80%;
   margin: auto;
   position: relative;
   color: #121212;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 10pt;
   text-align: center;
}

.Absolute-Center-footer {
   width: 80%;
   margin: auto;
   position: relative;
   color: #121212;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 8pt;
   text-align: center;
}

a {
 color:#121212;
}


/* --- HEADER SECTION --- */

.header {

    position: relative;

    width: 100%;

}


.header-img {

    width: 100%;

    height: 220px;

    object-fit: cover;

}


/* Profile photo */

.profile-img {

    position: absolute;

    bottom: -70px;

    left: 50%;

    transform: translateX(-50%);


    width: 140px;

    height: 140px;

    border-radius: 50%;

    border: 6px solid white;

    object-fit: cover;

}


/* Section below profile image */

.links {

    margin-top: -30px; /* gives space under overlapping profile */

    padding: 20px;

}


/* --- LINK BUTTONS --- */

.link-btn {

    display: flex;

    align-items: center;

    justify-content: center;


    width: 92%;

    max-width: 420px;

    margin: 12px auto;

    padding: 14px 10px;


    background: white;

    border-radius: 12px;

    text-decoration: none;

    color: #333;

    font-size: 14px;


    box-shadow: 0 2px 8px rgba(0,0,0,0.12);


    transition: transform 0.2s ease, box-shadow 0.2s ease;

}


/* Icon size */

.link-btn img {

    width: 40px;

    height: 40px;

    margin-right: 12px;

}


/* Hover (desktop only) */

@media (hover:hover) {

    .link-btn:hover {

        transform: translateY(-4px);

        box-shadow: 0 5px 14px rgba(0,0,0,0.18);

    }

}


/* --- RESPONSIVENESS --- */


/* Larger screens (tablet & desktop) */

@media (min-width: 600px) {


    .header-img {

        height: 280px;

    }


    .profile-img {

        width: 160px;

        height: 160px;

        bottom: -80px;

    }


    .links {

        margin-top: -30px;

    }


    .link-btn {

        font-size: 16px;

        padding: 16px 22px;

    }

    .bio {

        margin-top: 70px;

    }

}


/* Wide desktops */

@media (min-width: 1000px) {


    .header-img {

        height: 320px;

    }


    .profile-img {

        width: 180px;

        height: 180px;

        bottom: -90px;

    }


    .links {

        margin-top: -20px;

    }

    .bio {

        margin-top: 85px;

    }

}