:root {
    --skillWidth: 24%;
    --skillHeight: 40px;
    --my-blue: hsl(184, 63%, 80%);
    --componentWidth: min(100%, 800px);
}
  
html, body, main {
    margin: 0;
    padding: 0;
}


body {
    position: relative;
  }

#navbar-override {
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%;
    z-index: 2;
    justify-content: space-between;
    padding: auto 1vh auto 3vh;
}

nav div.navbar-nav {
    text-align: right;
}

/* .section {
    padding: 5% 20% 5% 20%;
} */

.section-inner {
    padding: 10% 0 10% 0;
    width: 80%;
    margin: auto;
}

#skills {
    padding: 0;
}

.section:hover {
    background:aliceblue
}


.about-card {
    margin: 2vh auto 2vh auto;
    background-color: var(--my-blue);
    display: flex;
    border-radius: 10px;
    width: var(--componentWidth);
  }
  
.my-card-img {
    max-height: 190px;
    align-self: flex-end;
    margin: 12.5% 0 12.5% 0;
    border-radius: 50%;
    height: 80%;
    transform: translateX(-50%); /* additional 50% of own height */
    box-shadow: 0 0 0 6px var(--my-blue);
    
}
.about-image-container {
    /* display: block; */
    height: 100%;
    margin: auto;
}
.about-image-container#top {
    display: none;
}

.about-text {
    /* display: block; */
    transform: translateX(-15%); /* additional 50% of own height */
    padding: 2vh;
}

h2 {
    text-align: left;
    padding: 1% 0 1% 0;
}

#about-header {
    padding-top: 3%;
}

.skills-grid {
    margin: auto;
    display: grid;
    grid-template-columns: var(--skillWidth) var(--skillWidth) var(--skillWidth) var(--skillWidth);
    /* grid-template-rows: 12% 12% 12% 12%; */
    column-gap: 1.33%;
    row-gap: 3%;
    justify-content: center;
}

skill {
    border-radius: 5px;
    border: 3px solid hsl(184, 63%, 64%, 40%);
    background-color: white;
    padding: 5%;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: var(--skillHeight);
    justify-content: space-between;
    vertical-align: center;
}

.skill-image {
    /* margin: 1px; */
    height: 100%;
    
}

skill p {
    vertical-align: middle;
    margin: auto;
}


/* Project CSS */
/* #projects:hover {
    background-color: white;
} */

.project {
    width: var(--componentWidth);
    margin: 5% auto 20% auto;
    border-radius: 10px;
    box-shadow: 1px 1px 8px rgb(0 0 0 / 20%);
    display: grid;
    grid-template-columns: 40% 60%; /* Chaged to rows on phones */
    padding: 1%;
    min-height: 300px;
}

.project {
    /* background-color: aliceblue; */
    background-color: white;
}

.project-img-holder {
    margin: auto;
}

.project-img {
    margin: 0 10% 0 10%;
    border-radius: 5px;
    max-width: 80%;
    max-height: 80%;
}

.project-text-btn {
    display: grid;
    grid-template-rows: auto;
    justify-content: space-between;
    padding: 1vh .5vh 1vh 0;
}

.project-btns {
    vertical-align: bottom;
    text-align: right;
}

.project-btn {
    margin-right: .7vh;
}

/* Resizes for smaller screens */
@media screen and (max-width:1050px) {
    .section-inner {
        padding: 25% 0 20% 0;
    }

    .skills-grid {
        grid-template-columns: var(--skillWidth) var(--skillWidth);
        row-gap: 1.33%;
    }
    :root {
        --skillWidth: 48.66%;
    }
    
    .about-image-container {
        justify-content: center;
    }
    .about-image-container#top {
        position: relative; /* since some child is absolute */
        margin: 70px;
        display: block;
    }
    
      
    .my-card-img {
        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        width: 125px; height: 125px;
        transform: translateY(50%); /* additional 50% of own height */
        box-shadow: 0 0 0 6px var(--my-blue);
        
    }

    #bottom-img {
        display: none;
    }

    .about-card {
        margin: 0;
        display: block;
    }

    .about-text {
        transform: none;
        padding-top: 6vh;
        padding-bottom: 5vh;
    }

    .skill-image {
        max-height: 100%;
        max-width: 80%;
    }

    .project {
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        padding: 2.5vh;
    }
    .project-img-holder {
        margin: 4vh auto 4vh auto;
        max-height: 400px;
        max-width: 400px;
    }
    .project-img {
        margin: auto;
        max-height: none;
        max-width: 100%;
        max-height: 100%;
    }
}

@media screen and (max-width:670px) {
    .project-img {
        max-width: 100%;
        max-height: 100%;
    }

    .project-btn {
        margin: .7vh;
    }

}

@media screen and (min-width:1050px) {
    .project-text {
        padding-top: 3vh;
    }
}