145 lines
2.2 KiB
CSS
145 lines
2.2 KiB
CSS
body {
|
|
margin: 0;
|
|
background-color: #202020;
|
|
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
:root {
|
|
--video-blur-radius: 1vh;
|
|
}
|
|
|
|
#back_video {
|
|
position: absolute;
|
|
filter: blur(var(--video-blur-radius));
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
object-fit: cover;
|
|
}
|
|
|
|
#container {
|
|
--side-margin: 15vw;
|
|
--inside-padding: 20px;
|
|
|
|
position: absolute;
|
|
background-color: rgb(20, 20, 20, 0.8);
|
|
color: white;
|
|
|
|
border-radius: 10px;
|
|
backdrop-filter: blur(2vh);
|
|
|
|
margin: 50px calc(var(--side-margin) - var(--inside-padding));
|
|
width: calc(100vw - 2 * var(--side-margin));
|
|
width: auto;
|
|
padding: var(--inside-padding);
|
|
|
|
/* center everything */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
#container p {
|
|
margin: 5px;
|
|
}
|
|
|
|
#logo {
|
|
width: 25%;
|
|
border-radius: 25%;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3em;
|
|
margin: 5px;
|
|
text-shadow: 0 0 10px #80c0ff;
|
|
}
|
|
|
|
|
|
|
|
#badges_div {
|
|
margin: 0 10%;
|
|
|
|
display: grid;
|
|
}
|
|
|
|
/* on mobile */
|
|
@media (min-width: 600px) {
|
|
#badges_div {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
}
|
|
|
|
#google_play_badge {
|
|
width: 100%;
|
|
margin-bottom: -4px;
|
|
}
|
|
|
|
|
|
#itchio_badge_link {
|
|
padding: 6.6%;
|
|
position: relative;
|
|
}
|
|
|
|
#itchio_badge {
|
|
width: 100%;
|
|
margin-bottom: -4px;
|
|
}
|
|
|
|
#rotated_text {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
/* bold font*/
|
|
font-weight: bold;
|
|
|
|
/* center text vertically */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
color: #cebf82;
|
|
|
|
}
|
|
|
|
#rotated_text p {
|
|
margin: 0;
|
|
|
|
/* rotate text */
|
|
transform: rotate(13deg);
|
|
|
|
text-shadow: 0 0 15px #000
|
|
}
|
|
|
|
|
|
footer {
|
|
--footer-height: 50px;
|
|
|
|
color: rgb(180,180,180);
|
|
font-size: 0.8em;
|
|
|
|
margin: 0;
|
|
margin-bottom: calc(var(--video-blur-radius) * -1);
|
|
|
|
position: absolute;
|
|
bottom: calc(0px - var(--footer-height));
|
|
height: var(--footer-height);
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
footer p {
|
|
/* change value after "100vw / " after adding or removing elements from footer */
|
|
width: calc(100vw / 2);
|
|
} |