@import url('https://fonts.googleapis.com/css2?family=Nobile&family=Nunito+Sans&family=Overpass&display=swap');

/* General Stylings */

/* Colour Palette: 
backgrounds : #062B7D;
dark accent: #6C5BB7;
main colour: #6382AD;
light accent: #B99590;
light shade: #F5EEE7;

I kept this code in for reference of the color palette I was using as I go

*/
* {
    margin: 0;
    padding: 0;
    border: none;
}

body {
    font-family: "Nunito Sans", sans-serif;
    color: #F5EEE7;
    background-color: #062B7D;
}

/* pseudo classes to ensure all links have no decorations */
a:hover,
a:visited,
a:link,
a:active {
    text-decoration: none;
}

/* Headings */

h1,
h2 {
    font-family: Overpass, sans-serif;
    letter-spacing: 3px;
    color: #F5EEE7;
    text-transform: uppercase;
}

#logo {
    text-align: center;
    font-size: 250%;
    margin: 0 auto;
    padding: 10px;
}

/* Navigation Bar and logo stylings */
#menu {
    font-size: 130%;
    letter-spacing: 2px;
    background-color: #516B8F;
    text-align: center;
    margin: 0 auto;
    width: 97%;
    border-radius: 10px;
    margin-bottom: 20px;
}

#menu,
logo {
    line-height: 50px;
}

#menu li {
    text-align: center;
    list-style-type: none;
    margin: 0 auto;
    border-bottom: 1px solid black;
}

#menu a {
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}

#menu a:hover {
    background-color: #3963bc;

    border-radius: 10px;
}

/* Hero Image */

#hero-container {
    height: 600px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    background: url(../images/ps_logo.jpg) no-repeat center center;
}

#cover-text {
    margin: 200px auto;
    height: auto;
    width: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    color: rgb(255, 254, 254);
    backdrop-filter: blur(6px);
    text-align: center;
    padding: 20px;
    font-size: 150%;
    text-shadow: -1px 1px 0 #000;
}

/* Overview styling */

#overview {
    text-align: center;
    background-color: #F5EEE7;
    border-radius: 10px;
    width: 90%;
    margin: 20px auto;
    color: #062B7D;
    padding: 20px;
    box-sizing: border-box;
}

#overview h2 {
    color: #516B8F;
    font-size: 250%;
    margin: 10px;
}

#overview p,
#overview ul {
    line-height: 30px;
    text-align: left;
    font-size: 130%;
    margin: 0 auto;
    width: 90%;
    color: #062B7D;
    padding: 10px;
}

#overview img {
    max-height: 100%;
    width: 80%;
    border-radius: 3%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
}

#overview ul {
    margin: 0 auto;
    width: 70%;
    text-align: left;
}

/* Timeline Styling */


/* Timeline is labeled as such so that "Right-side" and "left-side" IDs 
are to be displayed on their respective sides on the page, where left would 
be hugging the left of the container, and the right would be pushed halfway 
across the container.  */

#timeline h2 {
    font-size: 250%;
    text-align: center;
    margin: 10px;
    color: #F5EEE7;
}

#time h3 {
    margin: 20px 10px;
    color: #F5EEE7;
    font-size: 150%
}

#time p {
    line-height: 30px;
    text-align: left;
    font-size: 130%;
    margin: 0 auto;
    color: #F5EEE7;
    width: 100%;
    padding: 1%;
}

#timeline {
    box-sizing: border-box;
    text-align: center;
    color: #F5EEE7;
    position: relative;
    /* max-width: 1200px; */
    margin: 0 auto;
    width: 90%;
    border-radius: 10px;
    background-color: #6C5BB7;
    padding: 20px;
}


/* The ::after psuedo element is used to create cosmetic content as the last 
child of the selected element. In this case, I used it to create my vertical bar on the timeline. */

#timeline::after {
    content: '';
    position: absolute;
    width: 5px;
    background-color: #F5EEE7;
    top: 6%;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}


#timeline img {
    width: 90px;
    background-color: white;
    border-radius: 10px;
}

.right-side {
    margin: 20px 0px;
    width: 45%;
    left: 55%;
    position: relative;
    text-align: right;
}

.left-side {
    margin: 20px 0px;
    width: 45%;
    position: relative;
    left: 0;
    text-align: left;
}

hr {
    width: 111%;
    border-top: 5px solid #F5EEE7;
    margin: 4px 0;
}

.right-side hr {
    width: 111%;
    position: relative;
    left: -12%;
    margin-left: 5px;
}


/* Form styling */

#form {
    margin-top: 30px;
}

#form h2 {
    font-size: 250%;
    text-align: center;
    margin: 10px;
    color: #516B8F;
}

#form-content {
    box-sizing: border-box;
    border-radius: 10px;
    width: 90%;
    margin: 0 auto;
    background-color: #F5EEE7;
    color: #062B7D;
    padding: 20px;
}

input,
select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #F5EEE7;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #F5EEE7;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: white;
    resize: none;
}

input[type=submit] {
    background-color: #516B8F;
    border: none;
    color: #F5EEE7;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;

}

/* Footer Styling */

footer {
    background-color: #516B8F;
    color: #F5EEE7;
    height: 100px;
    margin-top: 30px;
}

footer h3 {
    background-color: #F5EEE7;
    color: #062B7D;
    text-align: center;
    font-size: 150%;
    padding: 2%;
}

#socials {
    text-align: center;
    background-color: #F5EEE7;
}

#socials>li {
    display: inline;
}

#socials i {
    font-size: 180%;
    padding: 5%;
    color: #062B7D;
}

#FAB {
    border: 1px solid black;
    background-color: white;
    position: fixed;
    text-align: center;
    width: 25px;
    height: 25px;
    bottom: 5%;
    right: 5%;
    padding: 20px;
    border-radius: 50%;
    z-index: 9999;
}

#FAB a {
    width: 100%;
}

#FAB i {
    font-size: 180%;
    color: black;
    text-align: center;
    width: 100%;
}

/* 404 Styling */
#notfound {
    font-size: 200%;
    padding: 8%;
    margin: 8%;
}

/* Media queries */


/* Queries to change the nav bar to horizontal on tablet and above */
@media screen and (min-width: 768px) {

    #menu {
        display: flex;
        justify-content: space-between;
    }

    #menu li {
        display: flex;
        width: 25%;
        align-items: center;
        border-bottom: none;
    }

    #menu a {
        color: inherit;
        display: inline;
        width: 100%;
        height: 100%;
    }
}

/* Queries to keep the timeline on one side on smaller devices for easier readability */
@media (max-width: 576px) {
    .right-side {
        left: 0;
        width: 80%;
        text-align: left;
    }

    .left-side {
        width: 80%;
    }

    hr {
        border: none;
    }

    .right-side hr {
        border: none;
    }

    #timeline::after {

        top: 10%;
        bottom: 0;
        left: 80%;

    }

    #hero-container {
        background-size: contain;
        background-repeat: no-repeat center;
        height: 250px;
        width: 100%;
    }

    #cover-text {
        margin: 0 auto;
        width: 100%;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
        color: rgb(255, 254, 254);
        backdrop-filter: blur(6px);
        text-align: center;
        padding: 20px;
        font-size: 150%;
        text-shadow: -1px 1px 0 #000;
    }
}