/* Establishing colours for the page */
:root {
    --background: rgb(64, 64, 64);
    --white: #fff;
    --green: rgb(79, 123, 79);
    --header-black: black;
}

/* Background colour for page and font colour */
body {
    background-color: var(--background);
    color: var(--white);
}

/* Removing anchor tag formatting */
a {
    color: var(--white);
    text-decoration: none;
}

/* Establishing basic sizes for h elements*/
h1 {
    font-size: 300%;
}

h2 {
    font-size: 200%;
}

/* Header formatting */
header {
    background-color: var(--header-black);
    color: var(--green);
    width: 100%;
    padding: 10px;
    border-bottom: 10px solid var(--green);
    display: inline-block;
    margin-bottom: 5%;
}

/* Formatting for title */
header h1 {
    padding: 20px;
    margin-left: 10%;
    justify-content: center;
    float: left;
}

/* Formatting for nav menu */
header nav {
    padding-top: 35px;
    font-size: 125%;
    display: flex;
    flex-direction: row;
    margin-right: 10%;
    float: right;
}

/* Nav alignment */
header nav ul {
    display: flex;
    float: right;
}

header nav ul li {
    display: flex;
    flex-direction: row;
    margin-left: 17px;
    margin-right: 17px;
}

/* Formatting for nav */
header nav ul li a {
    text-decoration: underline solid var(--green) 5px;
    text-underline-offset: 5px;
}

/* Hover effect for nav items */
header nav ul li a:hover {
    color: var(--green);
}

/* Basic formatting for all content on page */
.page-content {
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
    border-left: 10px solid var(--green);
    border-right: 10px solid var(--green);
    align-self: center;
    text-wrap: wrap;
    width: 50%;
}

/* Margin and colour for section titles */
.page-content div h2 {
    margin-bottom: 3%;
    color: var(--green);
}

/* Formatting for the horiseon call card */
.desc-card-large {
    position: absolute;
    bottom: 10%;
    background-color: var(--green);
    width: fit-content;
    padding: 5px 5px 5px 5%;
    text-align: center;
    vertical-align: top;
}

/* Adjustments to the horiseon image and its anchor element */
.main-img {
    width: fit-content;
    height: fit-content;
    text-align: center;
}

.main-img a {
    display: inline-block;
    position: relative;
    width: 90%;
}

.main-img a img {
    width: 100%;

}

/* Adjustments to the smaller images and anchors in the work section */
.smaller-img {
    float: left;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
    top: 0px;
    margin-bottom: 5%;
}

.smaller-img a {
    display: inline-block;
    width: fit-content;
    height: fit-content;
    text-align: center;
    vertical-align: top;
    height: max-content;
    width: 33%;
    max-height: 225px;
    position: relative;
}

/* Formatting for the rest of the call cards theyre using the .smaller-img a as an anchor for positioning */
.desc-cards {
    position: absolute;
    bottom: 25%;
    background-color: var(--green);
    width: fit-content;
    padding: 3px 3px 3px 5%;
    font-size: 8px;
}

.smaller-img a img {
    width: 100%;
}

/* Formatting for work items */
.work-img a img {
    display: inline;
    filter: grayscale(1) blur(1px);
    border: 5px solid var(--green);
}

/* Hover effect for the images */
.work-img a img:hover {
    filter: grayscale(0) blur(0px);
}

/* Giving the hover effect an anchor point in this case its just the parent directly above. */
.email-hover,
.phone-hover {
    position: relative;
}

/* Formatting and content for the pop ups in the contact-me section.*/
.email-hover:hover::after {
    content: "jakebjackson27@gmail.com";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: fit-content;
    background-color: var(--green);
    padding: 5px;
}

.phone-hover:hover::after {
    content: "0400000000";
    position: absolute;
    bottom: 0%;
    left: 15%;
    width: fit-content;
    background-color: var(--green);
    padding: 5px;
}

/* Size for the little icons in the contact me section */
.img-icon {
    height: 16px;
    width: 16px;
}

/* Using ids for all of the content sections (about me, work, contact me) */
/* Using the section as an anchor point for the text div */
#about-me section {
    position: relative;
}

/* This adjusts the text in the about me section */
#about-me section div {
    position: absolute;
    top: 0;
    left: 17%;
}

/* Alignment for text */
#about-me section div p {
    vertical-align: top;
}

/* Padding for the sections, had to remove work section b/c it messed with the images */
#work, #contact-me {
    padding-top: 5%;
    padding-bottom: 5%;
}

/* Centering for contact me section */
#contact-me div {
    text-align: center;
    align-items: center;
    display: none;
}

#about-me img {
    border: 5px solid var(--green);
    display: inline;
    height: 20%;
    width: 15%;
}

#contact-me p {
    text-align: center;
    display: inline;
}

#contact-me ul  {
    margin: auto;
    text-align: center;    
}

#contact-me ul li {
    display: inline-block;
    font-size: 125%;
    padding: 3%;
    text-decoration: underline solid var(--green) 5px;
    text-underline-offset: 5px;
}

#contact-me ul li >:hover {
    color: var(--green);
}

/* For whatever reason the small-img would wrap so that one of them is on the bottom when the res width fell below 2086px, 
so this is here for the sole purpose of fixing that annoying issue. (I'm aware i couldve just changed this above,
 but the 1% difference really makes it look ugly at larger resolutions) */
@media screen and (max-width: 2086px) {
    .smaller-img a {
        width: 32%;
    }
}

/* Formatting for smaller sized screens */
@media screen and (max-width: 1080px) {
    /* Adjusting title pos */
    header h1 {
        float: none;
        padding: 20px;
        text-align: center;
        justify-content: center;
        margin-left: 0;
    }
    /* Adjusting nav menu pos */
    header nav {
        margin-right: 0;
        padding-top: 0;
        padding-top: none;
        align-items: center;
        justify-content: center;
        float: none;
    }

    /* Increasing the size of the page content so things dont become too squished and using margin to center */
    .page-content {
        margin: auto;
        width: 70%;
    }

    /* Adjusting font-size for the description cards as they become larger than the image if i leave them as is. */
    .desc-cards p,
    .desc-card-large p {
        font-size: 75%;
    }
}

@media screen and (max-width: 768px) {
    /* Centering navmenu when it wraps below the title */
    header nav {
        margin-right: 0;
        padding-top: none;
        align-items: center;
        justify-content: center;
        float: none;
    }

    /* Removes the descriptions in the work sections as they become too large at such a small screen size. */
    .desc-cards,
    .desc-card-large {
        display: none;
    }

    #about-me p {
        font-size: 75%;
    }
}