/* General Styles */

@font-face {
    font-family: "Eagle Lake";
    src: url(Fonts/EagleLake-Regular.ttf);
}
body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background: #ffffff;
}
h4 {
    text-align: left;
    font-size: 12px;
    font-style: italic;
    font-weight: lighter;
    text-decoration: solid;
    
}
a:link {
  color: rgb(245, 245, 245);
}
a:visited {
  color: rgb(250, 250, 250);
}

/* mouse over link */
a:hover {
  color: rgb(255, 255, 255);
}

/* selected link */
a:active {
  color: rgb(235, 235, 235);
} 
/* Main Nav */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:  rgb(140, 16, 255);
    padding: 0px;
    margin: 10px;
}
header .logo_header {
    display: flex;
    width: auto;
    height: auto;
}
header .logo {
    height: 80px; /* image fits the nav */
    width: auto;
}
header nav.horizontalNav {
    flex-grow: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgb(140, 0, 255);
}
header ul {
    display: flex;
    flex-grow: 1; /*takes up the remaining space of the nav evenly*/
    justify-content: space-around;
    list-style: none;
    padding: 0;
    margin: 0;
}
header li {
    flex: 1;
    text-align: center;
    padding: 1em 0;
    font-size: 1.3em;
    color: white;
}
header li:hover {
    background: rgb(132, 2, 255);
    color: white;
    
}
header a {
    display: block; /*clicking the li instead of the text will take you to the page*/
    text-decoration: none;
    color: rgb(187, 187, 187);
    text-shadow: 1px 1px black;
    font-family:'Times New Roman', Times, serif
}
/* stylings for the portfolio container */
.portfolio{
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba (0,0,0,0.1);
    margin: auto;
    text-align: center;
    background-color: #4e4d4c;/**/
    border: 5px solid #ffffff;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    background-color: rgb(255, 255, 255);/*background colour of the div holding the h2*/
    color: rgb(7, 7, 7);/*h2 colour*/
    padding: 5px;
    font-family: cursive;
    margin: 0 0 15px;
    
    
}
/* extra style for transcript text box */
.transcript-text{
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 30px;
    color: #333;
    
}


/* To get a 3x3 grid going, this is the container */
.courses {
 display: flex;
 gap: 10px;
 width: 100%;
 justify-content: space-around; /*spaces items out evenly*/
 align-items: center;
 padding: 40px;
 background: #f4f4f4;
 border-radius: 10px;
 box-shadow: 0 4px 12px rgba (0,0,0,0.1);
 flex-wrap: wrap;
 margin: auto;
 text-align: center;
 background-color: #ffffff;/**/
 border: 5px solid #ffffff;
 color: rgb(255, 255, 255);
 
}
/* where the 3x3 is actually happening */
.grid-item{
    flex: 1 1 30%;
    text-align: center;
    padding: 20px;
    min-width: 120px;
    border: 1px solid #0026ff;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: rgb(129, 6, 211);
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);;
}
.grid-item:hover{
    /* mouse over effect */
    transform: translateY(-10px);
    box-shadow: 0 6px 20px rgba(0,0,0, 0.15);
}
.grid-item p{
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* for the languages taught in class */
.Languages{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
    width: 100%;
    padding: 40px;
    background: #4e4d4c;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba (0,0,0,0.1);
    margin: auto;
    text-align: center;
    border: 5px;
    color: rgb(216, 211, 211);
    background-color: #ffffff;/**/
 border: 5px solid #ffffff;
 color: rgb(255, 255, 255);
   }
   #section{
    padding: 0 125px;
    text-align: center;
    font-size: 2rem;
    font-family: Verdana;
    
}
/*End of Menu Section*/
/*footer design*/
footer {
    text-align: center;
    padding: 20px;
    background-color: #6e00a1;
    color: #f8fafc;
    margin-top: 50px;
    font-weight: bold;
}