/* FLUKEFORGE - flukeforge.css
   Jaden Fluker
   Web 150
   Final Project */

* { box-sizing: border-box; }

img {
    max-width: 100%;
    height: auto;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: thin solid black;
    overflow: hidden;
}

header {
    background-color: #222222;
    color: white;
    margin: 10px;
    padding: 10px;
}

header h1 {
    color: #ff6600;
}

header p {
    color: #cccccc;
}

nav {
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #333333;
}

nav > div {
    flex: 1;
    padding: 10px 4px;
    font-size: 14px;
}

nav > div > a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    display: block;
}

nav > div > a:hover {
    color: #ff6600;
    text-decoration: underline;
}

#banner {
    background-color: #333333;
    color: white;
    text-align: center;
    padding: 40px;
    margin: 10px;
}

#banner h2 {
    color: white;
}

#banner p {
    color: #cccccc;
}

#banner a {
    background-color: #ff6600;
    color: white;
    text-decoration: none;
    padding: 10px 24px;
    font-weight: bold;
}

#banner a:hover {
    background-color: #cc5200;
}

main {
    display: flex;
}

main > div {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 10px;
}

.left {
    flex: 2;
}

.right {
    flex: 1;
    border: 1px solid #dddddd;
    background-color: white;
}

#program-images {
    display: flex;
}

#program-images figure {
    flex: 1;
    margin: 5px;
    text-align: center;
}

#program-images img {
    width: 100%;
    height: auto;
    border: 1px solid #dddddd;
}

#program-images figcaption {
    font-size: 0.85em;
    font-weight: bold;
}

.about-img {
    float: right;
    width: 35%;
    margin: 0 0 10px 16px;
    text-align: center;
}

.clearboth {
    clear: both;
}

.right a {
    color: steelblue;
    text-decoration: none;
}

.right a:hover {
    color: royalblue;
    text-decoration: underline;
}

#cta-box {
    background-color: #ff6600;
    padding: 14px;
    text-align: center;
    margin-top: 16px;
}

#cta-box p {
    color: white;
    font-weight: bold;
}

#cta-box a {
    background-color: #222222;
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    font-weight: bold;
}

#cta-box a:hover {
    background-color: #444444;
}

footer {
    background-color: gainsboro;
    margin: 10px;
    padding: 10px;
}

footer p {
    text-align: center;
}

@media only screen and (max-width: 900px) {
    #wrapper {
        width: 100%;
        border: none;
    }
}

@media only screen and (max-width: 510px) {
    nav {
        flex-direction: column;
    }
    main {
        flex-direction: column;
    }
    nav > div {
        width: auto;
    }
    main > div {
        margin: 5px;
    }
    #program-images {
        flex-direction: column;
    }
    #banner {
        padding: 20px;
    }
    .about-img {
        float: none;
        width: 100%;
        margin: 0 0 10px 0;
    }
}