/* 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; border-collapse: collapse text-align: center; } @media only screen and (max-width: 1024px) { #menu { border-top: 2px solid blue; border-bottom: 2px solid blue; margin: 10px 0; } #menu ul { display: table; margin: 0 auto; padding: 0; width: 80%; text-align: center; } #menu ul li{ display: table-cell; min-width: 150px; border-right: 2px solid blue; } @media only screen and (max-width: 600px:) { #menu ul li { min-width: 50px; } } #menu ul li:first-child{ border-left:2px solid orange; } #menu ul li a{ display: block; width: 100%; padding: 10px 0; text-decoration: none; color: #000; font-size: large; font-weight: bold; } #menu ul li a:hover{ backgroud-color: red; border-bottom: 0 solid green; } } @media only screen and (max-width:480px) { #menu { margin: 10px 2em; } #menu ul { padding: 0; position: relative; } #menu ul li { 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 ul li a { display: block; width: 100%; margin: 0 10px; color: #000; font-weight: bold; } #menu ul li: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%; }