@charset "UTF-8"; /* CSS Document */ body { background-image:url(images/pokla-dot-background.png) ; margin: 0; padding: 0; font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: white; text-align: center; } a { color: rgb(176, 238, 250); } #main-logo { margin-left: auto; margin-right: auto; margin-top: 20px; } .nav { background:url(images/red-yellow-stripes.png) repeat-x; margin-left: 0; margin-right: 0; width: 100%; text-align: center; vertical-align: middle; min-height: 83px; min-width: 320px; } .nav img { margin-left: 10px; margin-right: 10px; } .nav-mobile { height: 9%; } #nav-mobile-top, #nav-desktop { margin-top: 20px; } #nav-mobile-bottom { margin-top: 4%; } #nav-buttons-desktop { margin-left: auto; margin-right: auto; } #nav-buttons-mobile-top, #nav-buttons-mobile-bottom, #footer { width: 100%; min-width: 320px; } #about { width: 500px; margin: 180px auto 500px auto; text-align: center; min-width: 320px; } /* mobile only */ @media all and (max-width: 800px) { #nav-desktop { display: none; } .nav { background-size: 4%; min-height: 80%; } .nav img { margin-left: 10px; margin-right: 10px; max-width: 20%; /* margin-top: 4% */ } #main-logo { min-width: 300px; max-width: 574px; } #main-logo img { width: 80%; height: 80%; } #about { width: 100%; } #about img { width: 80% } } @media all and (min-width: 600px) { .nav { background-size: auto auto; } } /* desktop only */ @media all and (min-width: 801px) { .nav-mobile { display: none; } #nav-buttons-desktop { width: 800px; } #nav-buttons-desktop img { width: 109px; } }