@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

.bg-main{
  background: #344e41;
}

header{
  width: 100%;
  height: 60px;
  background: #344e41;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .title {
  font-size: 32px;
  letter-spacing: 1px;
  font-weight: bold;
  color: #FFF;
}

footer{
  width: 100%;
  padding: 30px 10px;
  background: #344e41;
  font-size: 15px;
  letter-spacing: .25px;
  text-align: center;
}

footer div:nth-child(1){
  color: #FFF;
}

footer div:nth-child(1) span{
  font-weight: 600;
}

footer div:nth-child(2){
  color: #CCC;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: #333;
  background-color: #FFF;
}