@charset "utf-8";



body {
   font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    color: #555;
    background-color: #ffd3df;
    margin: 0px;
    font-size: 20px;
    text-align: left;
    line-height: 28px;
    padding: 10px;
}

h1,h2 {
    font-family: Fuzzy Bubbles, Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    color: #FFD3DF;
    line-height: 32px;
    font-size: 36px;
    }


h3 {
    font-family: Fuzzy Bubbles, Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    color: #fd5d8f;
    line-height: 32px;
    font-size: 36px;
}
h4 {
    font-family: Fuzzy Bubbles, Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    color: #Fd5d8f;
    line-height: 28px;
    font-size: 20
}

/*LINK STYLES*/

a:link {
    color: #Fd5d8f;
    font-weight: 600;
    text-decoration: none;
}
a:visited {
    color: #ff9d60;
}

a:focus {
    color: #6A00D5;
    text-decoration: underline;
}

a:hover {
   color: #6A00D5;
    text-decoration: underline;
}

a:active {
    color: #fd5d8f;
}


.message-bar {
width: 100%;
margin: 0;
padding: 1em;
color: #fff;
background-color: #ff9900;
text-align: center;
}





/*HEADER STYLES*/
header {
    text-align: center;
    background-color: #ffd3df;
    margin: 0px;
    padding: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*NAV STYLES*/
nav {
    background-color: #ffc89a;
    padding: 5px;
    margin-bottom: 20px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
nav li {
    display: inline;
    margin-right: 58px;
}
nav a {
    text-transform: uppercase;
}
nav a:hover, 
nav a:focus {
    color: #fff4ef;
    text-decoration: none;
}

/*MAIN STYLES*/
main {
    background-color: #FFF4EF;
    padding: 4px 32px 24px;
    width: 68%; /*680px*/
    float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
    min-height: 342px;
}

.full-width-main {
    width: 100%;
}

/*ASIDE STYLES*/
aside {
    Background-color: #fff4ef;
    padding: 4px 32px 24px;
    width: 30%; /*300px*/
    float: right;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
  
}


/*FOOTER STYLES*/
footer {
    clear: both;
    text-align: center;
    padding: 0px;
    width: 1000px;
    margin-bottom: 20px;
     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
}

/*IMAGE STYLES*/
.float-left {
    float: left;
    margin-right: 20px;
     margin-bottom: 20px;
}

.float-right {
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
}

#container {
    display: flex;
    justify-content: center;
    align-items: center;
   height:auto;
    max-width: auto;
    background-color: #fff4ef;
}
#container div {
    height: auto;
    max-width: 40%;
  background-color: #ffd3df;
    margin: 10px;
    text-align: center;
    justify-content: center;
}
.center {
display: block;
  margin-left: 20px;
  margin-right: 20px;
  width: auto;
}

/*BUTTON STYLES*/

.button:link,
.button:visited {
    color: #fff4ef;
    background-color: #fd5d8f;
    text-decoration: none;
    padding: 15px;
     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    margin:20px;
    text-align: center;
}
.button:focus,
.button:hover
{
    background-color: #ff9d60;
    text-decoration: none;
}
.button:active 
{
    background-color: #fd5d8f;
}

/*TABLE STYLES*/
table{
    width: 100%;
}
td, tr, th {
    border: 3px solid #fd5d8f;
    padding: 1em;
    vertical-align: top;
    text-align: left;
}
th {
    font-family: Fuzzy Bubbles, Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    color: #fff4ef;
    background-color: #ff9d60;
}
tr, td {
    background-color: #ffc89a;
    color: #fff4ef;
    
}

/*FORM STYLES*/
label {
    text-align: left;
    float:left;
    padding-right: 0.5em;
    width: 25%
}
.textbox {
    width: 70%;
    padding: 0.5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#leftcontainer {
    float: left;
}
#rightcontainer {
    float: right;
}

#centercontainer {
    align-content: center;
}






/*CUSTOM STYLES*/
#wrapper { max-width: 1000px;
    margin: auto;
}
.light-pink-background {
    background-color: #fd5d8f;
    padding: 10px;
} 

.light-yellow-background {
    background-color: #ffe7cf;
    padding: 10px;
    
} 


/*MEDIA QUERIES*/
/*48em (768px and smaller)*/

@media screen and (max-width:48em) 
    {
    main {
        width: 100%;
       
    }
    aside {
        width: 100%;
        padding: 4px 32px 24px;
    }
        footer {
            width: 100%
        }
}



/*20em (320px and smaller)*/
@media screen and (max-width: 20em)
{
    main {
        padding: 0.125em 0.5em 0.25em;
    }
    
    aside {
        padding: 0.125em 0.5em 0.25em;
    }
}

/*40em (640px and smaller)*/
@media screen and (max-width: 40em){
.float-left,
    .float-right {
    width: 100%;
    }
}