@import url(https://fonts.googleapis.com/css2?family=Merriweather);

body {
  background-color: rgb(84, 192, 228);
  background-image: url(/image/sears.webp);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

h1 {
  font-family: Merriweather;
  color: #fcc200;
  margin: 0.5%;
}

h2 {
  font-family: Merriweather;
  color: #fcc200;
  margin: 0.5%;
}

h3 {
  font-family: Merriweather;
  color: #fcc200;
  margin: 0.5%;
}

p {
  font-family: Merriweather;
  text-align: justify;
  color: #f78062;
  margin: 0.5%;
}

a {
    color: #fcc200;
    background-color: #315991;
}
/*
div {
    backdrop-filter: brightness(40%);
    border: #0f110f;
    border-style: solid;
    margin: 2.5%;
}
*/

.mainl {
  backdrop-filter: brightness(40%);
  border: #0f110f;
  border-style: solid;
  margin: 5px;
  float: left;
  width: calc(50% - 25px);
}

.mainr {
  backdrop-filter: brightness(40%);
  border: #0f110f;
  border-style: solid;
  margin: 5px;
  float: right;
  width: calc(50% - 25px);
}

.sidebar {
  width: calc(100% - 175px);
    height: 300px;
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  float: left;
  background-color: #315991;
  border-style: solid;
  border-color: #fcc200;
  margin: 5px;  
  overflow-x: hidden; /* Disable horizontal scroll */
}

.badges {
  width: 140px;
  height: 300px;
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  float: right;
  background-color: #315991;
  border-style: solid;
  border-color: #fcc200;
  margin: 5px;  
  overflow-x: hidden; /* Disable horizontal scroll */
}

li {
  font-family: Merriweather;
  font-size: 18px;
  color: #f78062;
  text-indent: 2.5%;
}

.image { /* landscape */
  width: 210px;
  float: right;
  height: auto;
  padding: 1%;
}

.image-thin { /* portrait */
  width: 100px;
  float: right;
  height: auto;
  padding: 1%;
}

.badge {
  width: fit-content;
  float: right;
  height: auto;
}