html, body {
height: 100%;
width: 100%;
}
:root {
--bs-primary: #9F2382;
--bs-secondary: #333333;
--bs-light: #DDDDDD;
--bs-primary-rgb: 159, 35, 130;
--bs-secondary-rgb: 51, 51, 51;
--bs-light-rgb: 221, 221, 221;
}
body {
background: var(--bs-primary);
}
.login, .login a, .login #backtoblog a, .login #nav a {
color: white;
}
.login form {
background: none;
}
.login.wp-core-ui .button-primary {
background: var(--bs-secondary);
border-color: var(--bs-secondary);
}
.login h1 a {
background-image: none, url(../images/logo.svg);
}
.login .message, #login_error {
color: #333333;
}
a {
text-decoration: none;
font-weight: bold;
}
svg {
margin: 20px;
width: 180px
}
@keyframes letters {
0% {
stroke-dashoffset: 1009.609;
fill: transparent
}
75% {
stroke-dashoffset: 0;
fill: transparent
}
100% {
stroke-dashoffset: 0;
fill: #fff
}
}
@keyframes circle1 {
0% {
stroke-dashoffset: 1106.113;
fill: transparent;
stroke: #FFFFFF40;
}
50% {
stroke-dashoffset: 553.0565;
}
75% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill: #a02482
}
}
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: transparent;
stroke: #FFFFFF40;
stroke-width: 8;
stroke-dasharray: 1106.113;
stroke-dashoffset: 1106.113
}
.st0a {
animation: circle1 1s linear 0s forwards 1
}
.st0b {
animation: circle2 1s linear 0s forwards 1
}
.st1 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: transparent;
stroke: #fff;
stroke-width: 8;
stroke-dasharray: 1009.609;
stroke-dashoffset: 1009.609;
animation: letters 3s ease-in-out 1s forwards 1
}
.st1a {
animation: letters 1.5s ease-in-out 1s forwards 1
}
.st1b {
animation: letters 1.5s ease-in-out 2.5s forwards 1
}
@media only screen and (max-width:1025px) {
svg {
width: 120px
}
}
@media only screen and (max-width:769px) {
svg {
width: 80px
}
}
/* Buttons */
.btn-primary, .btn-primary:hover, .btn-secondary, .btn-secondary:hover {
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-primary, .btn-primary:hover, .btn-check:focus + .btn-primary, .btn-primary:focus {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
box-shadow: 0 0 0 .11rem rgba(0, 0, 0, .2);
}
.btn-primary:disabled, .btn-primary.disabled {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
opacity: 0.6;
}
.btn-secondary, .btn-secondary:hover {
background-color: var(--bs-secondary);
border-color: var(--bs-secondary);
}
.btn-secondary:disabled, .btn-secondary.disabled {
background-color: var(--bs-secondary);
border-color: var(--bs-secondary);
opacity: 0.6;
}
.btn-primary:before, .btn-secondary:before {
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: white;
border: 1px solid white;
opacity: 0;
transition: all 0.4s;
z-index: -1;
}
.btn-primary:hover:before, .btn-secondary:hover:before {
opacity: 0.2;
}