"use client"

import styled, { createGlobalStyle } from "styled-components";

export const GlobalLayout = createGlobalStyle`
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  html,
  body {
    height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    color: ${({ theme }) => theme.text};
    background-color: ${({ theme }) => theme.background};
    
    transition: background 0.3s ease-in-out;
  }
  
  a {
    color: ${({ theme }) => theme.text};
  }

  @media (prefers-color-scheme: dark) {
    html {
      color-scheme: dark;
    }
  }
`;

export const MainBlock = styled.main`
  display: flex;
  height: 100vh;
  align-items: center;
  flex-direction: column;
  justify-content: center;
`

export const Button = styled.button`
  border: none;
  outline: none;
  cursor: pointer;
  color: ${({ theme }) => theme.background};
  background-color: ${({ theme }) => theme.text};

  margin: ${({ theme }) => theme.space}px;
  padding: ${({ theme }) => theme.space}px;
`;