* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }
body { background: #080808; color: #fff; }
.container { margin: 0 2%; }
.content-list, .project-list { margin: 0 3vw; }

                        /*   header   */

#header {
    width: 100%;
    min-height: 100vh;
    background-image: url(assets/images/my-pics/background-image.png);
    background-size: cover;
    background-position: 90% center; /* horizontal/vertical - to center the face from bg-image in mobile view */
}

#header .container {
    height: 100vh;
    position: relative;
    /* We have set the text to be at the bottom of the div, but we had not specified where exactly this bottom is.
    Although the div's BG image was set to 100vh, its height is not in sync with the div itself, and we also have to do so for the div. */
}

.header-text {
    font-size: 7.5vh;
    line-height: 1;
    text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
    @supports (-webkit-text-stroke: 1px black) { /* textstrokes are the more efficient method, but not supported by firefox */
        h1 {
            text-shadow: none;
            -webkit-text-stroke: 1px black;
        }
    }
    position: absolute;
    bottom: 20px;
    /* Moves the element 20 pixels from the bottom of its positioned ancestor.
    If its parent is position: relative;, it will stay within that section.
    If there's no relative ancestor, it will be 20px above the bottom of the whole page. */
}

.header-text span { color: yellowgreen; }

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.logo {
    margin-top: 0px;
    margin-bottom: 10px;
    width: 12vh;
    height: 12vh;
    line-height: 1;
}

#header .logo { margin-top: 10px; cursor: pointer; }

#sidemenu li {
    display: inline-block;
    list-style: none;
    margin: 10px 20px;
}

#sidemenu li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    position: relative;
}

#sidemenu li a::after {
    content: "";
    width: 0%;
    height: 3px;
    background: #ff004f;
    position: absolute;
    left: 0;
    bottom: -6px;
    transition: 0.5s;
}

nav .fa-solid { display: none; }   /* don't display 'Close Navbar' button in desktop view */
#sidemenu li a:hover::after { width: 100%; } 

                        /*   about   */

#about h2 { margin-bottom: 0.5rem; }

.skill-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.skill-icons i, .skill-icons img {
    display: inline-block;
    transition: transform 0.2s ease, filter 0.25s ease;
    line-height: 1;
}
.skill-icons i:hover, .skill-icons img:hover { transform: translateY(-2px) scale(1.06); }
.skill-icons i { font-size: 25px; }  /* The earlier problem was that I fixed the <i>'s height and width to 25px. As it's an inline font element, the font size would change and leave empty spaces in the 25px box. */
.skill-icons img { height: 25px; }

.row { /* the 'about' section divided into two flex columns (portrait + intro) */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.about-col-1 { flex-basis: 35%; }
.about-col-1 img { width: 100%; border-radius: 15px; }
.about-col-2 { flex-basis: 60%; }
.sub-title { font-size: 60px; font-weight: 600; }

.skill-categories { display: flex; margin: 20px 0 20px; }

/* individual skill tab buttons */
.tab-links {
    margin-right: 50px; 
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
}

.tab-links::after {
    content: " ";
    width: 0;
    height: 3px;
    background: #ff004f;
    position: absolute;
    left: 0;
    bottom: -8px;
    transition: 0.5s ;
}
.tab-links.active-link::after { width: 50%; }

.tab-links i { transition: 0.25s ease; }
.tab-links i:hover { transform: translateY(-2px) scale(1.06); }

.tab-contents ul li { list-style: none; margin: 10px 0; }
.tab-contents ul li span { color: #b54769; font-size: 14px; }

.tab-contents { display: none; }
.tab-contents.active-tab { display: block; }

                        /*   general sections   */

section { padding: 30px 0; }
#header { padding: 0; }
#about { padding: 80px 0 30px; }
#contact { padding: 30px 0 0; }
#certifications a { color: white; text-decoration: none; }

.content-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 40px;
    margin-top: 50px;
}

.content-item {
    background: #262626;
    padding: 40px;
    font-size: 13px;
    font-weight:300 ;
    border-radius: 10px;
    transition: background 0.5s, transform 0.5s;
}

.content-item i {
    font-size: 50px;
    margin-bottom: 30px;
}

.content-item h2 {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2; /* for 30px of line, there will be 6px of spacing, half above, half below */
    margin-bottom: 15px;
}

.content-item h3 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

.content-item a {
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    margin-top: 20px;
    display: inline-block;
}

.content-item:hover {
    background: #ff004f;
    transform: translateY(-10px);
}

                        /*   projects   */

.project-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 40px;
    margin-top: 50px;
    align-items: stretch;  /* attempting to equalise heights */
}

.project {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.project img {
    width: 100%;
    border-radius: 10px;
    display: block;
    transition: transform 0.5s;
}

.layer {
    width: 100%;
    height: 0%;
    background: linear-gradient(rgba(0,0,0,0.6), #ff004f);
    border-radius: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center; 
    font-size: 14px;
    transition: height 0.5s;
}

.layer h3 { font-weight: 500; margin-bottom: 20px; }

.layer a {
    margin-top: 20px;
    color: #ff004f;
    text-decoration: none;
    font-size: 18px;
    line-height: 60px;
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
}

.project:hover img { transform: scale(1.1) }
.project:hover .layer { height: 100%; }

.btn {
    display: block;
    margin: 50px auto;
    width: fit-content;
    border: 1px solid #ff004f;
    padding: 14px 50px;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    transition: background 0.5s;
}
.btn:hover { background: #ff004f; }

                        /*   contact info   */

.contact-left { flex-basis: 35%; }
.contact-right { flex-basis: 60%; }
.contact-left p { margin-top: 30px; }

.contact-left p i {
    color: #ff004f;
    margin-right: 15px;
    font-size: 25px;
}

.contact-link { color: #ffffff; }
.social-icons { margin-top: 30px; }

.social-icons a {
    text-decoration: none;
    font-size: 30px;
    margin-right: 15px;
    color: #ababab;
    display: inline-block;
    transition: 0.3s ease-in-out;
}

.social-icons a:hover {
    color: #ff004f;
    transform: translateY(-5px);
}

.btn.btn2 {
    display: inline block;
    background: #ff004f;
    cursor: pointer;
}

button a { color: inherit; text-decoration: inherit; }
.contact-right form { width: 100%; }

form input, form textarea {
    width: 100%;
    border: 0;
    outline: none;
    background: #262626;
    padding: 15px;
    margin: 15px 0;
    color: #fff;
    font-size: 18px;
    border-radius: 6px;
}

form .btn2 {
    padding: 14px 60px;
    font-size: 18px;
    margin-top: 20px;
    cursor: pointer;
}

                        /*   footer   */

footer {
    width: 100%;
    text-align: center;
    padding: 25px 0;
    background: #262626;
    font-weight: 300;
    margin-top: 20px;
}
footer i { color: #ff004f; }

                        /*   mobile screen properties   */

@media only screen and (max-width: 1000px) {
    #sidemenu {
        background: #262626;
        position: fixed;
        top: 0;
        right: -200px;
        width: 135px;
        height: 320px;
        padding-top: 50px;
        z-index: 3;
        transition: right 0.5s;
        border-left: 2px solid white;
        border-bottom: 2px solid white;
        border-bottom-left-radius: 20px;
    }
    #sidemenu li { display: block; margin: 10px; }
    
    nav .fa-solid {
        display: block;
        font-size: 25px;
        cursor: pointer;
    }
    .fa-solid.fa-bars { position: fixed; top: 30px; right: 15px; z-index: 2; }  /* a fixed element is positioned relative to the browser viewport and stays put when the page scrolls */
    .fa-solid.fa-circle-xmark { position: absolute; top: 15px; left: 10px; }    /* an absolute element is positioned relative to its closest positioned ancestor and moves with the page flow unless that ancestor is also fixed */
    
    .sub-title { font-size: 40px; }
    .about-col-1,.about-col-2 { flex-basis: 100%; }
    .about-col-1 { margin-bottom: 30px; }
    .about-col-2 { font-size: 14px; }
    .tab-links { font-size: 16px; margin-right: 20px; }
    .contact-left,.contact-right { flex-basis: 100%; }
    footer { font-size: 14px;}
}