* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#wrapper {
  max-width: 1100px;
  margin: 0 auto;
  background-color: white;
}

header {
  display: flex;
  flex-wrap: wrap;
  height: 110px;
  padding-top: 30px;
  justify-content: center;
}

#logo {
  width: 180px;
  height: 70px;
}

#frontpageimg {
  height: 500px;
  width: 100%;
}

#quote {
  padding-top: 10px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
}

.date-display {
  font-family: "Montserrat", sans-serif;
  color: rgb(141, 141, 141);
  font-size: small;
}

#img1 {
  width: 100%;
  height: 100%;
}

figcaption {
  font-family: sans-serif;
  font-size: 15px;
  color: rgb(175, 175, 175);
  font-style: italic;
  padding-bottom: 10px;
}

nav {
  padding-bottom: 10px;
  border-bottom: 0.5px solid rgb(206, 206, 206);
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

li {
  list-style-type: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

li a {
  color: rgb(48, 48, 48);
  padding: 20px;
  font-family: sans-serif;
  text-decoration: none;
  font-size: small;
  font-weight: 500;
}

nav li a:hover {
  color: grey;
}

#login {
  background-color: rgba(240, 237, 237, 0.459);
  border-radius: 5%;
}

h1 {
  font-family: "Montserrat", sans-serif;
  font-size: medium;
  color: rgb(61, 61, 61);
  text-align: left;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-size: medium;
  color: rgb(61, 61, 61);
}

h4 {
  font-family: "Montserrat", sans-serif;
  color: rgb(53, 53, 53);
}

h5 {
  font-family: "Montserrat", sans-serif;
  color: rgb(85, 85, 85);
  font-size: 13px;
  font-weight: lighter;
  border-bottom: solid rgb(189, 189, 189) 0.5px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  line-height: 30px;
}

p {
  font-family: "Montserrat", sans-serif;
  font-size: medium;
  text-align: left;
  color: rgb(107, 107, 107);
  line-height: 30px;
}

.grid-container {
  display: grid;
  grid-template-areas:
    "left left left left main main main main right right right"
    "left left left left bottom bottom bottom bottom right right right"
    "footer footer footer footer footer footer footer footer footer footer footer";

  gap: 10px;
  padding: 10px;
  font-family: "Montserrat", sans-serif;
}

.grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item0 /*leftnavigation*/ {
  grid-area: left;
  /*border: solid 1px rgb(212, 212, 212);*/
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  max-width: 200px;
  line-height: 20px;
}

.item0 ul {
  text-align: left;
}

.item0 ul li a {
  font-size: medium;
  color: rgb(107, 107, 107);
}

.item0 ul li a:hover {
  color: rgb(204, 204, 204);
}

#img5 {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-right: 10px;
  width: 120px;
  height: 110px;
}
#img5 {
  /*This is the picture for the responsible camper logo*/
  margin-right: 10px;
  transition: transform 0.25s ease;
}

#img5:hover {
  -webkit-transform: scale(2); /* or some other value */
  transform: scale(2);
}

.item1 {
  grid-area: main;
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
}

article {
  text-align: justify;
  margin-top: 10px;
  height: auto;
  padding: 10px 10px 10px 10px;
}

article a {
  text-decoration: none;
  color: rgb(126, 126, 126);
}

article a:hover {
  color: grey;
}

.class1 /*bullet points inside articles*/ {
  font-size: medium;
  line-height: 30px;
  color: rgb(126, 126, 126);
}

.li1 {
  list-style: circle;
}

.container {
  padding: 10px 10px 10px 10px;
  display: flex;
  flex-direction: row;
}

.container p a {
  font-size: medium;
  font-family: "Montserrat", sans-serif;
  line-height: 30px;
}

#img3 {
  padding-right: 10px;
  width: 80;
  height: 120px;
}

.item2 /*rightnavigation*/ {
  grid-area: right;
  margin-right: 20px;
  margin-left: 40px;
  line-height: 20px;
  font-family: "Montserrat", sans-serif;
}

.item2 ul {
  text-align: left;
}

.item2 ul li a {
  font-size: medium;
  color: rgb(146, 146, 146);
}

.item2 ul li a:hover {
  color: rgb(204, 204, 204);
}

.item3 /*bottomcontainer*/ {
  grid-area: bottom;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  margin-left: 50px;
  margin-right: 70px;
  justify-content: center;
}

h6 {
  font-size: 14px;
  font-weight: 500;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 25px;
  color: rgb(131, 131, 131);
  padding: 0px 10px 0px 10px;
  text-align: center;
}

.item4 /*footern*/ {
  grid-area: footer;

  display: flex;
  flex-wrap: wrap;
  height: auto;
  margin-bottom: 20px;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: small;
}

#copyright {
  border-right-style: solid;
  border-color: rgb(78, 78, 78);
  color: rgb(71, 71, 71);
  padding-right: 10px;
  padding-left: 10px;
  margin-right: 30px;
  font-family: "Montserrat", sans-serif;
  font-size: small;
}

.fa {
  padding: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  color: rgb(0, 38, 255);
}

.fa-twitter {
  color: rgb(0, 183, 255);
}

.fa-instagram {
  color: rgb(255, 0, 242);
}

.fa-youtube {
  color: rgb(255, 0, 0);
}

#contact {
  text-align: center;
  color: rgb(87, 87, 87);
  margin-left: 10px;
  padding-right: 40px;
  font-family: "Montserrat", sans-serif;
}

#img4 {
  padding-right: 10px;
  width: 80px;
  height: 120px;
}
#img4 {
  /*This is the picture setting for the SPOTTED Tab of the Website*/
  margin-right: 10px;
  transition: transform 0.25s ease;
}

#img4:hover {
  -webkit-transform: scale(2); /* or some other value */
  transform: scale(2);
}

table {
  font-size: 0.5em;
}

th {
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: rgb(233, 233, 233);
}

td {
  text-align: left;
}

/*style starts for drop downb menu*/
.dropbtn {
  background-color: rgb(255, 255, 255);
  color: rgb(87, 87, 87);
  padding: 10px;
  font-size: 15px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  color: rgb(161, 161, 161);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  font-family: "Montserrat", sans-serif;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

/*style ends for sropdown menu*/

@media only screen and (max-width: 1044px) {
  .item0 {
    /*left navidation*/
    grid-area: bottom;
    margin-bottom: 60px;
    font-family: "Montserrat", sans-serif;
    margin-left: 40px;
    line-height: 20px;
  }

  .item2 /*rightnavigation*/ {
    grid-area: bottom;
    margin-top: 380px;
    font-family: "Montserrat", sans-serif;
  }

  .container {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
  }

  .container p a {
    font-size: medium;
    font-family: "Montserrat", sans-serif;
    line-height: 30px;
  }

  #img3 {
    padding-right: 10px;
    width: 100%;
    height: auto;
  }

  #frontpageimg {
    height: 300px;
    width: 100%;
  }

  #img5 {
    padding-right: 10px;
    width: 130px;
    height: 120px;
  }
  #img5 {
    /*This is the picture setting for the SPOTTED Tab of the Website*/
    margin-right: 10px;
    transition: transform 0.25s ease;
  }

  #img5:hover {
    -webkit-transform: scale(2); /* or some other value */
    transform: scale(2);
  }

  #img4 {
    padding-right: 10px;
    width: 100%;
    height: auto;
  }
  #img4 {
    /*This is the picture setting for the SPOTTED Tab of the Website*/
    margin-right: 10px;
    transition: transform 0.25s ease;
  }

  #img4:hover {
    -webkit-transform: scale(2); /* or some other value */
    transform: scale(2);
  }
  .date-display {
    display: none;
    font-family: "Montserrat", sans-serif;
    color: rgb(141, 141, 141);
    font-size: small;
  }

  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
  }

  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }

  /*
	Label the data
	*/
  td:nth-of-type(1):before {
    content: "Report Date";
  }
  td:nth-of-type(2):before {
    content: "Source";
  }
  td:nth-of-type(3):before {
    content: "Heading";
  }
  td:nth-of-type(4):before {
    content: "Author";
  }
  td:nth-of-type(5):before {
    content: "Victim";
  }
}