/*
File Name: final.css
Date: 09/03/19 
Programmer: Lex Rule
*/

body { 
        background-color: #5BA8AE;
        color: #363636;
        font-family: Arial, sans-serif; 
}

header { 
    background-color: #ffffff;
}

nav { 
    font-weight: bold;
    font-family: Courier New, monospace; 
    background-color: #E3DFC5;
    padding-top: .5em;
    padding-right: .5em;
    padding-bottom: .5em;
    padding-left: 2em;
    text-align: center;
}

nav a {
    text-decoration: none; 
}

nav a:link {color: #595528;}
nav a:visited {color: #363636;}
nav a:hover {color: #5BA8AE;}

main {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
    padding-bottom: 1em;
}

h1 {  color: #5BA8AE;
    font-family: Times New Roman, Times, serif;
    text-align: center;
}

h2 { 
    color: #595528;
    font-family: Courier New, monospace;
    text-align: left;
}

h3 {
    
    color: #5BA8AE;
    font-family: Times New Roman, Times, serif;
    text-align: center;
        
}

footer { 
        background-color: #E3DFC5;
        color: #595528;
        font-family: Arial, sans-serif;
        font-size: .60em;
        font-style: italic; 
        text-align: center;
        margin-top: 2em;
        padding: 1em;
}


#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1em;
    padding-bottom: 1em;
}

#sign-up {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1em;
    padding-bottom: 1em;
}

#home-hero { 
    background-image: url(../images/portland_historical_tours.jpg);
    height: 300px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#downtown-hero { 
    background-image: url(../images/downtown_tour.png);
    height: 300px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#albina-hero { 
    background-image: url(../images/albina_tour.png);
    height: 300px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#landmarks-hero { 
    background-image: url(../images/landmarks_tour.png);
    height: 300px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.downtown-tour {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    
}

.albina-tour {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

#wrapper {
        background-color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        min-width: 700px;
        max-width: 1024px;
        box-shadow: 1px 1px 1px;
}

a {
    text-decoration: none;
}

a:link {color: #595528;}
a:visited {color: #363636;}
a:hover {color: #5BA8AE;}

table {
        width: 60%;
        margin: auto;
        border: 1px solid #3F2860;
        border-collapse: collapse;
        margin-bottom: 1em;
        margin-top: 1em;
    }
    
td {
        padding: 5px;
        border: 1px solid black;       
}

th {
    padding: 5px;
    border: 1px solid black;
    background-color:#5BA8AE;
}

label {
    float: left;
    display: block;
    width: 8em;
    padding-right: 1em;
    padding-left: 1em;
}

input {
    display: block;
    margin-bottom: 1em;
}

select {
    margin-bottom: 2em;
}

textarea {
    display: block;
    margin-bottom: 2em;
}

#mySubmit {
    margin-left: 10em;
}

#mobile {
        display: none;
}

#desktop {
        display: inline;
}

@media only screen and (max-width: 1024px) {
    
        body {
            margin: 0;
            padding: 0;
        }
    
        #wrapper {
            width: auto;
            min-width: 0;
            margin: 0;
            padding: 0;
        }
    
        nav a {
            display: block;
            float: none;
            padding-top: .5em;
            padding-bottom: .5em;
            border-bottom: dotted 1px #5BA8AE;         
        }

        header {
            padding-top: 1px;
        }
    
        h1 {
            padding-top: 1em;
        }
    
        main {
            padding: 2em;
            margin: 1em;
            font-size: 90%;
        }
    
          #mobile {
            display: inline;
        }
    
        #desktop {
            display: none;
        }

}

@media only screen and (max-width: 768px) {
    
        h1 {
            font-size: 2em;
            padding-top: 0.25em;
            padding-left: 1.5em;
            width: 85%;
            text-align: center;
        }
    
        header {
            padding: 0;
        }
    
        nav {
            padding: 0;
        }
        
        nav a {
            display: block;
            float: none;
            padding-top: .5em;
            padding-bottom: .5em;
            border-bottom: dotted 1px #7BC0E0;         
        }
    
        main {
            padding-top: 0.2em;
            padding-right: 0.4em;
            padding-bottom: 0.2em;
            padding-left: 0.4em; 
        }
    
        footer {
            padding: 0.5em;
            margin: 0;
        }
    
        table {
        overflow-x: auto;
        display: block;
        }
        #mobile {
            display: inline;
        }
    
        #desktop {
            display: none;
        }
}