/* Color variables */
:root {
    --dark-color: #353535;
    --light-color: #ffffff;
    --gray: #8a8a8a;
    --light-gray: #c7c7c7;
    --negative-color: #e74a52;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Helvetica, sans-serif;
    color: var(--light-color);
    background-color: var(--dark-color);
}
a {
    text-decoration: none;
}

/* Page layout */
.page-layout {
    --padding: 1rem;
    --max-content-width: 470px;
    display: grid;
    grid-template-columns:
        [full-width-start] minmax(var(--padding), 1fr)
        [content-start] min(
            100% - (var(--padding) * 2),
            var(--max-content-width)
        )
        [content-end]
        minmax(var(--padding), 1fr) [full-width-end];
    padding-left: calc(100vw - 100%) !important;
}
.page-layout > * {
    grid-column: content;
}
.page-layout > .full-width {
    grid-column: full-width;
}

/* Utility classes */
.button {
    text-align: center;
    color: var(--light-color);
    background-color: #000000;
    border-radius: 0.125em;
    padding: 0.75em 1.5em;
}
.button:hover,
.button:focus {
    color: var(--dark-color);
    background-color: var(--light-gray);
}
.mb-2 {
    margin-bottom: 2rem;
}

.loader {
    /* border: 16px solid hsla(0, 0%, 100%, 0.2);
    border-top: 16px solid var(--primary-color); */
    background-image: conic-gradient(rgba(1,1,1,0) 95deg, var(--primary-color) 270deg, var(--primary-color) 340deg, rgba(1,1,1,0));
    overflow: hidden;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    margin: 2.5rem auto;
  }
  .loader:after {
    content: '';
    background-color: var(--grey-color);
    position: absolute;
    width: 85%;
    height: 85%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  @keyframes spin {
    0% { transform: rotate(5deg); }
    100% { transform: rotate(365deg); }
  }