* {
    box-sizing: border-box;
}
/* Large Display */
@media (min-width: 1024px) {
    nav li {display: block;}
    nav {float: left;}
    #allPage {
        width: 100%;
        margin: auto;
        max-width: 1200px;
    }
    main {float: left;
        width: 65%;
    }
    footer {clear: both;}
    
}

/* Medium Display */
@media (min-width: 600px) {
    nav li {display: block;}
    nav {float: left;}
    #allPage {
        width: 100%;
        margin: auto;
        max-width: 1200px;
    }
    main {float: left;
        width: 65%;
    }
    footer {clear: both;}
}

#form {width: 100%;}

body {font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color:#191310
}

h1 {padding-bottom: 5px;
}

#allPage {
    background-color: #47454A;
}

header{
    color: #FFFFFF;
    background-color: #191310;
    background-image: url("../images/previous/FP/sLogo.jpg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    font-style: oblique;
    padding: 0.5em 0 0.5em 5.5em;
}

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

main {
    color: #FFFFFF;
    padding: 25px;
}

aside {
    margin-top: 80px;
    text-align: center;
    color: #FFFFFF;
}
#info {
    padding-right: 30px;
}
footer {
    background-image: url("../../../images/PreviousSemester/FP/fLogo.jpg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    color: #FFFFFF;
    background-color: #191310;
    text-align: center;
    font-size: xx-small;
    padding: 0.1em;
}

nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

nav li {
    padding-top: 0px;
    padding-bottom: 0px;
    display: inline-block;
    margin-left: 30px;
    position: relative;
}

nav a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bolder;
    text-transform: uppercase;
}

nav a:hover {color: #D9EB37;}

nav a::before {
    content: "";
    display: block;
    height: 5px;
    background-color: #D9EB37;
    margin-bottom: 10px;
    padding-top: 0px;
    width: 0px;
    transition: all ease-in-out 300ms;
}

nav a:hover::before {
    width: 100%;
}

nav #page {
    color: #FFFFFF;
    font-weight: bolder;
}

fieldset {
    margin-bottom: 15px;
    border-radius: 10px;
    border-color: #D9EB37;
    box-shadow: 5px 5px 5px #D9EB37;
    padding: 6px;
}
label {
    float: left;
    text-align: right;
    margin-bottom: 15px;
    margin-left: 20px;
}
input {
    margin-left: 10px;
}
#colorID1 {
    color: #D9EB37;
    font-size: large;
    margin-left: 0px;
}
#colorID2 {
    color: #D9EB37;
    font-size: large;
    margin-left: 0px;
}
#colorID3 {
    color: #D9EB37;
    font-size: large;
    margin-left: 0px;
}
#colorID4 {
    color: #D9EB37;
    font-size: large;
    margin-left: 0px;
}
#message1 {
    font-size: medium;
    text-align: center;
    color: #FFFFFF;
}
#message2 {
    font-size: medium;
    text-align: center;
    color: #FFFFFF;
}
textarea {
    padding-left: 5px;
    margin-left: 10px;
}
#gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    grid-template-rows: auto;
    grid-gap: 2em;
    gap: 2em;
}
img {
    margin: 1em;
    box-shadow: 10px 10px 10px #D9EB37;
    border-radius: 10px;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

#banner {
    padding-left: 270px;
}

#secMain {
    width: 100%;
    
}
a:hover {
    color: #FFFFFF;
}