* {
  
  padding: 0;
  margin: 0; 
  
}
body {
  background-image: url("https://user-images.githubusercontent.com/79335372/112549888-7dc60780-8d8c-11eb-9747-83811f321dd9.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

header {
  
  background: linear-gradient(to bottom right, #F8C26A, #F4E2C4,#cbedf3);
  border-radius: 5px;
  padding: 25px;
  border: 2px solid #5E6D62;
  box-shadow: 2px 2x 6px #738678;
  display: flex;
}
h1 {
  font-size: 300%;
  color: #334538;
  text-shadow: 2px 2px #738678;
  text-align: left;
  font-family: 'Newsreader', serif;
  font-weight: bolder;
}
h2 {
  color: #334538;
  font-style: italic;
  
  
  text-align: left;
  font-family: 'Newsreader', serif;
}


@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

.search-box {
background: linear-gradient(to top right, #eb835a,#F4E2C4,#cbedf3);
width: 35%;
height: 30%;
display: flex;
font-family: 'Newsreader';
position:inherit;
/* margin-left: 65%; */
flex-direction: row;
justify-content: flex-end;
padding-left: 6%;
border: 2px solid #5E6D62;
box-shadow: 2px 2px 6px #738678;
border-radius: 5px;
margin-top: 5px;
margin-left: 5px;


}

.search {
margin-right: 20%;
overflow: hidden;

}

.search > h3 {
font-weight: normal;
}

.search > h1,
.search > h3 {
color: #334538;
margin-bottom: 15px;
text-shadow: 0 1px #0091c2;
}

.search > div {
display: inline-block;
position: relative;
filter: drop-shadow(0 1px #0091c2);
}

.search > div:after {
content: "";
background: #cbedf3;
width: 4px;
height: 20px;
position: relative;
top: 40px;
right: 2px;
transform: rotate(135deg);
}

.search > div > input {
color: #343939;
font-size: 16px;
background: #cbedf3;
width: 40px;
height: 40px;
padding: 10px;
border: solid 3px #5E6D62;
outline: none;
border-radius: 5px;

transition: width 0.5s;
}

.search > div > input::placeholder {
color: #343939;
opacity: 0;
transition: opacity 150ms ease-out;
}

.search > div > input:focus::placeholder {
opacity: 1;
}

.search > div > input:focus,
.search > div > input:not(:placeholder-shown) {

width: 100%;
}

.list-group-search {
  position: relative;
  display: block;
  padding: 8px;
  background-color: #cbedf3;
  border: 1px solid #5E6D62;
  border-radius: 5px;
}

.list-group-search:hover {
  cursor:pointer;
  outline:none;
  border-color: #9ecaed;
  box-shadow: 0 0 10px #9ecaed; 
}

/*-----------------------*/
/* Parent wrapper to carousel. Width can be changed as needed. */
.carousel-wrapper {
  overflow: hidden;
  width: 50%;
}

/* Apply 'border-box' to 'box-sizing' so border and padding is included in the width and height. */
.carousel-wrapper * {
  box-sizing: border-box;
}

.carousel {
  transform-style: preserve-3d;
}

/* By default we're hiding items (except the initial one) until the JS initiates. Elements are absolutely positioned with a width of 100% 
(as we're styling for mobile first), letting the content's height dictate the height of the carousel. Our magic property here for all our animation needs is 'transition', 
taking the properties we wish to animate 'transform' and 'opacity', along with the length of time in seconds. */

#news-section{
  margin-top:100px;
  background-color: rgb(248, 228, 190, 0.3);
}

#news_description{
  font-size:18px;
  text-align:left;
}

#news_title{
  font-size: 22px;
}

#news-image{
  max-height: 60%;
  max-width:60%;
  object-fit: contain;

}


.news_card {
  display:none;
  position: absolute;
  top:0;
  padding: 1rem 4rem;
  z-index: 100;
  transition: transform .5s, z-index .5s;
  border: #5E6D62 2px solid;
  border-radius: 4px;
  text-align: center;
  background-color:  #cbedf3;
  color: #334538;
  
}

/* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
.news_card.active {
  display:block;
  position: relative;
  z-index: 900;
  background-color: #f8e4be;
  border-radius: 4px;
  border: 2px solid #5E6D62;
  max-height: 500px;
}



/* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
/* Set 'z-index' to sit behind our '.active' item. */
.news_card.prev,
.news_card.next {
z-index: 800;
}

#reddit-section{
  display:flex;
  margin-top:100px;
  background-color: rgb(248, 228, 190, 0.3);
  margin-bottom:100px;
}
.reddit-card {
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  background-color: #f8e4be;
  border-radius: 4px;
  border: 2px solid #5E6D62;
  line-height: 1;
  text-decoration: none;
  margin: 3px;
}

.reddit-card img{
  text-decoration: none;
  margin-top: 10px;
}

#news-header{
  background-color: rgb(248, 228, 190, 0.75);
  font-size:30px;
  padding-left:20px;
}

#reddit-header, #sudoku-header{
  background-color: rgb(248, 228, 190, 0.75);
  font-size:30px;
  padding-left:20px;
  margin-left:10px;
  margin-right:10px;

}

#sudoku-section{
  border-left: 2px solid #f8e4be
}

iframe{
  border-radius: 3px;  
  font-family: 'Newsreader';
}

@media screen and (max-width: 992px) {
  form {
    width: 50%;
    object-fit: ;
  }
}

/* Cards are stacked on top of each other at 768px or smaller */
@media screen and (max-width: 768px) {
  form {
    width: 100%;
  }
}


/* Translate previous item to the left */
.news_card.prev {
transform: translateX(-100%); /* Move 'prev' item to the left */
}

/* Translate next item to the right */
.news_card.next {
transform: translateX(100%); /* Move 'next' item to the right */
}

.carousel__button--prev,
.carousel__button--next {
  position:absolute;
  margin-right: 5%;
  margin-left: 5%;
  top:70%;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
  border-radius: 50%;
  cursor: pointer; 
  z-index: 1001; /* Sit on top of everything */
  
  background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
  background-image: -o-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);

  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(73,132,180)),
      color-stop(1, rgb(97,155,203))
  );
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0px -1px 0px rgba(0,0,0,.5);
  -webkit-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
  -moz-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
  box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
}

  /*  opacity: 0;  Hide buttons until carousel is initialised 
  transition:opacity 1s;*/


.carousel__button--prev {
  left:0;
}

.carousel__button--next {
  right:0;
}

/* Use pseudo elements to insert arrows inside of navigation buttons */
.carousel__button--prev::after,
.carousel__button--next::after {
  content: " ";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 45%;
  left: 54%;
  border-right: 2px solid #cbedf3;
  border-bottom: 2px solid #cbedf3;
 
  
  transform: translate(-50%, -50%) rotate(135deg);
}
.carousel__button--next::after {
  left: 47%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

#quoteblock{
  border: darkgray solid 3px;
  padding: 5px 10px;
  display: inline;
  border-radius: 10px;
  margin-left:5px;
}


/* @media screen and (max-width: 768px) {
  .flexbox {
    margin-top: -48%;
  }
 
  } */