/** * Generic elements * **/ *{ box-sizing: border-box; } body{ background-color: rgb(14,14,14); background-image: url(../resources/background.png); background-size: cover; color: white; margin: 40px 10%; font-family: sans-serif; } h1{ font-size: 40px; font-weight: bold; margin-bottom: 5px; } h2{ text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px; } h3{ font-weight: bold; margin-bottom: 5px; } a{ text-decoration: none; color: darkgrey; } a:hover{ background-color: darkgrey; color: black; } p{ margin-bottom: 10px; } /** * General layout * **/ .section{ background-color: rgba(5,5,5,0.6); margin-bottom: 10px; padding: 30px; border: 1px solid rgba(255,255,255,0.15); } .row:after { content: ""; display: table; clear: both; } .column{ float: left; } .column.middle{ width: 75%; padding: 30px; min-height: 400px; } .column.right{ width: calc(25% - 10px); margin-left: 10px; } .column.right li::before{ content: "ยท "; } @media screen and (max-width: 1070px){ .column.middle{ width: 100%; margin-left: 0px; } .column.right { width: calc(50% - 5px); margin-left: 0px; margin-right: 10px; } .column.right:last-of-type{ margin-right: 0px; } } #footer{ padding: 20px; } /** * Page title * **/ #title{ margin-bottom: 10px; } #title img { display: none; float: left; /* overlap border */ transform: translateY(1px); } #title:after { content: ""; display: table; clear:both; } #title div { padding-top: 20px; } @media screen and (min-width: 800px){ #title{ margin-bottom:0; } #title img{ display: block; } } #menu{ padding:0; overflow: hidden; padding: 10px 15px; } #menu li{ float: left; } #lang-select { float: right; } #menu a{ /*display: block;*/ color: white; text-align: center; padding: 12px 15px; } #menu a:hover, #menu a.activated{ background: rgba(255,255,255,1); color: black }