/* Declaring variables for color and font */
:root {
    /* declare a variable with `--` syntax */
    --dark: #f10788;
    --darker: #52002d;
    --light: #cacaca;
    --background-color: #141817;
    --highlight: #ca43ff;
    --lime: #c4ff39;
    --page-font: Georgia, serif;
  }

  /* Highlights selected code */
  ::selection {
    background-color: var(--highlight);
    color: var(--lime);
  }

  /* set the default for all elements */
  * {
      font-family: var(--page-font);
      color: var(--light);
      box-sizing: border-box;
  }

  /* Flexbox Column all body elements */
  body {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    line-height: 1.5;
  }

  /* Align header section */
  header {
      margin-top: 40px;
      text-align: center;
  }

  /* Set font color to h1 */
  h1 {
      color: var(--dark);
      font-size: 60px;
      text-shadow: 0 0 10px var(--highlight), 0 0 5px var(--light);
  }

  /* Format the subtitle paragraph */
  header>p {
      margin-top: 15px;
      color: var(--light);
      font-size: 20px;
      text-align: center;
  }

  /* Sets main content to flex-wrap the div sections */
  .main-style {
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
  }

  /* Make tiles 3 per row */
 .tile {
      margin: 30px 0;
      outline: 3px dashed var(--light);
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  /* header to postion on border */
  .tile h2 {
      position: relative;
      margin-top: -20px;
      border: 3px solid var(--light);
      background-color: var(--background-color);
      width: fit-content;
      font-size: 28px;
      margin-bottom: 15px;
  }

  /* Tile description formatting */
  .tile p {
      margin: 0 10px 15px 10px;
      text-align: center;
  }

  /* format the code box */
  .language-css {
      width: 100%;
  }
  /* edit code snippet container */
  .language-css pre {
      background-color: var(--dark);
      white-space: pre-wrap;
      overflow: auto;
      padding: 5px;
      margin: 20px;
      border-radius: 10px;
      background-image: linear-gradient(var(--dark), var(--darker));
  }

  /* Add select all function to code snippet */
  .language-css pre:active {
    user-select: all;
  }


/* format the tiles for glow effect */
  .tile, .tile h2 {
    border-radius: 8px;
    transition: all 0.5s ease-in-out;
  }
  
  .tile:hover,
  .tile:hover h2 {
    box-shadow: inset 0px 0px 8px rgba(232, 102, 236, 1), 0 0 15px rgba(232, 102, 236, 1);
  }

/* Center Footer */
footer {
    margin-top: 50px;
    text-align: center;
    font-size: 20px;
}

/* Scale heart emoji */
#heart {
    font-size: 30px;
}

/* Formatting for device compatibility with media queries */

  /* media query for tablets */
  @media screen and (max-width: 992px) {
      /* Make tiles into two columns */
    .tile {
        width: 48%;
    }
  }

@media screen and (max-width: 768px) {
    /* Make tiles into one column */
    .tile {
        width: 98%;
    }
}