* { box-sizing: border-box; } html { font-family: 'Roboto', arial; } body { background-color: #111725; } a { color: white; font-size: 20px; /*text-shadow: 1px 1px 1px #aaa;*/ } p { color: white; font-size: 20px; padding: 10px; } .button { background-color: white; color: black; border-radius: 10px; display: inline-block; margin: 4px auto; cursor: pointer; text-align: center; padding: 15px; text-decoration: none; box-shadow: 2px 2px 4px black; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } .button:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); } .row { margin:auto; } .gallerystrip img { height: auto; border: 6px solid #484c55; margin: 5px; box-shadow: 7px 7px 8px #000000; } div.gallerystrip { width: 100%; margin: auto; margin-top: 15px; } div.profile { background-color: #041617; height: auto; margin-top: 10px; border: 8px solid #1a2324; border-radius: 6px; box-shadow: 7px 7px 8px #000000; } div.profile img { border-radius: 50%; display: block; margin-top: 10px; margin-left: auto; margin-right: auto; margin-bottom: 10px; border: 8px solid #404c4d; box-shadow: 2px 6px 2px #888888; } a.title { color: white; font-size: 14vw; font-family: 'Megrim', arial; text-shadow: 2px 2px 2px #aaa; font-weight: bold; display: block; text-decoration: none; background-color: #070c1a; padding: 0px; width: 45vw; height: 18vw; text-align: center; margin: auto; box-shadow: 4px 4px 8px #000000; } div.card { background-color: grey; box-shadow: 4px 4px 8px black; padding: 10px; margin: 5px; border-radius: 3px; } div.card h1 { text-align: center; color: white; text-shadow: 1px 1px 2px #4f4f4f; } .card img { width: 100%; border-radius: 3px; margin-bottom: 8px; box-shadow: 2px 2px 2px black; } .card p { margin-top: 20px; } h1.sectiontitle { text-align:center; color: white; font-family: 'Megrim', sans-serif; } ul.navbar { list-style-type: none; border-radius: 5px 15px; box-shadow: 5px 5px grey; margin: 10px; padding: 0; overflow: hidden; background-color: #1e2028; } ul.navbar li { float: left; position: -webkit-sticky; position: sticky; top: 0; } ul.navbar li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; -webkit-transition: background-color 0.4s; transition: background-color 0.4s; } ul.navbar a:hover { background-color: #00030a; } ul.navbar li.right {float: right;} footer p { text-align: right; font-size: 12px; } footer a { margin-top: 10px; margin-bottom: 10px; text-align: right; display: block; color: grey; font-size: 12px; } @media only screen and (max-width: 600px) { ul.navbar li.right, ul.navbar li {float: none;} } [class*="col-"] { float: left; width: 100%; } @media only screen and (min-width: 768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} /* For desktop: */ .col-pad-3 {width: calc(25% - 10px);} .col-pad-4 {width: calc(33.33% - 10px);} .col-pad-5 {width: 41.66%;} .col-pad-6 {width: calc(50% - 10px);} .col-pad-7 {width: 58.33%;} .col-pad-8 {width: 66.66%;} .col-pad-9 {width: 75%;} .col-pad-10 {width: 83.33%;} .col-pad-11 {width: 91.66%;} .col-pad-12 {width: calc(100% - 10px);} } .row::after { content: ""; clear: both; display: table; }