/* styles for my form exercise */

*{
padding:0;
margin:0;
box-sizing:border-box
}

/* I AM ADDING PADDING TO MY BODY FOR DEMONSTRATION PURPOSES ONLY: DO NOT KEEP PADDING, ONCE YOU START THE HW */
body{
    /* background-color:lightgray; */
    /* padding:100px; */
}


#wrapper{
    width:940px;
    margin:30px auto;
}

main{
    width:580px;
    float:left;
}

aside{
    width:360px;
    float:right;
    padding:15px;
}

footer {
    clear:both;
    height:60px;
    line-height: 60px;
    display: flex;
    border-top:1px dotted #800;
}

footer ul {
    display:flex;
}

footer li {
    /* list-style-type: none; */
    margin-right: 30px;
    float:left;
    color:gray;
}

footer a{
    color: gray;

}

/* MY FORM STYLES */
form{
    max-width: 580px;
    margin-bottom:20px;
}

fieldset{
    padding:10px;
    border-radius:5px;
    border:1px dotted #800;
}

fieldset a{
    color: #800;
    font-weight: bold;
}


legend{
    font-size:1.3em;
    font-style: italic;
    padding:0 5px;
}


label{
    display: block;
    margin-bottom:5px;
    font-weight:bold;
    font-size:  1.1em;
}

input{
    margin-bottom:10px;
    height:30px;
    width:100%
}


/* THIS FORCES TTHE SUBMIT INPUT TO BEHAVE DIFFERENTLY THAN THE OTHER INPUTS */
input[type="submit"]{
width:auto;
}
/* BRACKETS [] INDICATE AN EXCEPTION...ALL INPUTS EXCEPT DEFINED ABOVE EXCEPT FOR RADIO INPUTS WHICH HAVE THOSE DEFINED BELOW */
input[type=radio],

input[type=checkbox]{
    height:auto;
    width:auto;
    margin-right:3px;
    margin-bottom:3px;
}
/* NO SPACES WITH ATTRIBUTE SELECTORS[] */
input[type=submit]{
    width:auto;
}


form ul{
    margin-left: 15px;
    margin-bottom:10px;
}

form li{
    list-style-type:none;
}

select{
    margin-bottom:10px;
}

textarea{
    width: 100%;
    height:120px;
    margin-bottom:10px;
}

figure{
    margin-top: 15px;
}

img{
    max-width: 100%;
    display: block;
}

h1 {
    color:#800;
    font-size: 3em;
    margin-bottom:12px;
    
}

h3{
    color:black;
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 8px;
}