// The main stylesheet

// These colours are taken from Tailwind CSS
$gray-50: #f9fafb;
$gray-100: #f3f4f6;
$gray-200: #e5e7eb;
$gray-300: #d1d5db;
$gray-400: #9ca3af;
$gray-500: #6b7280;
$gray-600: #4b5563;
$gray-700: #374151;
$gray-800: #1f2937;
$gray-900: #111827;

// Reset all of the element styles
@import 'reset';

// Set the background and text colour for the body element
body {
  background-color: $gray-700;
  background-image: linear-gradient(0deg, $gray-700 0%, $gray-600 100%);
  background-repeat: repeat-x;
  color: #fff;
}

// Make sure the links are styled properly
a {
  color: #fff;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

// The page wrapper
#wrapper {
  background-color: $gray-700;
  border-color: $gray-900;
  border-radius: 1rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  padding: 1px;
  width: 50vw;
}

// Page header
#header {
  background-color: $gray-800;
  background-image: linear-gradient($gray-700, $gray-800);
  border-bottom: 1px;
  border-bottom-color: $gray-900;
  border-bottom-style: solid;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  padding: 1rem;
}

// Site links
#menu {
  border-bottom: 1px;
  border-bottom-color: $gray-500;
  border-bottom-style: solid;
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

// Page content
#content {
  background-color: $gray-600;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  padding: 1rem;
}

// Page footer
#footer {
  color: $gray-300;
  font-size: 0.75rem;
  margin-top: 1rem;
  text-align: center;
}

// Make sure the <hr /> element is styled correctly
hr {
  border: none;
  border-bottom-color: $gray-500;
  border-bottom-style: solid;
  border-top-color: $gray-800;
  border-top-style: solid;
  height: 0;
  margin-bottom: 1rem;
  margin-top: 1rem;
}