@charset "utf-8";

*{
    margin: 0px;
    padding: 0px;
}

#container {
    width: 100%;
}

body {
    background-color: #7e3a3d;
    font-family: Georgia, "Times New Roman", serif;
    color: #0d0d12;
    line-height: 1.5;
}


/**********/
/* Header */
/**********/

header {
    background-color: #2f2936;
    color: #e3b097;
    text-align: center;
    padding : 5px;
    width: 100%;
}

/*********/
/*  Main */
/*********/

main {
    margin-top: 10px;
    width: 100%;
    background-color: #2f2936;
    color: #e3b097;
    padding: 5px;
}

main h2, h3, ul, ol, li, p {
    width: 90%;
    margin-left: 5%;
}

main a:link, main a:visited {
    color: #d05a42;
    text-decoration: none;
}

main a:hover {
    color: #d05a42;
    text-decoration: underline;
}
/***********/
/* Nav Bar */
/***********/

nav {
    display: none;
}

/**********/
/* Footer */
/**********/

footer {
    clear: both;
    margin-top: 10px;
    background-color: #2f2936;
    color: #e3b097;
    text-align: center;
    padding: 5px;
    font-size: 12pt;
    width: 100%;
}

footer a:link {
    color: #e3b097;
    text-decoration: none;
}

footer a:visited {
    color: #e3b097;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}


/**************/
/* To Do List */
/**************/

#todo-list {
    list-style: none;
    padding-left: 10px;
    width: 250px;
}

ul#todo-list li {
    display: block;
    color: #0d0d12;
    font-size: 1.2em;
    background-color: #e3b097;
    padding: 5px;
    margin: 5px;
    border-radius: 2px;
    border-color:#0d0d12;
}

form {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #7e3a3d;
    background-color: #e3b097;
    padding: 10px;
    border: outset;
}

input, select, option, textarea {
    display: block;
    border: 1px solid #0d0d12;
    font-family: Verdana, Tahoma, sans-serif;
}

input[type=radio], input[type=checkbox] {
    display: inline-block;
    padding: 25px;
}

button/*, input[type=submit], input[type=reset]*/ {
    margin-top: 20px;
    padding: 10px;
    font-weight: bold;
    background-color: #e3b097;
    color: #2f2936;
}

input[type=number] {
    background-color: #e3b097;
    color: #2f2936;
}

@media only screen and (min-width: 768px) {
    
    header {
        display: block;
        margin-top: 10px;
        width: 80%;
        margin-left: 10%;
        border: 5px ridge #e3b097;
    }
    
    nav {
        display: block;
        float: left;
        color: #e3b097;
        padding: 5px;
        width: 10%;
        margin-left: 5%;
        font-weight: bold;
        margin-top: 10px;
    }
    
        nav ul {
        list-style: none;
    }
    
        nav ul li {
        float: left;
        padding: 5px;
    }
    
        nav ul li a:link, nav ul li a:visited {
        display: block;
        width: 150px;
        margin-right: 4px;
        color: #e3b097;
        padding: 2px 4px 2px 4px;
        background-color: #2f2936;
        text-decoration: none;
    }
    
        nav ul li a:hover {
        color: #2f2936;
        background-color: #e3b097;
    }
    
    main {
        display: block;
        width: 65%;
        margin-right: 5%;
        float: right;
    }

    form {
        width: 80%;
        margin-left: 10%;

    }
}