/* ------------------------------CSS reset section------------------------------------ */
/* https://piccalil.li/blog/a-modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------End the CSS reset section------------------------------------ */


/* ------------------------------Responsive CSS section------------------------------------ */

/*  Responsive CSS Make sure that the padding and border are included in the total width and height of the elements */
* {
    box-sizing: border-box;
  }

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
  }

/* define 12 columns for tablet */

  @media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
  }

/* define 12 columns for desktop */

@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}


/* set all columns to float to the left and have a padding of 15px */

[class*="col-"] {
    float: left;
    padding: 15px;
    /* border: 1px solid red;  remove this when finished editing */
  }

/* clear the flow and ensure later rows still have the 12 column layout */

.row::after {
    content: "";
    clear: both;
    display: table;
}

/* ------------------------------ End Responsive CSS section------------------------------------ */

/* ------------------------------ CSS Styles section------------------------------------ */

/* -----------Class styles------------ */

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.books {
  width: 200px;
  margin: 10px;
}

.banner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
  width: 40%;
}

hr.rounded {
  border-top: 8px solid #000000;
  border-radius: 5px;
}

.title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64pt;
  text-align: center;
  color: #FFFFFF;
  font-weight: 400;
  font-style: italic;
}

.paragraph {
  line-height: 200%;
}

/* -----------ID styles------------ */

#bio-pic {
  Border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

/* -----------Element styles------------ */

body {
  background: linear-gradient(to bottom, #7100de,#7100de00);
  font-size: 1.5em;
}

footer {
  background-color: #7100de;
  color: #FFFFFF;
}

hr.rounded {
  border-top: 8px solid #000000;
  border-radius: 5px;
}

/* ------------------------------End CSS styles section------------------------------------ */



.grid-container {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  display: inline-grid;
  grid-template-columns: 25px 150px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px;
  grid-template-rows: 25px 150px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px;
  font-size: 1rem;
}

.grid-item {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  padding: 3px 0;
}

.grid-spacer {
  text-align: center;
  padding: 3px 0;
}

.grid-category {
  text-align: left;
  border-style: solid;
  border-width: 1px;
  padding: 3px 0;
}

.grid-category-vertical {
  text-align: left;
  border-style: solid;
  border-width: 1px;
  padding: 3px 0;
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
}

.grid-title1 {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  padding: 3px 0;
  grid-row: 1;
  grid-column: 3 / 8;
}
.grid-title2 {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  padding: 3px 0;
  grid-row: 1;
  grid-column: 8 / 13;
}
.grid-title3 {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  padding: 3px 0;
  grid-row: 1;
  grid-column: 13 / 18;
}

.grid-title-spacer {
  text-align: center;
  grid-row: 1;
  padding: 3px 0;
}

.grid-left-spacer {
  text-align: center;
  
  padding: 3px 0;
  grid-row: 1 / 3;
  grid-column: 1;
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
}

.grid-left-title1 {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  padding: 3px 0;
  grid-row: 3 / 8;
  grid-column: 1;
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
}

.grid-left-title2 {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  padding: 3px 0;
  grid-row: 8 / 13;
  grid-column: 1;
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
}
.grid-left-title3 {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  padding: 3px 0;
  grid-row: 13 / 18;
  grid-column: 1;
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
}

/* ------------------------------ End Logic Grid section ------------------------------------ */

.solution-table {
user-select: none;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
display: inline-grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: 25px 25px 25px 25px 25px 25px;
font-size: 1rem;
width: 100%;
margin-top: 50px;
margin-bottom: 50px
}

.solution-heading {
text-align: center;
  border-style: solid;
  border-width: 1px;
  padding: 3px 0;  
}

.solution-item {
text-align: left;
  border-style: solid;
  border-width: 1px;
  padding: 3px 0;  

}

#puzzleTitle {
text-align: center;
}

#puzzleClues {
white-space: pre-wrap;
}

#logicgridfooter {
  width: 100%;
}

#checkanswerbutton {
float: left;
}