BODY
{
}
/* global styles */
* {
    margin: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    background-image: 
        linear-gradient(rgb(18, 8, 40, 1) 10%, rgba(70, 50, 80, 0)), 
        url(testStarsStars.png),
        url(testStarsClouds.png), 
        linear-gradient(rgb(111, 35, 167),rgba(54, 5, 153, 1));
    background-size: cover, cover;
    background-attachment: fixed, fixed, fixed, fixed;
    background-blend-mode: overlay, screen, screen, normal;
}

header,
section,
footer {
    padding-top: 60px;
    padding-bottom: 70px;
}

p{
    font-size: 15pt;
}

h3 {
    font-weight: normal;
    font-size: 30px;
    text-transform: uppercase;
    color: #004466;
    text-align: center;
}

h4 {
    font-size: 20px;
}

div {
    width: 1200px;
    margin: 0px auto;
}



/* header styles */

header {
    padding-top: 100px;
    padding-bottom: 150px;
    color: white;
    background-image: 
        linear-gradient(rgb(18, 8, 40, 1) 10%, rgba(70, 50, 80, 0)), 
        url(testStarsClouds.png), 
        url(testStarsStars.png),
        linear-gradient(rgb(111, 35, 167), rgba(54, 5, 153, 1));
    background-position: center center;
    background-size: cover;
    background-attachment: scroll, scroll, fixed;
    background-blend-mode: multiply, screen, screen;
}
    /* noldian expedition */
    header h1 {
        font-family: sans-serif;
        font-weight: normal;
        font-size: 30px;
        text-transform: uppercase;
        line-height: 30px;
        position: absolute;
        top: 30px;
        left: 30px;
    }
    /* noldian expedition report */
    header h2::before {
        content: "";
        display: block;
        width: 600px;
        height: 120px;
        background-image: url(titleLogo.png);
    }
    header h2 {
        padding-top: 80px;
        width: 700px;
        margin-bottom: 10px;
        font-family: 'Fugaz One', cursive;
        text-transform: uppercase;
        font-weight: 900;
        font-weight: normal;
        font-size: 60px;
        text-align: left;
        text-shadow: 0px 4px 4px black;
    }

    header p:before {
        content: "37/23/3098";
        display: block;
        background-color: white;
        width: 300px;
        height: 2px;
        margin-bottom: 30px;
        line-height: 40px;
        font-style: italic;
        font-family: 'Exo', sans-serif;
        text-transform: uppercase;
    }
    /* info */
    header p {
        margin-top: 30px;
        margin-bottom: 40px;
        width: 600px;
        text-shadow: 0px 4px 4px black;
        color: rgb(216, 188, 237)
    }

    /* Links */
    header a {
        text-decoration: none;
        color: rgb(255, 255, 255, 0.50);
    }
        header a:hover {
            transition: 0.3s;
            color: white;
        }

    /* Links at the top */
    header nav {
        font-size: 20px;
        line-height: 30px;
        position: absolute;
        top: 30px;
        right: 30px;
        font-family: 'Exo', sans-serif;
        text-transform: uppercase;
        font-weight: 600;
    }

    header nav ul {
        list-style: none;
    }
        header nav li {
            display: inline;
            margin-left: 50px;
        }

    /* earth discovered on the side */
    header figure {
        position: absolute;
        right: 300px;
        top: 190px;


    }
    /* planet discovered*/
    header h3 {
        font-size: 20pt;
        color: white;
        text-align: center;
        font-family: 'Exo', sans-serif;
        text-transform: uppercase;
        font-weight: 400;
    }
    /* line underneath */
        header h3::after {
            position: relative;
            content: "";
            display: block;
            background-color: white;
            /* halfway: 150 px */
            width: 300px;
            height: 2px;
            margin-top: 5px;

        }
    /* earth */
    header h4 {
        line-height: 100px;
        font-size: 70pt;
        text-align: center;
        color: white;
        font-family: 'Exo', sans-serif;
        text-transform: uppercase;
    }
    /* vertical line after that */
    header h4:after{
        content: "";
        display: block;
        width: 2px;
        height: 50px;
        background-color: white;
        position: relative;
        left: 150px;
        top: 10px;
    }
    /* earth image */
    header figure img{
        position: relative;
        left: 40px;
        margin-top: 30px;
        align-self: center;
    }

/* main body and content */
h2 {
    text-align: center;
    color: white;
    font-size: 30pt;
}
/* expeditioners section styles */

#expeditioners {
    padding-top: 20px;
    padding-bottom: 0px;
    overflow: hidden;
    height: 450px;
    background-color: rgb(28, 33, 40);
}
    #expeditioners h3 {
        font-family: 'Fugaz One', cursive;
        text-transform: uppercase;
        color: white;
    }
    #expeditioners h3::after{
        content: ".  .  .";
        display: block;
        text-decoration: none;
        padding-top: 0px;
        line-height: 10px;
    }

    #expeditioners figure {
        margin-left: 100px;
        padding-top: 50px;
        margin-right: 270px;
        float: left;
    }

    #expeditioners img {

        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 10px solid rgb(0, 148, 255);
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
    }

    #expeditioners figcaption {
        position: relative;
        bottom: 0;
        left: 0;
        color: white;
        text-shadow: 0px 1px 4px black;
    }
        #expeditioners figcaption h4 {
            text-align: center;
            font-size: 30pt;
            position: relative;
            color: white;
            text-shadow: 0px 0px 10px black;
            font-family: 'Exo', sans-serif;
            font-weight: 600;
        }
        #expeditioners figcaption p{
            position:relative;
            top: -250px;
            left: 250px;
            width: 230px;
        }

/* krekol and qulzad speech colours */
.qulzad{
    color: rgb(102, 204, 204);
}
.krekol{
    color: rgb(147, 215, 79);
}
/* object listings */
.risk-info {
    padding: 40px;
    padding-left: 200px;
    padding-right: 200px;
    text-align: center;
    background-color: rgb(74, 82, 92);
    margin-bottom: 20px;
    color: rgb(211, 218, 226);
    border-radius: 5px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.75);

}
.object-textbox {
    padding-left: 100px;
    padding-top: 50px;
    height: 300px;
    position: relative;
    border-radius: 5px;
    margin-bottom: 40px;
    background-image: url(obj-textbox.png);
}

.object-title {
    font-family: 'Audiowide', sans-serif;
    text-transform: uppercase;
    position: relative;
    left: 300px;
    top: -240px;
    width: 700px;
    font-size: 30pt;
    padding: 20px;
    color: rgb(255, 255, 255);
}

.obj-desc {
    color: rgb(191, 198, 207);
    position: relative;
    top: -260px;
    left: 300px;
    padding: 20px;
    width: 800px;
    line-height: 35px;
}

.comment {
    position: relative;
    top: -260px;
    left: 300px;
    padding-left:20px;
    width: 800px;
}

/* category section styles */

#low-risk {
    overflow: hidden;
}

#low-risk div{
    width: 1400px;
}
    #low-risk h2 {
        background-color: green;
        
        font-family: 'Fugaz One', cursive;
        text-transform: uppercase;
    }
    #low-risk figure::before {
        content: "";
        display: block;
        box-shadow: 0px 0px 10px rgb(85, 255, 0);
        background-color: rgb(149, 255, 97);
        height: 10px;
        width: 1400px;
        top: -8px;
        left: 0px;
        position: absolute;
    }
#medium-risk{
    overflow: hidden;
}

#medium-risk div {
    width: 1400px;
}
    #medium-risk h2 {
        background-color: rgb(154, 124, 0);
        font-family: 'Fugaz One', cursive;
        text-transform: uppercase;
    }
#medium-risk{
    overflow:hidden;
}
    #medium-risk figure::before {
        content: "";
        display: block;
        background-color: #ffff64;
        box-shadow: 0px 0px 10px yellow;
        height: 10px;
        width: 1400px;
        top: -8px;
        left: 0px;
        position: absolute;
    }
#high-risk div {
    width: 1400px;
}

#high-risk h2 {
    background-color: #900000;
    font-family: 'Fugaz One', cursive;
    text-transform: uppercase;
}
#high-risk figure::before {
    content: "";
    display: block;
    background-color: #ff0000;
    box-shadow: 0px 0px 10px red;
    height: 10px;
    width: 1400px;
    top: -8px;
    left: 0px;
    position: absolute;
}

/* footer styles */

footer {
    background-color: rgb(0, 0, 0, 1.00);
    color: white;
    text-align: center;
}

    footer h6, footer p {
        margin-bottom: 20px;
    }

    footer h6 {
        font-family: 'Autour One', cursive;
        font-weight: normal;
        font-size: 30px;
        text-transform: uppercase;
    }

        footer h6 a {
            color: white;
            font-family: 'Fugaz One', cursive;

            text-transform: uppercase;
        }

    footer a {
        color: #bbeeff;
    }