/*
This demo CSS is minified to prevent misuse.
The purchased version includes a clear, fully readable CSS file.
Buy this layout: ko-fi.com/itinerae/shop
*/

* {margin: 0;padding: 0;box-sizing: border-box;}@keyframes bg-scrolling-reverse {0% {background-position: 0 0;}100% {background-position: -200px -200px;}}body {margin: 0;padding:10px;display: flex;justify-content: center;align-items: center;min-height: 100vh;font-family: 'lato', calibri, sans-serif;color: #666;font-size: 9px;letter-spacing: 1px;text-shadow: 0px 0px 1px #bbb;background: #f5f5f5 url(https://itinerae.neocities.org/premium/5bg.png);-webkit-animation: bg-scrolling-reverse 1.5s infinite linear;animation: bg-scrolling-reverse 1.5s infinite linear;}a:link,a:visited,a:active {color: #222;text-decoration: none;}a:hover {color: #888;}::-webkit-scrollbar-thumb {background-color: #fff;border:1px solid #888;border-radius: 3px;}::-webkit-scrollbar {width: 5px;height: 0px;background: transparent;}.container {display: flex;flex-direction: column;width: 715px;background: #e6e6e6;border-radius: 5px;box-shadow: 0 12px 24px rgba(0,0,0,0.2), inset 0 -4px 10px rgba(255,255,255,0.5);overflow: hidden;border:1px solid #888;}.layout {display: flex;gap: 5px;}.sitename {width: 100%;text-align: left;font-family: 'doto', sans-serif;font-size: 20px;line-height:30px;letter-spacing: 5px;color: #333;padding: 8px 15px;border-bottom: 2px solid #ccc;text-shadow: 5px 5px 5px #fff;background: linear-gradient(145deg, #dcdcdc, #fff);}.navigation {display: flex;justify-content: center;gap: 5px;padding: 5px 0;background: linear-gradient(145deg, #dcdcdc, #dedede);border-bottom: 2px solid #ccc;box-shadow: inset 0 2px 5px rgba(255,255,255,0.4);}.navigation a {display: inline-block;padding: 2px 20px 2px 20px;letter-spacing:1px;font:8px 'silkscreen';color:#444;border-radius: 5px;border: 1px solid #ccc;background: linear-gradient(145deg, #ffffff, #dcdcdc);box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 -2px 4px rgba(255,255,255,0.5);cursor: pointer;transition: all 0.3s ease;}.navigation a:hover {box-shadow: 0 4px 6px rgba(0,0,0,0.12), inset 0 -2px 4px rgba(255,255,255,0.6);}.sidebar {flex: 0 0 220px;background: linear-gradient(145deg, #f7f7f7, #e0e0e0);border-radius: 5px;border:1px solid #ccc;padding: 5px;box-shadow: inset 0 -2px 4px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.05);}.banner-img {flex: 0 0 170px;background: #f5f5f5 url(https://itinerae.neocities.org/premium/5banner.webp) bottom;margin-top:5px;border-bottom: 2px solid #ccc;border-radius:5px;}.main-area {display: flex;flex-direction: column;gap: 5px;flex: 0 0 490px;}.main {flex: 1;background: linear-gradient(145deg, #f7f7f7, #e0e0e0);border-radius: 5px;border:1px solid #ccc;padding: 5px;box-shadow: inset 0 -2px 4px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.05);}.main-button a {display: inline-block;margin-top: 5px;padding: 2px 20px;font-weight: bold;letter-spacing:2px;font:9px ms gothic, 'silkscreen';color:#444;border-radius: 5px;border: 1px solid #ccc;background: linear-gradient(145deg, #ffffff, #dcdcdc);box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 -2px 4px rgba(255,255,255,0.5);cursor: pointer;transition: all 0.3s ease;text-align: center;}.main-button a:hover {box-shadow: 0 4px 6px rgba(0,0,0,0.12), inset 0 -2px 4px rgba(255,255,255,0.6);}.main-button img {vertical-align: middle;margin-right: 3px;}.box {background: linear-gradient(145deg, #ffffff, #eee);border-radius: 5px;padding: 5px;margin-bottom: 5px;box-shadow: 0 2px 4px rgba(0,0,0,0.08), inset 0 -2px 4px rgba(255,255,255,0.6);transition: transform 0.3s ease;}.box:hover {transform: translateY(-2px);}.title {font:10px 'orbitron';text-transform: uppercase;letter-spacing:4px;background: linear-gradient(145deg, #f5f5f5, #dcdcdc);padding: 1px 2px;border-radius: 5px;margin-bottom: 2px;box-shadow: inset 0 -1px 2px rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.05);}.footer {background: linear-gradient(145deg, #ffffff, #dcdcdc);text-align: center;font:9px ms gothic, calibri;padding: 5px;border-top: 2px solid #ccc;text-shadow: 0 1px 2px rgba(0,0,0,0.1);}@media (max-width: 640px) {.layout {flex-direction: column;align-items: center;}.navigation {flex-wrap: wrap;}.main-area {width: 100%;flex: 1;}.sidebar {width:100%;order:2;}}@media (min-width: 640px) {.banner-img {margin-right: 7px;}}