/* 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." */
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {

  background-color: #FFEBF3;
  color: #1A000A;
  Font-family: "Montserrat Alternates", sans-serif;
  font-size: 1.15rem;
  
  
/*Margins/Header */
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1fr min(45rem, 90%) 1fr;
  margin: 0;
}
body > * {
  grid-column: 2;
}


/* Global variables. */
:root {
  --standard-border-radius: 5px;
  --border-width: 1px;
  }
  


/* Make the body a nice central block */
body {
  font-size: 1.15rem;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1fr min(45rem, 90%) 1fr;
  margin: 0;
}
body > * {
  grid-column: 2;
}

/* Make the header bg full width, but the content inline with body */
body > header {
  background-color: #FFBCD7;
  border-bottom: solid;
  text-align: center;
  padding: 0 0.5rem 2rem 0.5rem;
  grid-column: 1 / -1;
}

body > header > *:only-child {
  margin-block-start: 2rem;
}

body > header h1 {
  max-width: 1200px;
  margin: 1rem auto;
}

body > header p {
  max-width: 40rem;
  margin: 1rem auto;
}

/* Add a little padding to ensure spacing is correct between content and header nav */
main {
  padding-top: 1.5rem;
}

body > footer {
  margin-top: 4rem;
  padding: 2rem 1rem 1.5rem 1rem;
  font-size: 0.9rem;
  text-align: center;
  border-top: solid;
}


/* Format links & buttons */
a,
a:visited {
  color: #FF0368;
}

a:hover {
  text-decoration: none;
}

button,
.button,
a.button, /* extra specificity to override a */
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border: solid;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  line-height: normal;
}

.button[aria-disabled="true"], 
input:disabled,
textarea:disabled,
select:disabled,
button[disabled] {
  cursor: not-allowed;
  background-color: gray;
}

input[type="range"] {
  padding: 0;
}



/* Format navigation */
header nav {
  font-size: 1rem;
  line-height: 2;
  padding: 1rem 0 0 0;
}


/* List items are inline elements, make them behave more like blocks */
header nav ul li,
header nav ol li {
  display: inline-block;
}

header nav a,
header nav a:visited {
  margin: 0 0.5rem 1rem 0.5rem;
  border: solid;
  color: #FF0368;
  display: inline-block;
  padding: 0.1rem 1rem;
  text-decoration: none;
}

header nav a:hover,
header nav .current,
header nav a[aria-current="page"],
header nav a[aria-current="true"] {
  background: #FFBCD7;
  cursor: pointer;
}


img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}