* {
    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 {
    width: 100%;
    min-height: 100vh;
    background-image: url(my-pics/background-image.png);
    background-size: cover;
    background-position: 90% center;
}

#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) {
        h1 {
            text-shadow: none;
            -webkit-text-stroke: 1px black;
        }
    }
    /* textstrokes are the more efficient method, but not supported by firefox */
    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; }

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

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

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

nav ul li a:hover::after {
    width: 100%;
}

#about {
    padding: 80px 0;    
}
#about h2 { margin-bottom: 0.5rem; }

.row {
    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;
}

.tab-titles {
    display: flex;
    margin: 20px 0 20px;
}

.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-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;
}

#education { padding: 30px 0; }
#contact { padding: 30px 0 0; }
#experience, #certifications { padding: 0 0 30px; }
#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 {
    padding: 50px 0;
}

.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-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;
}

.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;
}

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

.copyright i {
    color: #ff004f;
}

nav .fa-solid {
    display: none;
}

@media only screen and (max-width: 1000px) {
    nav ul {
        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;
    }
    
    nav ul 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; }
    .fa-solid.fa-circle-xmark { position: absolute; top: 15px; left: 10px; }
    
    .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%;
    }
    
    .copyright {
        font-size: 14px;
    }
}