@import url("https://fonts.googleapis.com/css2?family=Montserrat Alternates:wght@300;500;700;900&display=swap");
* {
box-sizing: border-box;
font-family: "Montserrat Alternates", sans-serif;
margin: 0;
padding: 0;
}
body {
background: #151f32;
font-family: "Montserrat Alternates";
font-weight: 300;
color: #FFF;
text-align: center;
font-size: 14px;
}
body > footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
margin-bottom: 40px;
}
body > footer #footer__title {
font-size: 18px;
font-weight: 700;
}
body > footer #footer__right {
font-size: 12px;
font-weight: 300;
}
.main {
display: grid;
grid-template-rows: 200px 300px 100px auto;
}
.main__row0 {
padding: 100px 50px;
}
.main__row0 > p {
font-size: 18px;
font-weight: 700;
}
.main__row0 > h2 {
font-size: 32px;
font-weight: 900;
color: #63c574;
}
.main__row1 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/*// Glow Border Animation //*/
/*// Border Animation END//*/
}
@keyframes turn {
0% {
transform: rotateY(0deg);
}
25% {
transform: rotateY(90deg);
}
50% {
transform: rotateY(180deg);
}
75% {
transform: rotateY(270deg);
}
100% {
transform: rotateY(360deg);
}
}
.main__row1 .cube-container {
position: relative;
perspective: 500px;
margin-left: 80px;
margin-top: 50px;
z-index: 1;
}
.main__row1 .cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: turn 29s ease-in-out 0s infinite;
}
.main__row1 .face {
position: absolute;
opacity: 0.8;
}
.main__row1 .front {
width: 200px;
height: 200px;
background-color: #63c574;
display: flex;
flex-direction: column;
}
.main__row1 .left {
width: 200px;
height: 200px;
background-color: hsl(309, 34%, 37%);
display: flex;
flex-direction: column;
}
.main__row1 .right {
width: 200px;
height: 200px;
background-color: #dbaa17;
display: flex;
flex-direction: column;
}
.main__row1 .back {
width: 200px;
height: 200px;
background-color: hsl(251, 84.2696629213%, 44.5%);
display: flex;
flex-direction: column;
}
.main__row1 .top {
width: 200px;
height: 200px;
background-color: white;
display: flex;
flex-direction: column;
}
.main__row1 .bottom {
width: 200px;
height: 200px;
background-color: white;
display: flex;
flex-direction: column;
}
.main__row1 .front {
transform: translateZ(100px);
}
.main__row1 .left {
transform: translateX(-100px) rotateY(-90deg);
}
.main__row1 .right {
transform: translateZ(-100px) rotateY(180deg);
}
.main__row1 .back {
transform: translateX(100px) rotateY(90deg);
}
.main__row1 .top {
transform: translateY(-100px) rotateX(90deg);
}
.main__row1 .bottom {
transform: translateY(100px) rotateX(-90deg);
}
.main__row1 .animated-border-box, .main__row1 .animated-border-box-glow {
max-height: 550px;
max-width: 350px;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
/* Border Radius */
border-radius: 10px;
}
.main__row1 .animated-border-box-glow {
overflow: hidden;
/* Glow Blur */
filter: blur(20px);
}
.main__row1 .animated-border-box:before, .main__row1 .animated-border-box-glow:before {
content: "";
z-index: -2;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
position: absolute;
width: 99999px;
height: 99999px;
background-repeat: no-repeat;
background-position: 0 0;
/*border color, change middle color*/
background-image: conic-gradient(rgba(0, 0, 0, 0), #63c574, rgba(0, 0, 0, 0) 25%);
/* change speed here */
animation: rotate 4s linear infinite;
}
.main__row1 .animated-border-box:after {
content: "";
position: absolute;
z-index: -1px;
/* border width */
left: 5px;
top: 5px;
/* double the px from the border width left */
width: calc(100% - 10px);
height: calc(100% - 10px);
/*bg color*/
background: #151f32;
/*box border radius*/
border-radius: 10px;
}
@keyframes rotate {
100% {
transform: translate(-50%, -50%) rotate(1turn);
}
}
.main__row1 .fcontainer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
z-index: 1;
align-items: center;
font-size: 1.5rem;
/* reset input */
}
.main__row1 .fcontainer .form__group {
position: relative;
padding: 15px 0 0;
margin-top: 50px;
width: 50%;
}
.main__row1 .fcontainer .form__group .form__field {
all: unset;
border: 0;
border-bottom: 2px solid #9b9b9b;
outline: 0;
font-size: 1.3rem;
color: #FFF;
padding: 7px 0;
background: transparent;
transition: border-color 0.2s;
}
.main__row1 .fcontainer .form__group .form__btncontainer {
width: 300px;
height: 80px;
padding: 5px 5px;
/*
* #BUTTON STYLES
*
* Buttons must be created with two sibling span tags inside
*
*
* If styeling an anchor element instead of a