/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

/* Font Imports */
/* @import url('https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Chewy&display=swap');

/* Our default values set as CSS variables */
:root {
  --color-bg: hsl(349.5,100%,77.6%); /* Light segment */
  --color-bg2: hsl(349.6,100%,72.7%); /* Dark segment */
  --color-bg-wrapper: rgba(256, 256, 256, 0.5); /* Light segment */
  --color-callout-bg: #ffe4e1; /* Callout background */
  --color-button-input-bg: #ffe4e1; /* Button and Input background */

  --color-text-main: #000000;
  --color-title-text: #ffc1cc;
  --color-primary: #ffff00;

  --wrapper-height: 87vh;
  --image-max-width: 300px;

  --image-margin: 3rem;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
  text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
  font-family: /*'Recursive',*/ 'Sour Gummy', sans-serif;
}

[hidden] {
  display: none !important;
}

/* Navigation grid */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid #fff;
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}

.divider {
  padding: 0 1rem;
}

p {
  font-size: large;
}

body {
  background-color: var(--color-bg);

  /* og code from w3ref */
  background-image: linear-gradient(
      /* Comment: Creates a linear gradient for the checkerboard */
      45deg,
      /* Comment: Specifies the angle of the gradient */

      var(--color-bg2) 25%,
      /* Comment: Sets the color and position of the first color stop */

      transparent 25%,
      /* Comment: Sets the color and position of the second color stop */

      transparent 75%,
      /* Comment: Sets the color and position of the third color stop */

      var(--color-bg2) 75%,
      /* Comment: Sets the color and position of the fourth color stop */

      var(--color-bg2)
      /* Comment: Sets the color of the fifth color stop */
    ),
    linear-gradient(
      /* Comment: Creates another linear gradient for the checkerboard */
      -45deg,
      /* Comment: Specifies the angle of the gradient */

      var(--color-bg2) 25%,
      /* Comment: Sets the color and position of the first color stop */

      transparent 25%,
      /* Comment: Sets the color and position of the second color stop */

      transparent 75%,
      /* Comment: Sets the color and position of the third color stop */

      var(--color-bg2) 75%,
      /* Comment: Sets the color and position of the fourth color stop */

      var(--color-bg2)
      /* Comment: Sets the color of the fifth color stop */
    );
  background-size: 60px 60px;
  /* Comment: Sets the size of the background squares */
  background-repeat: repeat;
  /* Comment: Specifies that the background pattern should repeat */
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 1rem;
}

.underconstruction {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-wrapper);
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #000000;
  min-width: 40rem;
  max-width: 60rem;
}

/* Very light scaling for our illustration */
.title {
  color: var(--color-title-text);
  font-family: 'Chewy', 'Recursive', sans-serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-style: normal;
  font-weight: bold;
  font-size: 50px;
  line-height: 105%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Very light scaling for our illustration */
.illustration {
  max-width: 100%;
  max-height: var(--image-max-width);
  margin-top: var(--image-margin);
}

/* Callouts */
.callout {
  background-color: var(--color-callout-bg);
  color: black;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #000000;
  margin: 1rem auto;
  min-width: 40rem;
  max-width: auto;
  display: table-cell;
}

.callout p {
  text-align: left;
}

.card {
  background-color: var(--color-callout-bg);
  color: black;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #000000;
  margin: 1rem auto;
  min-width: 10rem;
  min-height: fit-content;
  max-width: 20rem;
  /*display: table-cell;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

p {
  text-align: center;
}

.cards {
  max-width: auto;
  display: table-cell;
}

.callout .callout-title {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.image-and-text {
  display: table-cell;
  min-width: 40rem;
  max-width: auto;
  align-items: center;
  justify-content: center;
}
.image-and-text img {
  float: left;
  padding-right: 1rem;
}

.callout img {
  float: left;
  padding-right: 1rem;
}

/* If anyone can help make this actually look like a circle, please help */
.callout .circle-image {
  /* width: 100px; */
  /* height: 100px; */
  border-radius: 50%;
  object-fit: cover;
}

/* Instructions */
.instructions {
  margin: 1rem auto 0;
}

/* Button - Add it from the README instructions */
button,
input {
  font-family: inherit;
  font-size: 100%;
  background: var(--color-button-input-bg);
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: 500ms;
}

button {
  color: black;
}

/* Subheading */
/* h2 {
  color: #2800ff;
} */

/* Links that open files in the editor */
.fileopener {
  cursor: pointer;
  font-weight: bold;
  border-bottom: 3px solid var(--color-primary);
  color: var(--color-secondary);
}

.fileopener:hover {
  border-bottom: 3px solid var(--color-secondary);
}