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

html {
  font-family: Lato, "sans-serif";
}

/*body {
  margin: 0px;
}*/

.navheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* .navheader a {
  color: #fff;
} */

.navcontainer {
  margin: auto;
  margin-top: 90px;
  max-width: 1200px;
  padding: 0 20px;
  justify-content: space-between;
  color: #fff;
  text-align: center;
}

.navcontainer .start {
  margin-bottom: 90px;
  text-align: center;
  margin-top: 90px;
}

.navcontainer .title1 {
  color: #ff8001;
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 2px;
  font-size: 14px;
}

.navcontainer .start .navbutton {
  text-align: center;
  padding: 12px 17px;
  border-radius: 5px;
  border: 0;
  font-family: 'Quicksand', sans-serif;
  font-weight: bold;
  background-color: white;
  font-size: 100%;
  letter-spacing: 0.5px;
  margin-top: 5px;

}

.navimg {
  /* background: #333 url(../../img/slides/slide2.png); */
  background: #333 url(../../img/slide2.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 80px 0 350px;
  background-attachment: fixed;
  z-index: -1;
  opacity: 0.9;
  margin-bottom: 20px;

}

/** flashes **/
ul#flashes {
  margin: 0;
  margin-bottom: 15px;
  padding: 0;
  list-style: none;
}

ul#flashes li {
  margin: 0;
  padding: 0;
  color: green;
  font-weight: bold;
}

/* ---------------Login Form----------------- */
/* .container {
  margin: auto;
  max-width: 1200px;
  padding: 0 20px;
  justify-content: space-between;
}

.container h1 {
  font-size: 40px;
  text-align: center;
  margin-top: 90px;
  margin-bottom: 20px;
} */

.fields {
  border-radius: 20px;
  /* background-color: #bcc4c4; */
  background-color: #ddd;
  padding: 20px;
  margin-bottom: 20px;

}

.container .fields .field {
  border-radius: 20px;
  margin-bottom: 15px;

}

.container .fields input,
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.container .fields label {
  text-align: left;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  /* color: white; */
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

/* ---------------Login Form End----------------- */

.header {
  text-align: center;
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  grid-area: header;
  min-height: 580px;
  max-height: var(--height-container);
}



.leftbody {
  padding: 20px;
  grid-area: leftbody;
}

.rightbody {
  padding: 20px;
  grid-area: rightbody;
}

.content {
  /*  padding: 20px;*/
  text-align: left;
  grid-area: content;
  height: 100%;
  /*  overflow: scroll;*/
}

.footer {
  grid-area: footer;
  place-items: center;
  /* both align-items / justify-items  to center */
  grid-row-gap: 1rem;
  text-align: center;
  justify-content: center;
  align-content: center;
  /* column axis */
  text-align: center;
  padding: 2em;
  padding-bottom: 0%;
  margin-bottom: 0%;
  background: #000;
  color: #fff;
  text-align: center;
}

.footer a {
  color: yellow;
}

.nav {
  margin-bottom: 3rem;
  font-size: 1.2rem;
}

.nav__link {
  text-decoration: none;
  color: #1c2023;
}

.nav__link:not(:last-of-type) {
  margin-right: 2.5rem;
}

/* .nav__link--active,
.nav__link:hover {
  font-weight: bold;
  color: #6301ed;
} */


/*----------------------------New Project-----------------------------------------------------------------*/



:root {
  --text-dark: #000;
  --text-light: #fbf2f2;
  --text-muted: #595959;

  --background-color: #fff;
  --accent-colour: #f56565;
  --accent-colour-2: #3bb54a;
  --tag-colour: #e5e5e5;

  --border: 3px solid #000;
}

.button {
  --background-color: #e2e8f0;
  --background-color-hover: #bdd1eb;
}



.form {
  width: 100%;
  padding: 2rem;
}

#flask-pagedown-title {
  width: 100%;
  padding: 1rm;
}

#flask-pagedown-body {
  width: 100%;
  padding: 1rm;
}

.form__field {
  --background-color: #e8e5e5;
}

.form__field,
.nav__link {
  --border: 3px solid #f56565;
}

html {
  /* Sets global font size on small devices */
  font-size: 12px;
}

/* When the screen width hits 960px, we increase the global font size to 14px. This changes
   the scale of all of our relative units (the rems), keeping everything in proportion */
@media screen and (min-width: 60em) {
  html {
    font-size: 14px;
  }
}

/* When the screen width hits 1200px, we once again increase the global font size, this time to 16px */
@media screen and (min-width: 75em) {
  html {
    font-size: 18px;
  }
}



/* Button styles that we'll share across our site */
.button {
  /* In order to easily position our buttons, we're making them block level elements */
  display: block;

  /* Removes any outlines added when the button is in focus */
  outline: none;

  /* Setting the cursor to pointer indicates to a user that the button is a clickable element */
  cursor: pointer;

  /* Again, with buttons we have to be explicit about inheriting font properties */
  font-size: inherit;
  font-family: inherit;

  /* Slows the background colour change effect when we hover over the button, making
       it take 0.1s with an accelerating colour change */
  transition: background 0.1s ease-in;
}

/* Utility class to use on links within text. */
.link {
  text-decoration: none;
  color: var(--accent-colour);
  white-space: nowrap;
}

.link:hover {
  text-decoration: underline;
}


/*----------------------------New Project-----CSS Rest------------------------------------------------------------*/
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
  - We added padding: 0 ourselves to remove unwanted padding (e.g. from lists)
*/
/** {
  margin: 0;
  padding: 0;
}*/
/*
  3. Allow percentage-based heights in the application
*/
html,
body {
  height: 100%;
}

/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  background: #f2f2f2;
  /*background-color: var(--background-color);*/
  /* background: #ddd; */
  margin: 0px;
  box-sizing: border-box;
  font-family: "Public Sans", sans-serif, "Microsoft YaHei", "微软雅黑", Helvetica, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", Helvetica, Tahoma, "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
  /*  color: var(--text-dark);*/
  color: #212529;
  -webkit-font-smoothing: antialiased;
}

/* for dark and light mode */
body.dark {
  /* background-color: #212F3C; */
  background-color: rgb(30, 34, 39);
  color: #FFFFF0;
}

body.dark a {
  color: #00BFFF !important;
}

body.dark code[class*=language-],
body.dark table tbody>tr:nth-child(odd)>td,
body.dark table tbody>tr:nth-child(odd)>th {
  background: #282c34
}

body.dark .post {
  background-color: #2690d4;
  color: white;
  /* chocolate; */
}

/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}

/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
blockquote,
pre,
ol,
ul,
form,
hr h6 {
  overflow-wrap: break-word;
  margin: 3px;
  padding: 3px;
}


/*----------------------------New Project-----CSS Rest------------------------------------------------------------*/

.post-form {
  display: grid;
  grid-template-columns: 80%;
  grid-template-areas: "form" "form-p-tiltle" "form-p-desc" "form-p-body" "form-p-button";
  justify-content: center;
  grid-row-gap: 2rem;
}


/*----------------------------New Project-----Login - Register------------------------------------------------------------*/
.auth-form {
  /*  display: grid;*/
  /* The following sizing is use full to limit its width to top general grid declaration width  */
  /*  grid-template-columns: 1fr 1fr;*/
  /*  grid-template-columns: repeat(2, minmax(10px, 1fr));*/
  background: #333;
  color: #fff;
  padding: 2rem;
}

.auth-form a {
  color: yellow;
}

.form-form {

  display: grid;
  grid-template-columns: minmax(10px, 50%);
  justify-content: center;
  align-content: center;
  grid-row-gap: 1.5rem;
  text-align: center;

}


.form-group {
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  /* both align-items / justify-items  to center */


  grid-row-gap: 1rem;
  text-align: center;

  justify-content: center;
  align-content: center;
  /* column axis */

}


.form-form-col {
  text-align: center;
}



.post-thumbnail {
  grid-area: form-p-tiltle;
  width: 100%;
}


div.post-body>table {
  border-collapse: collapse;
  width: 98%;
  margin-right: 15px;
}

div.post-body>table>thead {
  background-color: #15c775;
  height: 100%;
}

div.post-body>table>tbody>tr>td {
  padding: 10px;
  /*  margin: 15px;*/
}

div.post-body>table>tbody>tr:nth-child(even) {

  background-color: #f2f2f2;
}

.pagination ul {

  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  /* set the alignment of the grid within the grid container COLUMN AXIS. use full in case of pagination as can you see ELEMENT OF GRID */
  align-content: center;
  /* set the alignment of the grid within the grid container ROW AXIS. use full in case of pagination as can you see */
  /* or
`place-content:` FOR ABOVE=`<align-content> / <justify-content> ` place-content sets both the align-content and justify-content properties in a single declaration.
<align-content> / <justify-content> 
eg: 
place-content: center;

  */


  align-items: center;
  /* column axis */
  align-content: center;
  /* column axis */
  justify-items: center;
  /* row axis ELEMENT OF ELEMENT IN GRID */
  /* or
`place-items:` FOR ABOVE TWO `<align-items> / <justify-items>` sets both the align-items and justify-items properties in a single declaration.
<align-items> / <justify-items>
eg: 
place-items: center;

  */

  text-align: center;
  justify-self: center;
  Align-self: center;
  list-style-type: none;
  grid-column-gap: 3rem;
}


.post-form-container {
  background: rgb(141, 151, 161);
  color: #fff;
  padding: 2rem;
  border: 1px solid gray;
}

.post-thumbnail {
  grid-area: post-thumbnail;
}

.post-content {
  grid-area: post-content;
}

.post-date {
  grid-area: post-date;
}

.post-author {
  grid-area: post-author;
}

.post-body {
  grid-area: post-body;
}

.post-body h1 {
  /*font-size: 140%;*/
  font-size: 24pt;
  font-weight: bolder;
}

.post-body h2 {
  /*font-size: 130%;*/
  font-size: 24pt;
  font-weight: bolder;
}

.post-body h3 {
  font-size: 120%;
}

.post-body p {
  font-size: 15pt;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 1.5rem;

}

.post-body a {
  /*color: #0d6efd;*/
  color: #6301ed;
}

.post-title {
  display: grid;
  justify-items: center;
  padding-right: 2rem;

}

.post-footer {
  display: grid;
  justify-items: end;
  padding-right: 2rem;

}

/*
.post {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-areas:
    "post-thumbnail post-content"
    "post-date  post-author"
    "post-body post-body";
  justify-self: center;
  grid-row-gap: 1rem;
  margin-bottom: 2rem;
  background-color: #ddd;
  
  padding: 20px;
  border-radius: 28px;
}



@media (max-width: 720px) {
  .post {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "post-thumbnail"
      "post-content"
      "post-date"
      "post-author"
      "post-body";
    justify-self: center;
    grid-row-gap: 1rem;
    padding: 20px;
  }

  .post-title h1 {
    font-size: 16pt;
    font-weight: bolder;
  }

  .post-body h1 {
    font-size: 14pt;
    font-weight: bolder;
  }

  .post-body h2 {
    font-size: 14pt;
    font-weight: bolder;
  }

  .post-body p,
  ol {
    font-size: 12pt;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 1.5rem;
    padding-left: 10px;

  }

}

*/

.oldgrid {
  display: grid;
  grid-template-columns: 15% minmax(10px, 1fr) 15%;
  /* grid-template-rows: 1fr minmax(10px, 1fr) 1fr; */
  grid-template-areas:
    "header header header"
    "leftbody content rightbody"
    "footer footer footer";
  grid-row-gap: 1rem;
}


.grid {
  display: grid;
  grid-template-columns: 15% minmax(10px, 1fr) 15%;
  /* grid-template-rows: 1fr minmax(10px, 1fr) 1fr; */
  grid-template-areas:
    " . content .";
  /*  grid-row-gap: 1rem;*/
  /*  height: 100%;*/
}

@media (max-width: 720px) {
  .grid {
    grid-template-columns: minmax(10px, 1fr);
    grid-template-areas:
      "header"
      "content"
      "leftbody"
      "rightbody"
      "footer";
    grid-row-gap: 1rem;
  }

  ul {
    margin: 1px;
    padding-inline-start: 1px;

  }

  html {
    font-size: 1rem;
    font-weight: 400;

  }
}

/*----------------------------New Project-----------------------------------------------------------------*/