/* 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." */

body {
  background-color: #2d3040;
  color: #f4f3fe;
  font-family: "Cambria", "Georgia", sans-serif;
  font-size: 18px;
  text-align: center;
  padding: 5px;
  margin-left: 12%;
  margin-right: 12%;
}

@media only screen and (max-width: 900px) {
  body {
    margin: 0;
  }
}

nav ul {
  padding: 0; /* Remove the default padding. */
  list-style: none;
  /* I want everything inside the nav bar centered, thus: */
  text-align: center;
}

img {
    max-width: 100%;
    height: auto;
}
a:link {
    color: #bac2ce;
    text-decoration: none;
}

a:visited {
    color: #bac2ce;
}

p {
  margin-top: 0px;
  padding: 0px;
}

h3 {
  margin-bottom: 0;
}


/* Solid border */
.hr1 {
    width: 100%;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2;
    background-color: #e4346d;
    border: 0 none;
}

.hr2  {  
    width: 100%;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background-color: #e4346d;
    border: 0 none;
}

.hr3 {
    width: 30%;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    border: 0 none;
}


.nav-cont {
  font-family: "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  justify-content: center;
  text-align: left;
  background-color: #2d3040;
  align-items: center;
}
.nav-item {
  margin: 15px;
  justify-content: center;
  align-items: center;
}
/*test*/

.wrapper {
  margin: 15px;
}

.row {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  justify-content: center;
}

.leftcol {
  height: auto;
  align-self: flex-end;
}
.rightcol {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
  max-width: 400px;
  height: auto;
  align-self: baseline;
  margin-top: 10px;
  text-align: left;
}
.centcol {
  display: flex;
  flex-direction: column;
  height: auto;
  align-self: center;
  padding: 10px;
  text-align: center;
  max-width: 800px;
}

.centmid {
  display: flex;
  flex-direction: column;
  height: auto;
  align-self: center;
  padding: 10px;
  text-align: left;
  max-width: 400px;
}


@media screen and (min-width: 800px) {
  .column {
    flex: 1;
    margin: 0;
  }
}
  .double-column {
    flex: 2
  }

sp {
  word-spacing: 20px;
} 

.footer {
  font-size: 14px;
  color: #bac2ce;
  font-family: "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;
}

/*PAGINATION TEST*/

htm,
body {
  font-family: "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;
}

a {
  text-decoration: none;
}

.pagination-wrapper {
  text-align: center;
  margin: 10px 0;
}

.pagination {
  display: inline-block;
  height: 50px;
  margin-top: 50px;
  padding: 0 10px;
  border-radius: 35px;
  background-color: #1e202b;
}
@media only screen and (max-width: 1199px) {
  .pagination {
    height: 50px;
    margin-top: 50px;
    padding: 0 10px;
    border-radius: 25px;
  }
}

.page-numbers {
  display: block;
  padding: 0 25px;
  float: left;
  transition: 400ms ease;
  color: #595959;
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 50px;
}
.page-numbers:hover, .page-numbers.current {
  background-color: #e4346d;
  color: #fff;
}
.page-numbers.prev:hover, .page-numbers.next:hover {
  background-color: transparent;
  color: #e4346d;
}
@media only screen and (max-width: 900px) {
  .page-numbers {
    padding: 0 15px;
    font-size: 16px;
    line-height: 50px;
  }
}
@media only screen and (min-width: 120px) and (max-width: 1024px) {
  .page-numbers {
    padding: 0 14px;
    display: none;
  }
  .page-numbers:nth-of-type(2) {
    position: relative;
    padding-right: 50px;
  }
  .page-numbers:nth-of-type(2)::after {
    content: "...";
    position: absolute;
    font-size: 25px;
    top: 0;
    left: 45px;
  }
  .page-numbers:nth-child(-n+3), .page-numbers:nth-last-child(-n+3) {
    display: block;
  }
  .page-numbers:nth-last-child(-n+4) {
    padding-right: 14px;
  }
  .page-numbers:nth-last-child(-n+4)::after {
    content: none;
  }
}