/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* FONT IMPORT */
@import url('https://fonts.cdnfonts.com/css/open-dyslexic');

  
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #21cceee4;
  --content-background-color: #b049ff7e;
  --sidebar-background-color: #ff27a18e;

  /* Text Colors: */
  --text-color: #19fff7f0;
  --sidebar-text-color: #25ff3b;
  --link-color: #e8006c;
  --link-color-hover: #b86aec;

  /* Text: */
  --font: 'Open-Dyslexic', sans-serif;
  --heading-font: Georgia, serif;
  --font-size: 18px;

  /* Other Settings: */
  --margin: 18px;
  --padding: 20px;
  --border: 7px solid #ff861cd6;
  --sidebar-width: 200px;
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("https://i.pinimg.com/736x/fc/9a/d2/fc9ad2423f40a05c3c2d6cbc021f8148.jpg");
  
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px var(--link-color);
  background-color: inherit;
  color: var(--text-color);
}

/* Links: */
a {
  text-decoration: underline;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
  width: 1000px;
  display: grid;
  grid-gap: var(--margin);
  grid-template: "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(--sidebar-width) auto var(--sidebar-width);
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  border-style:dotted;
  border-radius: var(--round-borders);
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
  grid-area: header
  font-size: 1.2em;
  border-style:ridge;
  border-width:6px;
 background: var(--content-background-color);
  
.header-content {
  padding: var(--padding);
}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.5em;
  font-weight: bold;
}

.header-image img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------- */