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

 .schibsted-grotesk grot{
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 400;
  font-style: normal;
} 


/*.manrope manrope{
  font-family: "Manrope", sans-serif;*/
/*  font-optical-sizing: auto;*/
/*  font-weight: 400; */
/*  font-style: normal; */
/*}*/

h1 {
  color: black;
  font-size: 24pt;
  font-weight: 600;
}

h2 {
  color: black;
  font-size: 20pt;
  font-weight: 500;
}

h3 {
  color: black;
  font-size: 18pt;
  font-weight: 500;
}

h4 {
  color: black;
  font-size: 16pt;
  font-weight: 400;
}


body {  
  background: linear-gradient(180deg, rgba(198, 198, 198, 1), rgba(139, 117, 96, 1)), url("images/white-recycle-paper-texture.jpg");
/*  background-color: red;*/
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* optional: makes texture stay put while scrolling */
  background-blend-mode: overlay;

  
/*  color: #1f1f1f;*/
  font-family: "Schibsted Grotesk";
  line-height: 1.5;
  width: 90%;
  margin: 0 auto;
  top: 0%;
  left: 2%;
  font-size: 14pt;
  }

q {
  font-style: italic;
  font-size: 22pt;
}

.divbasicalign{
  width:100%;
  margin: 0px auto;
  padding-left: 2.5%;
}

.divmain{
  background-color: rgba(255, 255, 255, 0.1);
  line-height: 1.5;
  width: 96%;
  margin: 0px auto;
  /*padding-top: 0.5%;*/
  padding-bottom: 1%;
  padding-left: 2%;
  padding-right: 2%;
}

.divmaingrid{
  display: flex;
  flex-direction: column; /* or row if you want image + text side by side */
  align-items: flex-start;
}
.divstory{
  background-color: rgba(255, 255, 255, 0.4);
  line-height: 2.0;
  border-radius: 4px;
  border: 1px rgba(0, 0, 0, 0.5);
  width: 100%;
  margin: 40px auto;
  padding-left: 2.5%;
}

.divcallout{
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  border-radius: 0px 0px 4px 4px;
  /*border: 1px rgba(0, 0, 0, 0.5);*/
  width: 100%;
  margin: 0px auto;
}

.divimage {
  flex-shrink: 0; /* prevent image div from stretching or shrinking */
}

.divimage img {
  width: 15em; /* or whatever fixed/relative size looks good */
  height: auto;
  border-radius: 4px;
  display: block;
  margin-right: 20px;
}

.divimagequad {
  padding-left: 0;
  padding-right: 0;
}


.divimagequad img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
}



.divtext {
  flex: 1; /* allows text to take remaining width */
}

/* Nav bar */
ul.nav-bar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.50);
  display: flex;
  border-radius: 4px 4px 0px 0px;
  justify-content: flex-end;
}

ul.nav-bar li {
    border-right: 1px solid #bbbbbb;

}

ul.nav-bar li a {
  display: block;
  color: black;
  padding: 10px 10px;
  text-decoration: none;
}

ul.nav-bar li a:hover {
  color: white;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 0px 0px 0px 0px; 
}

ul.nav-bar li:last-child {
  border-right: none;
}

/*End Nav Bar*/

.divstoryfirstline
{
  text-indent: 0em;
}

.divstorysubline
{
  text-indent: 2em;
}

footer
{
  background-color: rgba(0, 0, 0, 0.75);
  height: 40px;
  width: 96%;
  color: white;
  font-size: 12pt;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 0.25%;
  padding-bottom: 0.5%;
  display: flex;
  justify-content: flex-end;
}

/* Set link color */
a {
  color: black;
}

/* Nav Dropdown */
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown:hover .dropbtn {
  background-color: rgba(0, 0, 0, 0.75);
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

.dropdown-content a:hover {
  background-color: rgba(0, 0, 0, 0.75);
  }

.dropdown:hover .dropdown-content {
  display: block;
}
/*End Nav Dropdown*/

/*Grid for multi-column layout*/
.container {
  width: 96%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 2%;
 /* grid-template-rows: 50% 50%;*/
 /* grid-auto-rows: auto;*/
  background-color: rgba(100, 100, 100, 0.25);
 /* justify-items: start;*/
 /* padding: 10px;*/
  min-height: 500px;


}
.container div {
 /*background-color: rgba(255, 255, 255, 0.5);*/
 /*border: 1px solid red;*/
  width: 100%;
/*  border-bottom: 1px solid black;*/
/*border-bottom: none;*/
  padding: 0%;
  text-align: left;
  border-bottom: 1px solid black;
}

/*Stopping the bottom border being inherited into the child*/
.container .divimagequad {
  border-bottom: none;
}


/*
.container img{
  border-bottom: 1px solid red;
}
*/


/* End Multi column layout */

/*Button Designs*/
.button{
  background-color: white;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  margin-top: auto;
  margin-bottom: 1rem;
}

.button:hover{
  background-color: gray;
}