import styled, { keyframes } from 'styled-components'; import { lighten } from 'polished'; const spin = keyframes` to { transform: rotate(1turn) } `; export const Container = styled.main` margin-top: 50px; max-width: 1366px; div.loading-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; .loading { margin-top: 1rem; width: 50px; height: 50px; border: 5px solid var(--primary); border-top-color: ${lighten(0.1, 'rgb(145, 71, 255)')}; border-radius: 50%; animation: ${spin} 1s linear infinite; } } `;