/* these are links to all the new tags i learned or tags we did learn but didnt go too much in depth. 
Display flex and block others chap 6
Line-height chap 3
Justify content https://www.w3schools.com/cssref/css3_pr_justify-content.php
Flex-direction https://www.w3schools.com/cssref/css3_pr_flex-direction.php
Align-items https://www.w3schools.com/cssref/css3_pr_align-items.php
Box-shadow https://www.w3schools.com/cssref/css3_pr_box-shadow.php
Transition https://www.w3schools.com/css/css3_transitions.asp
Object-fit https://www.w3schools.com/css/css3_object-fit.asp
Overflow https://www.w3schools.com/css/css_overflow.asp
Hover https://www.w3schools.com/cssref/sel_hover.php
*/


/* --- ------------------- ALL GENERAL TEXT INFOO ---------------- --- */
body {
    /*  the default font, text color, and background color for the entire page */
    font-family: 'Poppins', sans-serif;
    color: #333333; 
    background-color: #f7f3ef; 
    margin: 0;
    padding: 0;
}
a {
    /* style for all links */
    text-decoration: none;
    color: #808080;  
}
hr {
    /* little style for all the lines*/
    border-top: 1px solid #333333;
}
.mainstyle {
    /* general styling for all pages */
    max-width: 1000px; /* Constrain the overall width */
    margin: 0 auto;
    padding: 50px 20px;
}   
/* alignment for the main headers on the pages */
.phead {
    text-align: center;
    margin-bottom: 50px;
}
/* --- ---------------------- ALL HEADER INFO ------------------- --- */
  /* styling for the whole header */
.head {
    display: flex;
    justify-content: space-between;
    padding: 30px 50px 0;
    max-width: 1200px;
    margin: 0 auto;
} 
/* style for the itunu okusanya at the top */
.namehead h1 {
    font-family: 'Lucida Handwriting', cursive;
    font-size: 40px;
    font-weight: 400;
    margin: 0;
}  
/* style for the cybersecurity student  */
.namehead p {
    font-size: 15px;
    letter-spacing: 2px;
    margin: 0;
}
 /* style for the links list */
.navi ul {
    list-style: none;
    margin: 1;
    padding: 0;
    display: flex;/* this changes it to be horizontal */
}    
/* style for the links */
.navi ul li a {
    font-size: 18px;
    font-weight: 500;
    transition: color 0.3s;
}
/* color when you hover over link */
.navi ul li a:hover {
    color: #000000; 
}
/* --- ------------------- HOME PAGE STYLE INFO --------------------- --- */
/* main home page styling for alignment */
.home-layout {
    display: flex;
    padding: 50px 50px;
    max-width: 1200px;
    margin: 80px auto;
}
/* moves the picture on home to the right */
.picalign {
    display: flex;
    justify-content: flex-end; 
}
/* style for all the photos */
.picstyle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #e0e0e0; 
    overflow: hidden;
}
/* my professional picture fit  */
.itunupic {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* styling for the text */
.head2 {
    padding-left: 50px;
}
/* main hi there format */
.head2 h2 {
    font-size: 48px;
    font-weight: 600;
    margin: 0 0 5px 0;
}
/* subtitle text on the home */
.head2 .sub {
    font-size: 18px;
    margin: 0 0 40px 0;
}
/* this is the style for the short bio about me */
.bio {
    font-size: 16px;
    line-height: 1.5;
    max-width: 650px;
}
/* buttons for home */
.btnstyle {
    display: flex;
    margin-bottom: 30px;
}
/* styling for the button on the main page  */
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: transform 0.2s, box-shadow 0.2s; /* this was also one of my favorite thigns to learn too*/
}
/* hover effect over the buttons probly my favorite thing i learned using html!! */
.btn:hover {
    box-shadow: 0 5px 15px #d0cccc;
}
/* button colors  */
.dark {
    background-color: #5c5c5c; 
}
.med {
    background-color: #808080; 
}
.light {
    background-color: #a698ad; 
}
/* --- -------------------- ABOUT PAGE INFO -------------------- --- */
 /* syling for the main headings, about, project, resume */
.phead h2 {
    font-family: 'Playfair Display', serif; /* different font for title */
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 5px;
}
/* the line style under about, project and resume */
.line {
    width: 100%;
    max-width: 800px;
    border: none;
    border-top: 1px solid #333333;
    margin: 0 auto;
}
/* page styling for the 3 columns*/
.aboutstyle {
    display: flex;
    justify-content: space-between; /* gives space between collumns */
}
/* row allignment */
.acolumn {
    text-align: center; /* centers them */
    max-width: 500px; /* sets a max width to each row */
}
/* this controls the sizing of the bubbles over the text i linked back .picstyle because i already have the style defined with the first image i used on home */
.acolumn .picstyle {
    margin: 0 auto 20px; /* this centers the pic buble over the text */
}
/* sizing and alignment for the titles of the rows*/
.rowname {
    font-size: 24px;
    font-weight: 600;
    margin: 15px 0 10px;
}
/* all the bios font and space atributes */
.aboutbio {
    font-size: 16px;
    line-height: 1.6;
}
/* fit for the pictures inside circle */
.aboutpic {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* --- -------------------- PROJECT/RESUME PAGE LAYOUT  -------------------- --- */
 /* style for the list of items in the ptoject/ resume page */
 .prlist {
    display: flex;
    flex-direction: column; /* stack vertically */
}
.pritem {
    align-items: flex-start; /* moves content to the top */
    padding: 20px 0;
    border-bottom: 1px solid #cccccc; /* fake line to seperate */
}
/* because im using boarders to create fake lines i need a class to remove the boarder from the last section of the page */
.pritem.nob {
    border-bottom: none;
}
/* styling for the main title on the left ex. It help desk or lamp server project */
.prtitle {
    font-size: 18px; 
    font-weight: 600;
    margin: 0;
    text-align: left; /* left-align the title */
}
/* styling for the descriptions */
.desc {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    text-align: left; 
}
/* styling for the section titles ex. education skills experience */
.rtitle {
    font-family: 'Playfair Display', serif;
    font-size: 32px; 
    font-weight: 400;
    text-align: center;
    border-bottom: 1px solid #333333;
    padding-bottom: 10px;
    margin: 60px 0 30px 0; /* adds top margin to separate sections */
}
/* location and date text under a job title */
.lo {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #808080;
    margin-top: 5px;
}
/* style/alignment for download  */
.dwnldstyle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0 60px 0;
}
/* text styling next to the download button */
.dwnldtext {
    font-size: 14px;
    margin: 0;
}
/* --- -------------------- ALL FOOTER INFO -------------------- --- */
/* main class for footer */
.footstyle { 
    background-color: #a698ad; 
    width: 100%;
    padding: 60px 0;
    margin-top: 50px;
}
 /* style to align all footer items */
.footalign { 
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    color: #f7f3ef;
}
.footitem {
    /* styling for each Individual item */
    display: flex;
    align-items: center;
}
/* styling for both social and text classes  */
.footitem div { 
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* the circle for icons */
.circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #f7f3ef; 
    display: flex;
    justify-content: center;
    align-items: center;
} 
/* image inside the circle  */
.circle img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
}
/* text syle for footer  */
.social {
    /* call contact connect  */
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}
 /* textunder the socials */
.text {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
/* link color in the footer */
.text a {
    color: #ffffff; 
}