/***** VARIABLES *****/
:root {
    --white: #D2D6EF;
    --black: black;
    --green: green;
    --yellow: #d1c628;
    --red: #9a042b;
}

/***** FONTS *****/
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

/***** UNIVERSAL SELECTOR *****/
* {
    font-family: 'Ubuntu', sans-serif;
    background-color: black;
}

/***** HTML SELECTORS *****/
body {
    padding-bottom: 3em;
    padding-top: 2em;
}
h1 {
    font-size: 250%;
    background-color: var(--black);
    color: var(--white);
    padding-left: 10px;
}
h2 {
    font-size: 200%;
    background-color: var(--black);
    color: var(--white);
    padding: 20px;
}
pre{
    line-height: 1.5em;
}
header, #about-me, footer {
    margin-left: 2em;
    margin-right: 2em;
    margin-top: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    background-color: var(--black);
    justify-content: space-between;
    align-items: center;
    border-radius: 1em;
    box-shadow: 2px 2px 20px var(--white);
    transition: .3s ease-in-out;
}
header, footer {
    display: flex;
    flex: 1 1 auto;
    background-color: var(--black);
}

/* Header, about-me and footer: Change box shadow to green on hover and focus */
header:focus, #about-me:focus, footer:focus, 
    header:hover, #about-me:hover, footer:hover {
    outline: none;
    box-shadow: 2px 2px 20px var(--green);
}
header:focus-within h1, header:hover h1{
    color: var(--yellow);
    transition: 1s ease-in-out;
}
header:hover a, footer:hover a  {
    color: var(--red);
    transition: 1s ease-in-out;
}
footer:focus-within h2, footer:hover h2 {
    color: var(--yellow);
    font-size: 220%;
    transition: .5s ease-in-out;
}
header:focus-within #profile-pic, header:hover #profile-pic{
    width: 4em;
    height: auto;
    transition: .5s ease-in-out;
}
header:focus-within, footer:focus-within     {
    outline: none;
    color: var(--red);    
    box-shadow: 2px 2px 20px var(--green);
}
header:focus-within .nav-text, footer:focus-within .nav-text{
    color:var(--red);
    transition: 1s ease-in-out;
} 
main {
    margin-top: 3em;
}
nav ul {
    margin-right: auto;
    background-color: var(--black);
}
nav li {
    background-color: var(--black);
    margin-left: 2em;
    display: inline-block;
    list-style-type: none;
}
nav li a, #about-me-text {
    background-color: var(--black);
    color: var(--white);
    text-decoration: none;
}
footer nav li {
    margin-left: 6em;
}

/***** IDs *****/
#hero {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5em;
    margin-right: 2em;
    margin-left: 2em;
}
#hero-img {
    width: 75%;
}

/* Hero image Gray Scale to colour on hover and on focus*/
#hero img {
	filter: grayscale(100%);
	transition: .3s ease-in-out;
}
#hero:hover img, #hero:focus img {
	filter: grayscale(0);
}
#hero:focus {
    outline: none;
}
#hero-img {
    width: 900px;
}
#hero-text {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-family: monospace;
}
/* Hero text to green on hover and on focus */
#hero #hero-text {
    color: var(--white);
    transition: .3s ease-in-out;
}
#hero:hover, #hero:focus {
    border: 2px solid var(--green);
    transition: .7s ease-in-out;
}
#hero:hover #hero-text, #hero:focus #hero-text {
    color: var(--green);
}
#hero:hover #hero-img, #hero:focus #hero-img {
    width: 1020px;
}
#my-name, #about-me-text, .nav-section, footer {
    background-color: var(--black);
    padding: 1em;
}
#about-me, #my-name {
    display: flex;
    flex: 1 1 auto;
}
#about-me:focus h2, #about-me:hover h2 {
    color: var(--yellow);
    font-size: 220%;
    transition: .5s ease-in-out;
}
#my-name {
    align-items: center;
}
h2, #my-name {
    flex-shrink: 0;
}
#profile-pic {
    width: 3em;
    height: 3em;
    border-radius: 5px;
}
#about-me-text {
    text-align: justify;
}
#work {
    text-align: center;
    margin-top: 2em;
    margin-left: 1em;
}
#main-image-container, #sub-image-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#sub-image-container {
    flex-wrap: wrap;
}
#contact-me:focus {
    outline: none;
}

/***** CLASSES *****/
.main-images, .sub-images{
    background: var(--white);
    padding: 2em;
    margin: 2em;
}
.main-images{
    width: 1565px;
    height: 500px;
    position: relative;
    transition: .4s ease-in-out;
}

/* Border radius to main images and sub images<figure> */
.main-images:hover, .sub-images:hover {
    border-radius: 15px;
}

/* Main image  and sub image blur to sharp on hover and on focus*/
.main-image {
	filter: blur(4px) sepia(70%);
	transition: .4s ease-in-out;
}
.sub-image {
    filter: blur(4px);
    transition: .4s ease-in-out;
}
.main-image:hover, .main-image:focus, .sub-image:hover, .sub-image:focus {
	filter: blur(0);
    border-radius: 15px;
    outline: none;
}
.sub-images {
    display: flex;
    flex-direction: row;
}
.sub-images {
    width: 750px;
    height: 400px;
    position: relative;
    transition: .4s ease-in-out;
}
.main-image, .sub-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Will fill parent container */
.sub-img-link {
    flex-grow: 1;
    background: var(--white);
}
 /* Text block for work description on main and sub images */
.text-block {
    position: absolute;
    bottom: 25%;
    left: 50px;
    background-color: var(--white);
    color: var(--white);
  }
.text-block h3 {
    padding: 15px;
    text-align: center;
  }
.text-block p {
    font-size: .75em;
    text-align: center;
    padding-bottom: 15px;
}

/***** MEDIA QUERIES FOR RESPONSIVE LAYOUT *****/
/* When screen is 1600px or less */
@media screen and (max-width: 1600px){
    #hero, footer {
        flex-direction: column;
        align-items: center;
    }
    #hero-text {
        padding: 20px;
    }
    #hero-img {
        max-width: 100%;
        height: auto;
    }
    #work {
        margin-top: 0;
    }
    .sub-images {
        height: 300px;
    }
    footer h2{
        min-width: 200px;
    }
    footer nav li {
        margin-left: 2em;
    }

}

/* When screen is 800px or less */
@media screen and (max-width: 800px){
    footer nav li {
        display: block;
    }
    footer h2 {
        text-align: center;
    }
    .text-block {
        bottom: 20%
    }
    .text-block h3 {
        padding: 5px;
        font-size: 15px;
    }
    .text-block p {
        font-size: 10px;
        padding-bottom: 10px;
    }
    footer .nav-section {
        text-align: left;
    }
}

/* When screen is 600px or less */
@media screen and (max-width: 600px){
    #about-me, header{
        flex-direction: column;
    }
    h1 {
        font-size: 2em;
    }
    h2 {
        padding: 10px;
    }
    #my-name {
        align-items: center;
    }
    #hero-text {
        font-size: 2em;
     }

}

/* When screen is 450px or less */
@media screen and (max-width: 450px){
    h1 {
        font-size: 25px;
    }
    h2 {
        font-size: 23px;
    }
    header {
        align-items: flex-start;
    }
    #about-me {
        align-items: flex-start;
    }
    footer nav li, header nav li {
        display: block;
    }
    footer {
        align-items: flex-start;
    }
    footer h2 {
        padding-left: 1em;
    }
    a, p {
        font-size: 15px;
    }
    #hero-text {
       font-size: 1.5em;
    }
    #work {
        margin:0;
    }
    .text-block {
        bottom: 20%
    }
    .text-block h3 {
        padding: 5px;
        font-size: 15px;
    }
    .text-block p {
        font-size: 10px;
        padding-bottom: 10px;
    }
    .main-images, .sub-images {
        margin-top: 1em;
        margin-bottom: 1em;
    }
    #hero {
        margin-top: 3em;
    }
}