/*----GLOBAL SETTINGS----*/

/*--Variables--*/
:root {
    --xl: 1280px;
    --section-primary: rgb(9, 18, 57);
    --section-secondary: rgb(15, 119, 174);
    --text-colour: rgb(220, 220, 220);
}

/*--Fonts--*/

* {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: var(--text-colour);
}

body {
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; 
}

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; 
    
}


/*--Reset Styles--*/
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  box-sizing: border-box;  
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  margin: 0;
  padding: 0;
  font-size: 18px;
}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

/*--Background Settings--*/
.bg-primary {
  background-color: var(--section-primary);
  color: var(--text-colour)
}

.bg-secondary {
  background-color: var(--section-secondary);
  color: var(--section-primary);
}


/*----NAVIGATION BAR SETTINGS----*/

/*--Nav tag settings--*/
nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: -webkit-sticky;
    position: sticky; /*Keeps the nav bar stuck to the same position of the screen*/
    top: 0;
    height: 3rem;
    opacity: 0.9; /*Makes nav bar partially transparent*/
    overflow-y: hidden;
    z-index: 5; /*Keeps nav in front*/
    width: 100%;
    padding-top: 1.7rem;
    padding-bottom: 1.7rem;
}

/*--Nav logo settings--*/
nav img {
    border-radius: 200px;
    width: 150px;
    height: 150px;
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
}


/*--Nav buttons list settings--*/
#nav-buttons-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3rem;
    transform: translateX(4%);
}

/*--Individual nav button settings--*/
.nav-button {
    padding: 0.6rem;
    font-size: 16px;
    border: 2px solid var(--section-secondary); /*Adds border colour and strength*/
    border-radius: 40px;
    text-align: center;
    width: 10.7rem;
    display: inline-block;
    box-sizing: border-box;
}

/*--Remove hyperlink unlerline--*/
.nav-button:link {
    text-decoration: none;  
}

/*--Change button colour with mouse hover--*/
.nav-button:hover {
    background-color: var(--section-secondary);
    color: white; /*Brighter text on hover*/
}


/*----FOOTER SETTINGS----*/

/*--Footer links div settings--*/
#footer-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 145px;
    position: relative;
    overflow: hidden
}

/*--Style footer buttons list--*/
#footer-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8rem;
    position: absolute;
    right: 64%; 
}

/*--Style of individual footer buttons--*/
.footer-button {
    text-align: center;
    font-size: 20px;
    text-decoration: none; /*Remove hyperlink underline*/
    border: 2px solid var(--section-primary); /*Sets border colour and strength*/
    border-radius: 40px; /*Rounded edges of border*/
    padding: 1rem;
    width: 6rem;
    display: inline-block;
    
}

/*--Change footer button colour on mouse hover--*/
.footer-button:hover {
    background-color: var(--section-primary);
    color: white; /*Brighter text on hover*/
    cursor: pointer; /*Ensures cursor is a pointer on mouse hover*/
}

/*--Footer business logo size and positioning--*/
#personal-logo {
    width: 150px;
    height: 150px;
    transform: translateY(2px);
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
}

/*--Footer logo round image--*/
footer img {
    border-radius: 200px; /*Round image*/
}

/*--Footer logos positioning--*/
#footer-logos {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 20vh;
    position: absolute;
    transform: translateX(100%);
}

/*--Footer social media logos effects--*/
#footer-logos img {
    border-radius: 200px; /*Rounded images*/
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
}


/*----GENERAL SETTINGS----*/

/*--Headings--*/
.section-title {
    text-align: center;
    font-size: 38px;
    font-style: italic;
    background-color: var(--section-primary);
    margin-top: 60px;
    margin-bottom: 25px;
    text-shadow: 5px 5px black; /*Sets a shadow behind the text*/
    border-top: 2px solid var(--section-secondary); /*Sets top border colour and strength*/
    border-bottom: 2px solid var(--section-secondary); /*Sets bottom border colour and strength*/
    padding: 10px;
}

.section-subheading {
    text-align: center;
    font-size: 28px;
    font-style: italic;
    padding-top: 10px;
    text-shadow: 5px 5px black; /*Sets a shadow behind the text*/
    border-bottom: 2px solid var(--section-secondary); /*Sets bottom border colour and strength*/
    padding-bottom: 5px;
}

.project-title {
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 3px;
}

.contributions-heading {
    background-color: var(--section-secondary);
    padding-left: 10px;
}


/*--Card Settings--*/
.project-card {
    position: relative;
    width: 300px;
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    height: max-content;
    overflow: hidden;
    transition: 1.0s ease; /*Sets the time for the transformation on hover*/
    border-radius: 20px;
}

.project-card img {
    width: 300px;
    height: 300px;
    transition: 1.0s ease; /*Sets the time for the transformation on hover*/
}

.project-card:hover {
    transform: translateY(-0.5rem); /*Moves the card up*/
}

.project-card:hover img {
    transform: scale(1.1); /*Increases scale of image on hover*/
    overflow: hidden;
    cursor: pointer;
}

.project-description {
    background-color: var(--section-secondary);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-size: 16px;
    padding: 10px;
}

/*--List Settings--*/
.project-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3.5rem;
}

.project-contributions {
    list-style-type: disc; /*Sets the visibility of bullet points*/
    padding-left: 22px; /*Creates space for the bullet points to be seen*/
    padding-bottom: 10px;
    background-color: var(--section-secondary);
}


/*----MODAL SETTINGS----*/

/*-[7] W3Schools, 'How To Create a Modal Box', 2024. [Online]. Available: https://www.w3schools.com/howto/howto_css_modals.asp. [Accessed: 15-Aug-2024]. Accessed for research on how to build a modal box with HTML, JavaScript and CSS-*/

/*--Default modal class settings--*/
.modal {
    display: none; /*Hidden by default*/
    position: fixed; /*Keeps the modal in one position*/
    top: 40%; /*Default top value*/
    border-radius: 20px;
    max-width: 30%; /*Keeps max width of modal at 30% of the viewport*/
    background-color: var(--section-secondary);
    justify-content: center;
    align-items: center;
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    z-index: 30; /*Keeps the modal at the very front*/
}

/*--Modal content box--*/
.modal-content {
    overflow: hidden;
    flex-direction: row;
    border-radius: 20px;
    padding: 10px;
    word-wrap: break-word; /*Keeps text from spilling over the width*/
    flex-direction: row;
}

/*--Modal close button styles--*/
.close {
    color: white;
    float: right;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    
}

.close:hover {
    color: red; /*Change close button to red on hover*/
    text-decoration: none; /*Ensure no underline*/
    cursor: pointer;
}

/*--Copyright modal styles--*/
#copyright-modal {
    top: 76%; /*Renders the copyright modal just above the copyright button*/
    left: 17%; 
    bottom: 30px;
    z-index: 10;
    max-height: max-content;
    padding: 15px;
    text-align: center;
}

/*Project modal styles--*/
#project-modal {
    flex-direction: row;
    max-width: 90%;
    height: 100%;
    left: 5%;
    top: 0;
    text-align: center; /*Center project description text*/
}

#project-modal li {
    list-style: disc;
    text-align: left; /*List items placed from left to right*/
    margin-left: 3%;
    font-size: 20px; /*Increase font size for modal*/
}

#project-modal p {
    font-size: 20px; /*Makes project font size bigger for modals*/
}

#project-modal h3 {
    font-size: 24px; /*Makes project font size bigger for modals*/
}

#project-modal h4 {
    font-size: 22px; /*Makes project font size bigger for modals*/
}

#project-modal img {
    width: 400px; /*Sets the width of the project images to be bigger in a modal*/
}


/*----INDEX PAGE SETTINGS----*/

/*--Intro Video Settings--*/
#intro-video-container {
    height: 67vh; /*Keeps the video to a standard view height across multiple screen sizez*/
    overflow: hidden; /*Hides unnecessary parts of the video that overflow*/
}

#intro-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*--Introduction Section--*/
#introduction-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3rem;
    height: 400px;
    width: 80%;
    margin-left: 12.5%;
    height: max-content;
}

/*--introduction-container <p> settings--*/
#introduction-container p {
    padding: 0.8rem;
    background-color: var(--section-secondary);
    height: max-content;
    width: 50%; /*Width to be 50% of #introduction-container*/
    border-radius: 20px; /*Rounded corners*/
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    margin-top: 3%; /*Spacing from the the top of the container*/
    font-size: 20px;
}

#introduction-container img {
    /*Height and width of logo*/
    width: 330px;
    height: 330px;
    border-radius: 200px; /*Round image*/
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    margin-top: 12%; /*Spacing from the the top of the container*/
}

/*--Latest Work Section--*/
#latest-work-container {
    display: flex;
    flex-direction: column; /*Display items from top to bottom*/
    align-items: center;
    }

#latest-work-container img {
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    margin-bottom: 1.3%;
}

#latest-work-container h2 {
    padding: 0; 
    margin-bottom: 0.5%; /*Spacing between the border and the <p>*/
}

#latest-work-container p {
    width: 60%;
    height 60%;
    background-color: var(--section-secondary);
    border-radius: 20px; /*Rounded corners*/
    padding: 0.8rem;
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    margin-bottom: 5%; /*Spacing from footer*/
}


/*----PROFESSIONAL PROJECTS PAGE SETTINGS----*/

/*--Recent Projects Section--*/
#recent-projects-container {
    display: flex;
    flex-direction: row; 
    justify-content: space-evenly; /*Ensures items are spaced evenly*/
    gap: 5rem; /*Sets gap between items*/
    margin-top: 1%; /*Spacing from the top of the container*/
    height: max-content;
}

#recent-projects-container aside p {
    background-color: var(--section-secondary);
    width: 30vh;
    height: max-content;
    padding: 20px;
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    margin-left: 20%; /*Space from the left*/
    border-radius: 20px; /*Round corners*/
    margin-top: 35%; /*Space from the top*/
    font-size: 20px;
}

/*--Older Projects Section--*/
#older-projects-container {
    padding-top: 100px; /*Spacing from the top*/
    padding-bottom: 150px; /*Spacing from the bottom*/
}

#older-projects-list {
    margin-top: 1%; /*Gap betwen the list and the top border of the container*/
}


/*----PERSONAL PROJECTS PAGE SETTINGS----*/

/*--Personal Projects Section--*/
#about-personal-projects-container {
    width: 80%; /*Sets the width to be 80% of the viewport*/
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    margin-left: 12.5%; /*Spacing from the left*/
    border-radius: 20px; /*Rounded corners*/
    padding: 10px;
    margin-bottom: 2rem; /*Spacing from the bottom*/
}

#about-personal-projects-container p {
    font-size: 20px; /*Sets larger text size*/
}

#personal-projects-container {
    padding-bottom: 3rem; /*Spacing from the bottom border*/
}

#personal-projects-list {
    gap: 16rem; /*Sets gap between items*/
}

/*--Upcoming Projects Section--*/
#upcoming-projects-container {
    display: flex;
    flex-direction: row; /*Displays items in a row*/
    margin-top: 2%; /*Spacing from the top*/
    padding-bottom: 5rem; /*Spacing from the bottom*/
    margin-right: 12.5%; /*Spacing from the right*/

}

#upcoming-projects-container aside p {
    background-color: var(--section-secondary);
    padding: 20px;
    border-radius: 20px; /*Rounded corners*/
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    width: 50%; /*Sets width to be 50% of the container*/
    height: max-content;
    margin-left: 8rem; /*Spacing from the left*/
    font-size: 20px; /*Sets larger font size*/
    margin-top: 25%; /*Spacing from the top border*/
}

#upcoming-projects-list {
    gap: 8rem; /*Sets gap between items*/
}


/*----SKILLS & REFERENCES PAGE SETTINGS----*/

/*--About Me Section--*/
#about-me-container {
    display: flex;
    flex-direction: row;
    justify-content: center; /*Centers all items*/
    gap: 2rem; /*Sets gap between items*/
    background-image: url('../Assets/Images/Background/background-art-big-2.jpg'); /*Uses background image*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right; /*Aligns the image to where I want it to be*/
    height: 600px;
    overflow: hidden; /*Hides any overflow from the background*/
}

/*--Profile picture styles--*/
#about-me-container img {
    width: 300px; /*Sets image width*/
    height: 300px; /*Sets image height*/
    border-radius: 200px; /*Round image*/
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    margin-top: 40%; /*Spacing from the top*/
}

/*--About me text styles--*/
#about-me-container p {
    background-color: var(--section-primary);
    border: 2px solid var(--section-secondary);
    border-radius: 20px; /*Round corners*/
    padding: 40px;
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    height: max-content;
    width: 30%; /*Sets width to be 30% of the container*/
    margin-top: 7%; /*Spacing from the top*/
}

/*--Knowledge & Skills sections--*/
.skill-ref-container {
    display: flex;
    flex-direction: column; /*Display items downward*/
    margin-top: 1%; /*Spacing from the top*/
}

.skill-ref-list {
    padding: 20px;
    list-style: none; /*Displays bullet points*/
}

#knowledge-list {
    margin-left: 43%; /*Spacing from the left*/
    margin-right: 10%; /*Spacing from the right*/
}

.nestedList {
    font-size: 15px;
    list-style: none;
    margin-left: 3%;
}

#ref-list-ending {
    list-style: none;
    margin-left: -2.5%;
    margin-top: 5%;
    font-style: italic;
}

#qualification-list {
    margin-left: 37%; /*Spacing from the left*/
}

/*--References section--*/
#references {
    background-image: url('../Assets/Images/Background/background-art-big.jpg'); /*Sets the background image*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom; /*Sets the background image position to where I want it to be*/
    margin-top: 0;
    align-items: center;
}

#references-list {
    list-style: none; /*Removes bullet points*/
}

.reference-people img {
    height: 125px; /*Sets height of image*/
    width: 210px; /*Sets width of image*/
    border-radius: 20px; /*Round corners*/
}

.reference-people {
    display: flex; 
    flex-direction: row;
    gap: 30px; /*Sets gap between items*/
    margin-bottom: 30px;
    background-color: var(--section-primary);
    border: 2px solid var(--section-secondary); /*Sets border colour and strength*/
    border-radius: 20px; /*Round corners*/
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
}

/*References text sections*/
.reference-info {
    display: flex;
    flex-direction: column; /*Displays the reference text information as a column*/
    margin-top: 1%; /*Spacing from top*/
    padding-right: 2%; /*Spacing from right*/
}


/*----CONTACT & SHOP PAGE SETTINGS----*/

/*--Contact page information settings--*/
#contact-page-info-container {
    padding: 20px;
    display: flex;
    justify-content: center; /*Brings text to center*/
}

#contact-page-info-container p {
    width: 60%; /*Sets width of text to be 60% of the container*/
    background-color: var(--section-secondary);
    border-radius: 20px; /*Round corners*/
    padding: 20px;
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    font-size: 20px; /*Sets larger font size*/ 
}

/*--Contact Form Section--*/
#contact-form-container {
    background-image: url('../Assets/Images/Background/background-art-big-3.jpg'); /*Sets background image*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; /*Sets position of background to where I want it to be*/
    margin-top: 0; /*Removes any margins*/
    height: 48rem; /*Sets height of container*/
    display: flex;
    justify-content: center; /*Holds the contact form in the center*/
}

#contact-form {
    display: flex;
    flex-direction: column;
    width: 20%; /*Sets width of the form to be 17% of the container*/
    background-color: var(--section-primary);
    height: max-content;
    padding: 20px;
    border-radius: 20px; /*Round corners*/
    border: 2px solid var(--section-secondary); /*Sets border colour and strength*/
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
    margin-top: 8%; /*Spacing from the top*/
}

#contact-form label {
    text-align: center; /*Centers all labels in the contact form*/
}

/*--Contact Form Styles for Input Fields--*/
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea,
#contact-form select {
    background-color: var(--section-primary);
    color: var(--text-colour);
    border: 2px solid var(--section-secondary); /*Sets border colour and strength*/
    padding: 10px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 20px;
}

/*--Contact form inputs styles on focus--*/
#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
#contact-form textarea:focus,
#contact-form select:focus {
    outline: none; /*Removes the default outline*/
}


/*--Submit Button Styles--*/
#contact-form button[type="submit"] {
    background-color: var(--section-secondary);
    color: var(--text-colour);
    padding: 10px;
    border: none; /*Remove default border*/
    border-radius: 20px; /*Round corners*/
    cursor: pointer; /*Pointer cursor on hover*/
}

/*--Changes submit button background colour on hover--*/
#contact-form button[type="submit"]:hover {
    background-color: rgb(0, 104, 159); /*Darker blue background on hover*/
    color: white; /*Brighter text on hover*/
}

/*--Contact form character counter styles--*/
#contact-form span {
    font-size: 12px;
    text-align: right;
    transform: translateY(-0.9rem); /*Holds the character counter at the correct position*/
}

/*--"Find me" lists--*/
.find-me-list {
    display: flex;
    flex-direction: row;
    justify-content: center; /*Brings items to the center*/
    gap: 15%; /*Sets the gap between items*/
    height: 100px; /*Height of the lists*/
    margin-top: 20px; /*Spacing from the top border of the section*/
}

/*--"Find me" list individual items styles--*/
.find-me-list li {
    display: flex;
    flex-direction: column; /*Show image over text*/
    text-align: center;
}

.find-me-list li:hover {
    transform: scale(1.06); /*Increase the scale of the logos on hover*/
    color: white; /*Makes text brighter on hover*/
    font-weight: 550; /*Increase font-weight on hover*/
}

.find-me-list a {
    text-decoration: none; /*Remove hyperlink underline*/
}

/*--"Find me" list logo styles--*/
.find-me-list img {
    border-radius: 200px; /*Round images*/
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0); /*Adds shadow effect*/
  -webkit-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
     -moz-box-shadow: 0px 3px 14px 2px rgba(0, 0, 30, 1.0);
}


/*--------RESPONSIVE STYLES--------*/
/*--[12] W3Schools, 'Responsive Web Design Media Queries' 2024. [Online]. Avaialable: https://www.w3schools.com/css/css_rwd_mediaqueries.asp. [Accessed: 23-Aug-2024]. Accessed for information on responsive web design.--*/

/*-----SMARTPHONES-----*/
@media screen and (min-width: 320px) and (max-width: 599px) {
   
    * {
        font-size: 15px; /*Global font size adjustment*/
    }
    
    /*----NAV----*/
    nav {
        height: 0.7rem; /*Adjusts height of nav to make smaller*/
        width: 100%;
    }

    /*--Nav Logo Settings--*/
    nav img {
        display: none; /*Hides nav logo to make room for buttons*/
    }
    
     #nav-buttons-list {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 0.7rem;
        transform: translateX(-0.5%)
        
    }

    .nav-button {
        font-size: 8px;
        border: 1px solid var(--section-secondary);
        width: 4.5rem;
    }

    /*--Footer--*/
    #footer-links {
        height: 120px;
    }
    
    #footer-buttons {
        gap: 0.5rem;
        right: 70%;
        flex-direction: column;
    }
    .footer-button {
        font-size: 14px;
        width: 4rem
    }
    
    #personal-logo {
        display: none; /*Hides footer logo to make room for buttons*/
    }
    
    #footer-logos {
        transform: none;
        gap: 3rem;
        right: 7%;
    }
    
    #footer-logos img {
        width: 40px;
    }
    
    /*--Headings--*/
    .section-title {
        font-size: 22px;
        margin-top: 30px;
        margin-bottom: 25px;
    }

    .section-subheading {
        font-size: 20px;
    }

    .project-title {
        font-size: 14px;
    }
    
    .contributions-heading {
        font-size: 13px;
    }
    
    /*--Card Settings--*/
    .project-card {
        width: 250px;
    }
    /*Adjusts image to match card*/
    .project-card img {
        width: 250px;
        height: 250px;
    }
    
    .project-card:hover {
        transform: none; /*Removes hover animations*/
    }
    
    .project-card img:hover {
        transform: none; /*Removes hover animations*/
    }
    
    .project-description {
        font-size: 12px
    }
    
    /*--List Settings--*/
    .project-list {
        flex-direction: column; /*Changes display from row to columns, better suited for smaller devices*/
        align-items: center; /*Keeps items in the center*/
    }
    
    .project-list li {
        font-size: 12px;
    }
    
    /*----MODAL SETTINGS--*/
    #thank-you-modal {
        max-width: 60%;
    }
    
    #project-modal .modal-content {
        display: none; /*Prevents project-modal display entirely - removes this functionality*/
    }
    
    #copyright-modal {
        top: 60%;
        left: 5%;
        max-width: 80%;
    }
    
    
    /*----INDEX PAGE SETTINGS----*/
    
    /*Introduction container--*/
    #introduction-container {
        flex-direction: column; /*Changes display from row to columns, better suited for smaller devices*/
        width: 100%;
        align-items: center; /*Keeps items in the center*/
        margin-left: 0;
    }
    
    #introduction-container img {
        width: 200px;
        height: 200px
    }
    
    #introduction-container p {
        font-size: 17px;
        width: 75%;
        margin: 0;
    }
    
    /*--Latest Work Section--*/
    #latest-work-container img {
        width: 400px;
    }
    
    #latest-work-container p {
        width: 85%
    }
    
    
    /*----PROFESSIONAL PROJECTS PAGE----*/
    
    /*--Recent Projects Section--*/
    #recent-projects-container {
        flex-direction: column; /*Changes display from row to columns, better suited for smaller devices*/
        justify-content: center; /*Keeps items in the center*/
        gap: 2rem;
    }
    
    #recent-projects-container aside p {
        font-size: 17px;
        width: 85%;
        margin-left: 2%;
        margin-top: 5%;
    }
    
    #older-projects-container {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    
    /*----PERSONAL PROJECTS PAGE----*/
    
    /*--Personal Projects Section--*/
    #about-personal-projects-container {
        width: 85%;
        margin: 4%;
    }
    
    #about-personal-projects-container p {
        font-size: 17px;
    }
    
    #personal-projects-list {
        gap: 3rem;
    }
    
    /*--Upcoming Projects Section--*/
    #upcoming-projects-container {
        flex-direction: column; /*Changes display from row to columns, better suited for smaller devices*/
        justify-content: center; /*Keeps itmes in the center*/
        gap: 2rem;
        padding-bottom: 3rem;
        
    }
    
    #upcoming-projects-container aside p {
        width: 85%;
        font-size: 17px;
        margin: 0;
        margin-left: 10%;
    }
    
    #upcoming-projects-list {
        gap: 3rem;
        margin-left: 10%;
    }
    
    
    /*----SKILLS & REFERENCES PAGE----*/
    
    /*--About Me Section--*/
    #about-me-container {
        flex-direction: column; /*Changes display from row to column*/
        height: max-content;
        background-position: bottom; /*Repositions background image*/
        align-items: center; 
        gap: 0.7rem;
    }
    
    #about-me-container img {
        width: 200px;
        height: 200px;
        margin-top: 10%;
    }
    
    #about-me-container p {
        width: 75%;
        padding: 20px;
        margin-bottom: 2rem;
    }
    
    .skill-ref-container {
        align-items: center;
    }
    
    #knowledge-list {
        margin: 10px;
    }
    
    #qualification-list {
        margin: 10px;
    }
    
    /*--References Section--*/
    
    .reference-people img {
        height: 100px;
        width: 150px;
    }
    
    .reference-people {
        gap: 5px;
        width: 95%;
        margin-left: 1%;
        padding-right: 10px;
    }
    
    #references-list p {
        font-size: 13px;
    }
    
    
    /*----CONTACT & SHOP PAGE----*/
    
    /*--Contact page information--*/
    #contact-page-info-container p {
        font-size: 17px;
        width: 100%;
    }
    
    /*--Contact form--*/
    #contact-form-container {
        height: max-content;
    }
    
    #contact-form {
        width: 75%;
        margin-bottom: 8%;
    }
    
    /*--"Find me" lists--*/
    
    .find-me-list {
        gap: 1.5rem;
    }
    
    .find-me-list a {
        font-size: 12px;
    }
    
    #find-my-work {
        gap: 4rem;
    }
    
}


/*------TABLETS------*/
@media screen and (min-width: 600px) and (max-width: 1024px) {
    * {
        font-size: 18px;
    }
    
    
    /*----NAV----*/
    nav {
        height: 0.7rem;
        width: 100%;
    }

    /*--Nav Logo Settings--*/
    nav img {
        display: none; /*Removes to nav logo to make room for the buttons*/
    }
    
     #nav-buttons-list {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
        transform: translateX(-0.5%);
        
    }

    .nav-button {
        font-size: 12px;
        border: 1px solid var(--section-secondary);
        width: 5.5rem;
    }

    /*--Footer--*/
    #footer-links {
        height: 120px;
    }
    
    #footer-buttons {
        gap: 2rem;
    }
    .footer-button {
        font-size: 14px;
        width: 4rem;
    }
    
    #personal-logo {
        width: 125px;
        height: 125px;
    }
    
    #footer-logos {
        transform: none;
        gap: 3rem;
        right: 7%;
    }
    
    #footer-logos img {
        width: 40px;
    }
    
    /*--Headings--*/
    .section-title {
        font-size: 26px;
        margin-top: 30px;
        margin-bottom: 25px;
    }

    .section-subheading {
        font-size: 24px;
    }

    .project-title {
        font-size: 18px;
    }
    
    .contributions-heading {
        font-size: 16px;
    }
    
    /*--Card Settings--*/
    .project-card {
        width: 300px;
    }
    
    .project-card img {
        width: 300px;
        height: 300px;
    }
    
    .project-card:hover {
        transform: none; /*Removes hover animations*/
    }
    
    .project-card img:hover {
        transform: none; /*Removes hover animations*/
    }
    
    .project-description {
        font-size: 15px
    }
    
    /*--List Settings--*/
    .project-list {
        flex-direction: column; /*Changes display from row to columns, better suited for smaller devices*/
        align-items: center; /*Keeps items in the center*/
    }
    
    .project-list li {
        font-size: 15px;
    }
    
    
    /*----MODAL SETTINGS--*/
    /*Adjustments to thank-you-modal*/
    #thank-you-modal {
        max-width: 60%;
    }
    
    /*Adjustments to project-modal*/
    #project-modal .modal-content {
        display: none; /*Removes the modal display*/
    }
    
    /*Adjustments to copyright-modal*/
    #copyright-modal {
        top: 72%;
        left: 10%;
        max-width: 80%;
        text-align: center;
    }
    
    
    /*----INDEX PAGE SETTINGS----*/
    
    /*Introduction container--*/
    #introduction-container {
        flex-direction: column; /*Changes display from row to columns, better suited for smaller devices*/
        width: 100%;
        align-items: center;
        margin-left: 0;
        gap: 1rem;
    }
    
    #introduction-container img {
        width: 200px;
        height: 200px;
    }
    
    #introduction-container p {
        font-size: 18px;
        width: 75%;
        margin: 0;
    }
    
    /*--Latest Work Section--*/
    #latest-work-container img {
        width: 650px;
    }
    
    #latest-work-container p {
        width: 85%
    }
    
    
    /*----PROFESSIONAL PROJECTS PAGE----*/
    
    /*--Recent Projects Section--*/
    #recent-projects-container {
        flex-direction: column; /*Changes display from row to columns, better suited for smaller devices*/
        justify-content: center; /*Keeps items in the center of the screen*/
        gap: 2rem;
    }
    
    #recent-projects-container aside p {
        font-size: 18px;
        width: 85%;
        margin-left: 5%;
        margin-top: 5%;
    }
    
    #older-projects-container {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    
    /*----PERSONAL PROJECTS PAGE----*/
    
    /*--Personal Projects Section--*/
    #about-personal-projects-container {
        width: 85%;
        margin: 4%;
    }
    
    #about-personal-projects-container p {
        font-size: 18px;
    }
    
    #personal-projects-list {
        gap: 3rem;
    }
    
    /*--Upcoming Projects Section--*/
    #upcoming-projects-container {
        flex-direction: column; /*Changes display from row to columns, better suited for smaller devices*/
        justify-content: center; /*Holds items in the center if the screen*/
        gap: 2rem;
        padding-bottom: 3rem;
        
    }
    
    #upcoming-projects-container aside p {
        width: 85%;
        font-size: 17px;
        margin: 0;
        margin-left: 10%;
    }
    
    #upcoming-projects-list {
        gap: 3rem; /*Decrease gap between items*/
        margin-left: 10%;
    }
    
    
    /*----SKILLS & REFERENCES PAGE----*/
    
    /*--About Me Section--*/
    #about-me-container {
        flex-direction: column;
        height: max-content;
        background-position: bottom;
        align-items: center;
        gap: 0; /*Removes the gap in about-me-container*/
    }
    
    #about-me-container img {
        width: 200px;
        height: 200px;
        margin-top: 10%;
    }
    
    #about-me-container p {
        width: 75%;
        padding: 20px;
        margin-bottom: 2rem;
    }
    
    .skill-ref-container {
        align-items: center; /*Sets all items of this class to the center*/
    }
    
    #knowledge-list {
        margin: 10px;
    }
    
    #qualification-list {
        margin: 10px;
    }
    
    /*--References Section--*/
    
    .reference-people img {
        /*Adjusts size of images*/
        height: 100px;
        width: 150px;
    }
    
    .reference-people {
        gap: 20px; /*Adjusts gap between image and text*/
        width: 95%;
        margin-left: 1%;
    }
    
    #references-list p {
        font-size: 15px; /*Ensure text can still fit in the references list*/
    }
    
    
    /*----CONTACT & SHOP PAGE----*/
    
    /*--Contact page information--*/
    #contact-page-info-container p {
        font-size: 17px; /*Adjusts font size*/
        width: 100%; /*Adjust width of the p text*/
    }
    
    /*--Contact form--*/
    #contact-form-container {
        height: max-content; /*Keeps height of the form adjustable depending on the content
    }
    
    #contact-form {
        width: 50%; /*Change width to fit a smaller screen*/
        margin-bottom: 8%; /*Add a margin to the bottom*/
    }
    
    /*--"Find me" lists--*/
    
    .find-me-list {
        gap: 4.7rem; /*Adjusts the gap between list items*/
    }
    
    .find-me-list a {
        font-size: 14px; /*Adjusts font size of the link text*/
    }
    
    #find-my-work {
        gap: 7rem; /*Adjusts gap*/
    }   
}