/* 2019's terakotta css */

/* body */
body {
margin: 0;
padding: 0;
background-color: #ffff7f;
}

/* header */
header {
text-align: center;
margin: 0 auto;
}

header img{
width: 100%;
}


/* menu */

table, tr, td {
border: 1px solid orange; border-collapse: collapse
}

table {
text-align: center;
}

table tr td {
padding: 10px 0;
border-left: 3px dotted green;
border-right: 3px dotted green;
background-color: pink;
}


@media only screen and (max-width:480px) {

#menu {
margin: 10px 2em;
}

#menu tr {
padding: 0;
position: relative;
}

#menu tr td {
color: black;
border-left: solid 8px orange;
backgroud: white;
margin-bottom: 5px;
line-height: 1.5;
padding: 0.5em;
list-style-type: none!important;
}

#menu tr td a {
display: block;
width: 100%;
margin: 0 10px;
color: #000;
font-weight: bold;
}

#menu tr td:hover{
background-color: pink;
}
}




h2 {
font-size: x-large;
}

h3 {
font-size: large;
}

/* div.box-text */

img.img-left{
    padding: 3ex 0;
    float:left;
}

img.img-right{
    padding: 3ex 0;
    float:left;
}

div.box-text-left{
    background: #fff;
    border:dotted 5px green;
    border-radius: 3em 3em;
    margin:2em 1ex;
    padding: 2ex 1ex;
    float:left;
    width:380px;
}

div.box-text-right{
    background: #fff;
    border:dotted 5px pink;
    border-radius: 3em 3em;
    margin:2em 1ex;
    padding: 2ex 1ex;
    float:right;
    width:380px;
}

div.box-text-right-border-none{
    background: #fff;
    margin:1ex;
    padding: 2.2ex 1ex;
    float:right;
    width:400px;
}

div.text-left{
    float:left;
    width:700px;
}

div.text-right{
    float:right;
    width:700px;
}

a {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}


/* footer */

footer{
clear: both;
background-color: #372F2D;
position: relative;
bottom: 0;
margin: 0.5ex;
padding: 0.5ex;
font-size: small;
color: white;
text-align: center;
}

html {
height: 100%;
}

body {
height: 100%;
}

#menu {
height: 100%;
}