/* - - - - - - - - - - - - - - - - - - - - - - */

:root {
  --red: rgb(233, 64, 64);
  --green: rgb(89, 195, 85);
  --gold: rgb(246, 244, 101);
}

/* Default stlyings */
html, header, footer, body {
  background-color: rgb(15, 15, 15);
}
h2, h3, h4, h5, h6 {
  color: rgb(210,210,210);
}
h1 {
  font-size: 220%;
  color: var(--green);
}

/* - - - - - - - - - - - - - - - - - - - - - - */

/* Regular stylings */
div.regular {
  color: rgb(180,180,180);
  background-color: rgb(30,30,30);
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  padding: 12px;
  border-radius: 10px;
  line-height: 1.85;
  counter-reset: section;
}
.regular p {
  text-indent: 5%;
  color: var(--green);
}
.regular h1, h2, h3, h4, h5, h6 {
  color: var(--red);
}
.regular img {
  border: solid 4px rgb(255,255,255);
}
.regular table {
  border-collapse: collapse;
  border: solid 4px white;
  width: flex;
  height: flex;
  /* margin: 1.17%; */
}
.regular td {
  border: 1px solid white;
  background-color: rgb(37, 37, 37);
  padding: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  color: white;
  width: fit-content;
}
.regular th {
  border: 1px solid white;
  background-color: rgb(30, 30, 30);
  color: var(--red);
  padding: 8px;
  text-align: left;
  width: flex;
}
.regular blockquote {
  color: yellow;
  background-color: rgba(41, 73, 109, 0.5);
}

/* - - - - - - - - - - - - - - - - - - - - - - */

/* Miscellaneous */
.bibliography p {
  padding-left: 5%;
  text-indent: -5%;
}
#icon {
  height: 15px;
  padding-inline-end: 11px;
}
#template {
  width: flex;
  height: flex;
}
.column {
  padding: 7px;
}
.row {
  display: flex;
  white-space: nowrap;
  overflow-x: scroll;
  width: 75%;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  border: solid 4px rgb(59, 97, 204);
}
.brow {
  display: flex;
}
.bcolumn {
  float: right;
  width: 50%;
  margin-bottom: 16px;
  padding: 0 8px;
  border: solid 1px blue;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border: solid 1px var(--red);
}
.title {
  color: grey;
}
.container {
  padding: 0 16px;
  height: 20ch;
}


/* - - - - - - - - - - - - - - - - - - - - - - */

/* Title header */
div.header {
  background-color: rgb(50,50,50);
  color: white;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}
.header h1 {
  font-size: 275%;
  margin-bottom: 13px;
  color: var(--green);
}
.header h5 {
  margin-top: 13px;
}

/* - - - - - - - - - - - - - - - - - - - - - - */

/* Navbar base & bg */
.topnav {
  background-color: rgb(70,70,70);
  overflow: hidden;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}
/* Navbar text styling */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 10px;
}
/* Add a red background color to navbar links on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  /* background-color: rgba(153, 153, 153, 0.2); */
  background-color: var(--red);
}
.topnav #red {
  background-color: var(--red);
}
.topnav #green {
  background-color: var(--green);
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
  cursor: pointer;
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  border-radius: 10px;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(35,35,35);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 10px;
}
/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: var(--red);
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* - - - - - - - - - - - - - - - - - - - - - - */

/* Footer stylings */
div.footer {
  background-color: rgb(50,50,50);
  overflow: hidden;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 82%;
  align-items: normal;
  padding: 13px;
  color: white;
}
.footer h1 {
  color: white;
}
.footer-flex {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

/* Flexbox stylings */

div.flexbox {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
div.col {
  color: white;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  padding-top: 0px;
  font-size-adjust: 100%;
}

@media screen and (max-width: 1080px) {
  div.header { 
    width: 100%;
  }
  div.topnav { 
    width: 100%;
  }
  div.footer { 
    width: 100%;
  }
  .footer-flex {
    display: block;
  }
  div.regular {
    width: 95%
  }
}

/* - - - - - - - - - - - - - - - - - - - - - - */

.grid-container {
  display: grid;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  grid-template-columns: auto auto auto;
  padding-right: 10px;
}
.grid-item {
  border: 2px solid rgba(75, 75, 75, 0.8);
  padding: 10px;
}
#grid {
  width: 300px;
  height: 187px;
}

@media screen and (max-width: 1204px) {
  .grid-container {
    width: 100%;
    display: block;
  }
}

@media screen and (max-width: 1850px) {
  .grid-container {
    grid-template-columns: auto auto;
  }
}


/* - - - - - - - - - - - - - - - - - - - - - - */

.gallery-container {
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  row-gap: 0px;
}
.gallery-item {
  padding: 0px;
}

/* - - - - - - - - - - - - - - - - - - - - - - */

.img-grid-row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.img-grid-column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0px;
}

.img-grid-column img {
  margin-top: 0px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .img-grid-column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .img-grid-column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}