/* 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 #ffff7f; border-collapse: collapse } table { margin: 10px; text-align: center; } table tr td { 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%; }