@import url('https://fonts.googleapis.com/css2?family=Signika:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background: linear-gradient(to right bottom, #050505, #4942E4 125%);
   font-family: 'Signika', sans-serif;
   color: #fff
}

h1 {
   margin: 0;
   font-size: 4rem;
}

p {
   margin: 0;
   font-family: 'Open Sans', 'Signika', sans-serif;
   font-size: 1.85rem;
   font-weight: 600;
}

a {
   color: #3139BF;
   text-decoration: none;
   font-weight: 700;
   transition: all .15s;
}

a:hover {
   opacity: .5;
}

#buttons {
   display: flex;
   align-items: center;
   gap: 1rem;
}

button {
   margin-top: 1rem;
   padding: .8rem 1.4rem;
   border: none;
   color: #fff;
   background: #111111aa;
   border-radius: 12px;
   display: flex;
   align-items: center;
   gap: .5rem;
   font-size: 1.25rem;
   font-weight: 500;
   letter-spacing: 1px;
   cursor: pointer;
   transition: all .15s;
}

button.transparent {
   background: transparent;
   opacity: .75;
}

button.transparent > svg {
   fill: transparent;
}

button:not(.transparent):hover {
   background: #18181877;
   border-radius: 8px;
}

button.transparent:hover {
   /* opacity: 1; */
   cursor: not-allowed;
}

footer {
   position: absolute;
   left: 50%;
   bottom: 1rem;
   transform: translateX(-50%);
}