/* Style choice was heavily influenced by the design from https://www.alishaselena.com/ */
 
 /* Sets the style for entire page. Removes all the margins and paddings, sets color and font family */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #777;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body{
    background-color: #fafafa;
}
/* This affects all h1 tags. Sets font family ro Shrikhand and removes text decor */
h1{font-family: 'Shrikhand', serif;
    font-size:50px;
    color:#f9ac40;;
    text-decoration:none;
    font-weight: normal;
}

/* Class id logosmall affects the footer logo. Design idea modified fro free codecamp */
.logosmall{
    font-family: 'Shrikhand', serif;
    font-size:50px;
    color:#f9ac40;;
    text-decoration:none;
    font-weight: normal;
    font-size: 30px;
    font-weight: normal;
    color: whitesmoke;
}

/* Navigation Bar Option 1 Begins Here */
/* Displays the navigation list items as inline elements. Dis this to allow them stay on the same line */
.nav li{
    display: inline;
}

/* This affects the links within the unordered list. Removes text decor and adds line spacing.  */
.nav li a{
    text-decoration: none;
    padding: 0.5%;
    color: #000;
    letter-spacing: .18em;
    
}
/* This sets the navigation bar to the right side of the screen. Got the idea to change the text transformation from https://www.alishaselena.com/ */
.main {

    text-align: right;
    font-size:12px;
    text-transform: uppercase;
}

/* This creates the hover effect for the navbar links. Idea got and modified from W3schools */
 .nav a:hover:not(.active) {
    background-color: #fcd6a0;
    color: white;}
/* Sets a color for the currently active page the visitor is on. Idea from W3schools.(Modified) */
.nav a.active{
    background-color:#ff9500;;
    color: white;}
/* Navigation Bar Option 1 ends here */

.head{
    padding: .5%;
}
/* Grid display to allow for content on the index page and the photo to align side-by-side. Idea gotten and modiefied from @ Slaying The Dragon's Youtube channel, and @ https://maddieharris.org/ */
.container{
    padding: 0 .5%;
    display: grid;
    grid-template-columns: auto auto;
    margin-bottom: 4rem;
    margin-top: 4rem;
}



.content{
    margin: 10%;
    max-width: 100%;
    text-align: justify;
}



.aboutcon{
    margin: 5%;
    padding: 0 .5%;
    padding-bottom: 2.5rem;

}

h2{
    font-size: 40px;
    text-align: left;
    color: #2f3037;
    font-weight: bolder;
}

h3{
    font-size: 30px;
    text-align: center;
    color: #2f3037;
    margin-top: 40px;
    margin-bottom: 0;
    text-decoration: underline;
    font-weight: normal;
}

h4{
    font-size: 40px;
    color: #2f3037;
    font-weight: bolder;
    display:inline-block;
    margin-left: 0;
}

/* Tried creating a footer. Got the idea from freecodecamp.com. Didn't work out well, because i wanted it to be thinner and have the links fitted to the right */
.footer{
    position:fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f9ac40;
   
}

.footer ul{
    list-style-type: none;
}
.footer ul a{
    text-decoration: none;
    color: white;
}


#skills{
    margin-top: 10%;
    text-align: center;
    border-bottom: solid  #f9ac40;
  
}

.Experience{
    margin-left: 10%;
    display: grid;
    grid-template-columns: auto auto auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.Experience ul{
    list-style-type:disc;}

.list01 p{
    font-size: 25px;
    text-align: start;
    font-weight: 400;
    color: #2f3037;
}

p{
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    color: #2f3037;
    font-size: 20px;
}

/* Grid display for photos in the portfolio page. Didn't work as intened because some photos have column gaps that i couldn't fix. Got idea and modified from Slaying The Dragon's youtube channel: https://youtu.be/EiNiSFIPIQE?si=PY1rDO2p69bDkIz6 */
.portfolio{
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto auto auto;
    max-width: 900px;
    margin-left: 20%;
    margin-top: 70px;  
    padding: 0;  
}
/* Option 2 for 5 images starts here */
#image1{
    grid-column: 1 / 3
   }

#image2{
    grid-row: 2/2 ;
    grid-column: 1/2
}

#image3{
    grid-row: 2/2 ;
    grid-column: 2/3;
    
}

#image4{
    grid-row: 2/2 ;
    grid-column: 3/4;}

#image5{
    grid-row: 4/4 ;
    grid-column: 1/3;}
/* 5 images end here. */

/* Option 3 External Links Start Here. The color change for visited links was inspired by W3schools */
.extlinks:visited{
  color: orange;
  background-color: transparent;
  text-decoration: none;
}

.extlinks:hover{
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

.extlinks:link{
    color: blue;
    background-color: transparent;
    text-decoration: none;
}
/* External Links End Here */