* { 
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

body, html {
    background-color: #18020C;
    color: #cc92c2;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 25%;  
    
}

#wrapper {
    width: 1900px;
    margin-left: auto;
    margin-right: auto;
}

article {
    position: relative;
    display: flex;
    flex-flow: row wrap;
}

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    display: flex;
    background-color: #cc92c2;
    max-height: 125px;
    min-width: 100%;
    margin-bottom: 10%;
    background-image: linear-gradient(to left, rgba(104, 103, 103, 0.5), rgba(0, 0, 0, 0.9)), url(../images/nick-owuor-astro-nic-portraits-wDifg5xc9Z4-unsplash.jpg);
    background-size: cover;
    background-position: right;
}

nav a {
    display: inline-block;
    justify-content: center;
    border: solid #cc92c2;
    padding: .5% .5% 2% .5%;
    border-radius: 25%;
    margin: 20px 20px;
    background-color: #634B66;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 12pt;
    text-align: center;
    text-transform: uppercase;
    color: #FCF0cc;
    text-decoration: none;
}

#nav {
    position: relative;
    display: flex;
    background-color: #cc92c2;
    max-height: 250px;
    min-width: 100%;
    margin-bottom: 8%;
    background-image: linear-gradient(to left, rgba(104, 103, 103, 0.5), rgba(0, 0, 0, 0.9)), url(../images/nick-owuor-astro-nic-portraits-wDifg5xc9Z4-unsplash.jpg);
    background-size: cover;
    background-position: right;
}


/* Creates hover effect for nav buttons */
nav a:hover {
    border-color: #78c0e0;
    color: black;
    background: url('https://api.iconify.design/pixelarticons/moon.svg') no-repeat center center / contain;
    background-color: rgb(117, 192, 224, 0.6);
    background-size: 35px;
    background-position: bottom;
}

article div {
    max-width: 74%;
    height: 25%;
    border: 6px solid #cc92c2;
    padding: 7.5%;
    background-color: #fcf0cc;
    color: #634b66;
    font-weight: bold;
    line-height: 1.3;
}


h1 {
    text-align: center;
    font-size: 5em;
    color: #78c0e0;
    /* border-bottom: 4px solid #cc92c2; */
    background: #18020c;
    font-family: 'pixelify sans', sans-serif;
    text-shadow: 1px 1px 5px #cc92c2;
}


p { 
    font-size: 1em;
    color: #78c0e0;
    padding: 1% 0;
    text-shadow: 1px 1px 1px #cc92c2;
    text-align: center;
    text-transform: capitalize;
}


div img {
    position: relative; 
    max-width: 100%; 
    border: 6px solid #cc92c2; 
    border-radius: 0 30px 30px 0;
    overflow: hidden;
}

#feedback {
    width: 70%; height: auto;
    position: absolute; top: 150%; right: 15%;
    font-size: 2em;
    text-align: center;
}