html, body { width: 100%; height: 100%; padding: 0; margin: 0; font-family: 'Montserrat', Arial, sans-serif; background: #222; } .section { width: 100%; float: left; } .wrapper { width: 900px; margin: 0 auto; } @media(max-width: 1000px) { .wrapper { width: 90%; } } /* Navigation -=-=-=-=-=-=-=-=-=-=- */ /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ .navigation { position: absolute; background: rgba(0, 0, 0, 0.4); height: 60px; z-index: 1; } .navigation .left { float: left; } .navigation .right { float: right; } .navigation > * > * { float: left; color: #fff; text-decoration: none; } .navigation > * > * img { height: 40px; padding: 10px; float: left; } .navigation > * > * span { padding: 30px 25px 30px 0; line-height: 0px; float: left; } .navigation a:hover { background: #333; } @media(max-width: 1200px) { .navigation > * > * span { display: none; } } /* BANNER -=-=-=-=-=-=-=-=-=-=-=-=- */ /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ .banner { position: relative; width: 100%; padding-bottom: 167.272727272%; background: #000 url("../images/banner/background.jpg"); background-size: 100% 100%; background-repeat: no-repeat; overflow: hidden; } .layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: 100% 100%; background-repeat: no-repeat; } .layer-dash { background-image: url("../images/banner/dash.png"); } .layer-oshiro { background-image: url("../images/banner/oshiro.png"); } .layer-granny { background-image: url("../images/banner/granny.png"); } .layer-theo { background-image: url("../images/banner/theo.png"); } .layer-badeline { background-image: url("../images/banner/badeline.png"); } .layer-madeline { background-image: url("../images/banner/madeline.png"); } .layer-logo { background-image: url("../images/banner/logo.png"); } .layer-strawberry { background-image: url("../images/banner/strawberry.png"); } .layer-clouds { background-image: url("../images/banner/clouds.png"); } .layer-logo { left: 7.5%; right: 7.5%; top: 0; bottom: 15%; } .edge { position: absolute; left: 0; right: 0; bottom: 0px; height: 64px; background: url("../images/banner/edge.png") repeat-x; } /* CONTENT -=-=-=-=-=-=-=-=-=-=-=-=- */ /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ .content { position: relative; padding: 0px 0 80px 0; background: #222; z-index: 10; } .content .video { width: 100%; float: left; margin-top: -180px; margin-bottom: 60px; box-shadow: 0 0 128px rgba(0, 0, 0, 0.6); background: #000; } .content h1 { color: #fff; font-size: 1.4em; text-align: center; text-shadow: 0 0 32px rgba(255,255,255,0.25); } .content h1 a { color: #98f4f7; text-decoration: none; } .content h1 a:hover { color: #fff; } .content .stores { width: 100%; padding: 20px; box-sizing: border-box; border: 2px solid #444; border-bottom: 32px solid #444; float: left; margin-top: 40px; margin-bottom: 2%; } .content .stores .store { width: 48%; margin: 0 0 0 10px; padding: 0 10px; float: left; border: 2px solid #444; display: inline-flex; align-items: center; justify-content: center; height: 165px; flex-wrap: wrap; background: rgba(0, 0, 0, 0.5); position: relative; } .store h3 { flex: 0 0 100%; margin: 8px 0px 0px; color: #fff; } .store img { width: 100px; } .store p { color: #fff; margin: 10px; width: 70%; } .store a.buy-button { position: absolute; right: 15px; bottom: -15px; background: green; padding: 8px; border-radius: 2px; color: #fff; text-decoration: none; font-size: 14px; } .content .stores .consoles { width: 100%; float: left; display: flex; align-content: center; justify-content: center; flex-wrap: wrap; } .content .stores .consoles a { width: 32%; float: left; padding: 14px; box-sizing: border-box; border: 2px solid transparent; background: #fff; color: #fff; border-radius: 4px; font-weight: bold; text-decoration: none; margin-right: 2%; transition: background 0.1s, border 0.2s; margin-bottom: 15px; } .content .stores .consoles a:nth-child(3n+0) { margin-right: 0; } .content .stores .consoles a img { width: 32px; float: left; } .content .stores .consoles a span { float: left; margin: 8px 0 0 16px; } .content .stores .consoles a.store-switch { background: #e60012; } .content .stores .consoles a.store-ps4 { background: #0072ce; } .content .stores .consoles a.store-xb1 { background: #107c10; } .content .stores .consoles a.store-steam { background: #282e39; } .content .stores .consoles a.store-egs { background: #444; } .content .stores .consoles a.store-itch { background: #fa5c5c; } .content .stores .consoles a:hover {background: #222; border: 2px solid #fff; } @media(max-width: 900px) { .content .stores .consoles a { text-align: center; } .content .stores .consoles a img { width: 32px; float: none; } .content .stores .consoles a span { display: none; } } .content .stores .merch { margin-top: 32px; width: 100%; float: left; } .content .stores .merch a { float: left; width: 22%; margin-right: 4%; box-sizing: border-box; transition: color 0.2s; } .content .stores .merch a img { width: 100%; border-radius: 8px; opacity: 0.8; transition: opacity 0.2s; } .content .stores .merch a { color: #777; text-decoration: none; font-weight: bold; text-align: center; } .content .stores .merch a:hover { color: #fff;text-shadow: 0 0 32px rgba(255,255,255,0.25); } .content .stores .merch a:hover img { opacity: 1; } .content .stores .merch a:last-child { margin-right: 0; } .content .ost { padding-top: 0; padding-bottom: 40px; } .content .ost img { width: 60%; } .screenshots { margin-top: 2%; } .screenshots > * { width: 49%; margin-bottom: 2%; float: left; } .screenshots > *:nth-child(even) { margin-left: 2%; } .screenshots img {width:100%;} /* FOOTER -=-=-=-=-=-=-=-=-=-=-=-=- */ /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ .footer { padding: 0px 0 80px 0; text-align: center; color: #fff; font-weight: bold; text-shadow: 0 0 rgba(255,255,255,0.25); line-height: 2em; } .footer a { text-decoration: none; color: #44c5f0; } .footer a:hover { color: #fff; } .footer img { opacity: 0.8; transition: opacity 0.25s; } .footer img:hover { opacity: 1; }