@import "reset.css";
html {
background-color: #000000;
}
main {
background-color: #000303;
font-family: "Roboto", sans-serif;
}
.home {
padding: 3.6rem 2rem 0;
max-width: 960px;
margin: 0 auto;
display: block;
color: #fff;
}
.home .landing {
text-align: center;
}
.home .landing img {
max-width: 100%;
max-height: 450px;
display: block;
margin: 3rem auto 1.5rem;
}
.home .landing h1 {
font-size: 3rem;
}
.home .landing .action .action-button {
position: relative;
z-index: 999;
display: inline-block;
font-size: 1.2rem;
color: #fff;
background-color: #c51212;
padding: 0.8rem 1.6rem;
border-radius: 4px;
transition: background-color 0.1s ease;
box-sizing: border-box;
}
.home .landing .action .action-button:hover {
background-color: #490d0d;
}
.home .bottom {
text-align: center;
}
.boxmov::before, .boxmov::after, .boxmov {
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.boxmov {
width: 650px;
height: 650px;
margin: 140px auto 0px auto;
color: #d62828;
box-shadow: inset 0 0 0 1px rgba(214, 40, 40, 0.5);
}
.boxmov::before, .boxmov::after {
content: "";
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
.boxmov::before {
animation-delay: -4s;
}
@keyframes clipMe {
0%, 100% {
clip: rect(0px, 715px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 715px, 0px);
}
50% {
clip: rect(713px, 715px, 715px, 0px);
}
75% {
clip: rect(0px, 715px, 715px, 713px);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}