* {
    box-sizing:border-box;
}

/*v All Pages Applicable Styles v*/

/* Navigation */
nav {
    background-color: #5c1f58;
    height: 100%;
    width:63px;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    flex-flow: column wrap;
    justify-content:center;
    align-items:center;
    z-index:100;
    text-align:center;
}

.nav-p {
    padding:0px;
    margin:0px;
    color:#f5eefe;
}

.nav-icons {
    width:30px;
}

.nav-divs {
    border-radius:10px;
    margin-top:10px;
    padding:5px;
    padding-bottom: 8px;
}

.nav-divs:hover {
    background-color: #230042;
}

/*Direct Element Styles*/

li, h1, h2, h3, h4, h5, h6, p, figcaption {
    color:#482158;
}

a {
    color: #f5eefe;
    text-decoration:none;
}

a:hover {
    color:#9e3d82;
}

li {
    list-style-type:none;
}

h1 {
    background-color:#5c1f58;
    border-radius:10px;
    padding:5px 15px;
    position:relative;
    left:35px;
    color:#f5eefe;
}

h2 {
    color:#f5eefe;
    background-color:#5c1f58;
    border-radius:10px;
    padding:5px 15px;
}

h3 {
    margin-left:20px;
}

h4 {
    align-self:flex-start;
    margin-top:15px;
    margin-bottom:5px;
    position:relative;
    left:10px;
}

body {
    background-color: #230042;
    font-family: "Lucinda", sans-serif;
}

header {
    display:flex;
    justify-content:center;
    align-items:center;
}

/*Classes*/

.main {
    border-radius: 10px;
    margin-left:65px;
}

.article-div {
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding:10px;
    border: solid 2px #f5eefe;
    margin:5px;
    margin-bottom:10px;
    width:300px;
}

.article-div:hover {
    border: solid 2px #9e3d82;
}

.article-thumbnail {
    max-width: 275px;
    min-width:100px;
    border-radius:10px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    
}

.about-article {
    background-color: #f5eefe;
    border-radius:10px;
    padding:5px;
    position:relative;
    margin-top:10px;
}

.about-paragraph {
    margin-left:20px;
    margin-right:10px;
}


.featured {
    background-color: #f5eefe;
    border-radius:10px;
    padding:5px;
    margin-top:5px;
    margin-bottom:10px;
    position:relative;
}

.discover-section { 
    background-color: #f5eefe;
    border-radius:10px;
    padding:5px;
    position:relative;
}

.discover-articles {
    display:flex;
    justify-content:space-around;
    align-items:center;
    flex-flow:row wrap;
    position:relative;
}

.featured-articles {
    display:flex;
    justify-content:space-around;
    align-items:center;
    flex-flow:row wrap;
    align-content:space-between;
}

.article-descrip {
    max-width: 275px;
}

.footer {
    border-radius: 10px;
    margin-top: 5px;
    margin-left:65px;
    position:relative;
    display:flex;
    flex-flow:column wrap;
    justify-content:center;
    align-items:flex-start;
    height:150px;
}

.footer-ul {
    padding-left:10px;
    line-height: 2;
    margin:5px;
}

/*ID's*/

#head-logo {
    width:200px;
    position:absolute;
    left:85px;
}

#foot-logo {
    width:200px;
    align-self:flex-end;
    position:relative;
    right:5px;
    margin:10px;
}

/*^ All Pages Applicable Styles ^*/
/*v Project Pages Applicable Styles v*/

/*Direct Element Styles*/

button {
    display:block; 
    margin: 0 auto;
    font-size: 20px;
    color: #f5eefe;
    border: 0px solid #f5eefe;
    background-color: #5c1f58;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 5px 5px #230042;
}

button:hover {
    opacity: 70%;
}

/*---------------------------------This needs to be uncommented and designed further when Mixed Messages Form Generator Done - Make it scalable for all other website forms

input[type=text] {
    margin-bottom:15px;
    border-radius:5px;
    border: solid 1px #230042;
    background-color: #f5eefe;
}

input[type=submit] {
    border: 0px solid #f5eefe;
    background-color: #aa58a2;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 5px 5px #230042;
    border: none;
    cursor: pointer;
    margin-top:10px;
}
*/

/*Classes*/

.project-main {
    background-color: #f5eefe;
    margin:10px;
    border-radius: 10px;
    display:flex;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-items:center;
    padding:20px;
    margin-left:65px;
}

.project-title {
    margin-top:0px;
}

.project-description {
    width:100%;
}

.project-in-article-title {
    margin-left:0px;
    font-size: 22px;
}

.project-in-article-list {    
    color: #aa58a2;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin-left:25px;
    font-size: 14px;
}

.generator {
    background-color: #f5eefe;
    padding:10px;
    border-radius: 10px;
    align-self:flex-end;
    flex-grow:1;
    /*margin-top:50px;*/
    border:#230042 solid 3px;
}

.generator-text {
    color:#230042;
    margin-left:10px;
}

.generator-output {
    border:#230042 1px solid;
    background-color: #230042;
    color:#f5eefe;
    min-height:40px;
    padding: 10px;
    border-radius:10px;
    text-align: center;
    position:static;
    margin-top:20px;
}

/* ID's*/

/*Mixed Messages Specific Start*/
#mixed-messages-basic-generator {
    margin-top:30px;
}

/*____________________________Fix this visibility after JS complete_______________________________*/
#mixed-messages-form-generator {
    visibility: hidden;
    position:absolute;
}
/*Mixed Messages Specific End*/




/*^ Project Pages Applicable Styles ^*/

/*Media inquiries*/

@media screen and (max-width: 1421px) {

    .game-thumbnail{
        max-width: 350px;
    }
    
    #descrip {
        max-width: 350px;
  }
}

@media screen and (max-width: 763px) {

    h1 {
        visibility: hidden;
    }
}

@media screen and (max-width: 600px) {
    
    body {
        overflow:scroll;
    }

    main {
        min-width: 475px;
    }

}