/*
    Sagar Jhajj
    October 30th 2025
    sagarjhajj.com and .ca
    Version 0.1.2
*/

/*
    What's New?
    A "*" beside a section or sub-section indicates it is new.
    A "**" beside a section or sub-section indicates it has been edited/updated.
        ^
*/

/*
    Change the background colour of the page to blue.
*/

body{
    background-color: #010a0c;
}

/*
    h1 displays the page headings and has a left margin.
*/

h1{
    color: #ffffff;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.7em;
    text-align: left;
    margin-left: 5%;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-decoration: none;
}

/*
    h2 is the main body text of the website.
*/

h2{
    color: #FFFFFF;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1em;
    margin-left: 5%;
    text-align: left;
}

/*
    h3 is the copyright at the bottom of the website.
*/

h3{
    color: #FFFFFF;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1em;
    text-align: center;
}

/*
    h4 is the text on the home page.
*/

h4{
    color:#FFFFFF;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
}

/*
    Use the flex function so we can display images beside text.
    imageflex is for book on the books page and imageflex2 is for the image of me on the home page.
*/

.imageflex{
    margin-left: 5%;;
    display: flex;
    flex-direction: row;
}

.if1{
    background-color: #010a0c;
}

.if2{
    margin-left: 25px;
    text-align: left;
}

.imageflex2{
    margin-left: 25%;
    display: flex;
    flex-direction: row;
    -ms-flex-align: center;
}

.if3{
    background-color: #010a0c;
    text-align: center;
}

.if4{
    margin-left: 5%;
}

/*
    Make the website display differently on smaller displays.
*/

@media only screen and (max-width: 767px) {
    .imageflex {
        flex-direction: column;
    }
    .if1{
        text-align: center;
    }
    .if2{
        margin-left: 0px;
    }
}

@media only screen and (max-width: 1080px) {
    .imageflex2 {
        margin-left: 0%;
        flex-direction: column;
    }
    .if3{
        text-align: center;
    }
    .if4{
        margin-left: 0%;
    }
}

/*
    The below methods will affect how the headers at the top of each page are displayed.
*/

a.link1:link{
    color: #FFFFFF;
    text-decoration: none;
    margin-left: 4%;
}

a.link1:visited{
    color:#FFFFFF;
    text-decoration: none;
}

/*
    When hovering over a link, change the text colour to blue.
*/

a.link1:hover{
    color:#309bff;
    text-decoration: none;
}

a.link1:active{
    color:#FFFFFF;
    text-decoration: none;
}

/*
    This is the for the link to the home page. It's the same as link1 but has no margin-left.
*/

a.link2:link{
    color: #FFFFFF;
    text-decoration: none;
}

a.link2:visited{
    color:#FFFFFF;
    text-decoration: none;
}

a.link2:hover{
    color:#309bff;
    text-decoration: none;
}

a.link2:active{
    color:#FFFFFF;
    text-decoration: none;
}

/*
    Links for my book are now display as white with no underline and have a white border around them.
*/

a.link3:link{
    color:#FFFFFF;
    text-decoration: none;
    border: 1px solid #ffffff;
    border-radius: 3px;
    padding: 5px;
}

a.link3:visited{
    color:#FFFFFF;
    text-decoration: none;
}

/*
    When hovering over a link, change the text and border colour to blue.
*/

a.link3:hover{
    color:#309bff;
    border-color: #309bff;
    text-decoration: none;
}

a.link3:active{
    color:#FFFFFF;
    text-decoration: none;
}