168 lines
2.9 KiB
CSS
168 lines
2.9 KiB
CSS
html {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
html, body, .wrapper {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
body {
|
|
color: #fff;
|
|
background: url(wallpaper.jpg) no-repeat center / cover fixed rgb(32, 35, 36);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
|
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
height: 100%;
|
|
}
|
|
|
|
a {
|
|
color: #fff;
|
|
}
|
|
|
|
.wrapper {
|
|
align-items: center;
|
|
background: -moz-radial-gradient(center center, circle cover, transparent, #000);
|
|
background: -ms-radial-gradient(center center, circle cover, transparent, #000);
|
|
background: -webkit-radial-gradient(center center, circle cover, transparent, #000);
|
|
background: radial-gradient(center center, circle cover, transparent, #000);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
min-height: 100%;
|
|
padding: 30px 0;
|
|
}
|
|
|
|
.header__title {
|
|
font-size: calc(50px + 16 * (100vw - 320px) / (960 - 320));
|
|
font-weight: normal;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
text-shadow: #000 5px 5px 5px;
|
|
}
|
|
|
|
.header__description {
|
|
text-shadow: #000 1px 1px 5px;
|
|
line-height: 1.7;
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.main {
|
|
width: 800px;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.main {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.section {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.section__header {
|
|
text-shadow: #000 1px 1px 5px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.play-button {
|
|
display: inline-block;
|
|
}
|
|
|
|
.play-image {
|
|
max-width: 300px;
|
|
}
|
|
|
|
.button-container {
|
|
display: inline-block;
|
|
}
|
|
|
|
.button {
|
|
max-width: 100%;
|
|
width: 300px;
|
|
margin: 10px 0;
|
|
background: rgb(112, 50, 50);
|
|
border-radius: 3px;
|
|
color: #eee;
|
|
display: block;
|
|
font-size: 20px;
|
|
padding: 15px 25px;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.button__info {
|
|
padding: 0;
|
|
margin: 5px 0 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.button:hover, .button:focus, .button:active {
|
|
background: rgb(90, 45, 45);
|
|
}
|
|
|
|
.button--dev {
|
|
background: #333;
|
|
}
|
|
|
|
.button--dev:hover,
|
|
.button--dev:focus,
|
|
.button--dev:active {
|
|
background: #222;
|
|
}
|
|
|
|
.github {
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.github:hover, .github:focus, .github:active {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.button span {
|
|
font-size: small;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.button span[id$="date"] {
|
|
color: transparent;
|
|
transition: 0.3s color;
|
|
}
|
|
|
|
.button:hover span[id$="date"] {
|
|
color: #fff;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer__nav {
|
|
margin-top: 30px;
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.footer__item {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.footer__link {
|
|
color: #eeeeee;
|
|
text-decoration: none;
|
|
}
|
|
.footer__link:hover {
|
|
text-decoration: underline;
|
|
}
|