@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

html,
body {
  margin: 0px auto;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
  min-width: 320px;
}

@media screen and (max-width: 319px) {

  html,
  body {
    overflow-x: scroll;
  }
}

h1 {
  padding-top: 10px;
  z-index: 2;
  color: #454545;
}

h2 {
  font-size: 15px;
}

h3 {
  left: 0px;
  text-align: left;
}

hr {
  border: 5px solid #e9e9e9;
  border-radius: 5px;
}

a {
  color: rgb(46, 46, 46);
  opacity: 0.7;
  text-decoration: none;
}

a:hover {
  opacity: 1;
}

li {
  list-style-type: none;
}

ul {
  margin-left: 0;
  padding-left: 0;
}

#tribute-info {
  left: 0px;
  text-align: left;
}

#tribute-info-1 {
  left: 0px;
  text-align: left;
}

#tribute-link {
  font-size: 30px;
}

.quill-bg {
  background-image: url(https://cdn-icons-png.flaticon.com/64/16/16294.png);
  background-repeat: no-repeat;
  width: 64px;
  height: 64px;
  z-index: 1;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0.1;
}

@media screen and (max-width: 319px) {
  .quill-bg {
    background-image: none;
  }
}

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0px auto;
}

@media screen and (min-width: 1100px) {
  main {
    width: 85%;
  }
}

blockquote {
  color: gray;
  font-style: italic;
  font-size: 1.2em;
  line-height: 1.5;
  border-left: solid 0.5rem;
  border-radius: 2px;
  padding-left: 2rem;
  border-color: rgb(233 233 233);
}

@media screen and (min-width: 539px) {
  blockquote {
    font-size: 2em;
  }
}

.page-bar {
  padding: 20px;
  background: rgb(2, 0, 36);
  background: linear-gradient(90deg,
      rgba(2, 0, 36, 1) 0%,
      rgba(61, 61, 68, 1) 35%,
      rgba(44, 91, 101, 1) 100%);
}

.container {
  margin: 15px;
}

/* Mobile‌ ‌First‌ Flex ‌Design‌ */
.block-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Desktop Screen */
@media screen and (min-width: 1100px) {
  .block-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
  }
}

.block-column {
  padding-top: 10px;
}

/* Desktop Screen */
@media screen and (min-width: 1100px) {
  .block-column {
    width:43vw;
  }
}

.second-sec {
  margin: 0 auto;
  max-width: 70vw;
} 

.block-item-1 {
  text-align: justify;
  text-justify: inter-word;
  background: #f1f1f1;
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 19px;
}

/* Desktop Screen */
@media screen and (min-width: 1100px) {
  .block-item-1 {
    width: 43vw;
  }
}

/* Header block with image */
#img-div {
  margin: 0px auto;
  width: 100%;
  background: rgb(2, 0, 36);
  background: linear-gradient(90deg,
      rgba(2, 0, 36, 1) 0%,
      rgba(0, 0, 0, 1) 0%,
      rgba(198, 198, 198, 1) 100%);
  padding: 40px 0 30px 0;
  border-radius: 3em;
}

#img-div-2 {
  margin: 0px auto;
  width: 100%;
  background: rgb(2, 0, 36);
  background: linear-gradient(90deg,
      rgb(201 200 221) 0%,
      rgb(232 232 232) 0%,
      rgb(46 89 99) 100%);
  padding: 20px 0 30px 0;
  border-radius: 3em;
}

#img-div-2 p {
  font-size: 12px;
}

/* Delete bg after the viewport width touches 319px */
@media screen and (max-width: 319px) {

  #img-div,
  #img-div-2 {
    background: transparent;
  }

  .second-sec {
    min-width: 100vw;
  } 
}

@media screen and (max-width: 1100px) {
.second-sec {
  margin: 0 auto;
  min-width: 100%;
}
}

#image {
  border-radius: 5em;
  box-shadow: 10px 10px #e8e8e8;
}

#image-2 {
  border-radius: 5em;
  box-shadow: 10px 10px #bac5b5;
}

#image-3 {
  border-radius: 5em;
  box-shadow: 10px 10px #7f7f7f;
}

img {
  max-width: 100%;
  display: block;
  margin: 0px auto;
}

#img-caption {
  margin-top: 15px;
  color: white;
}

#img-caption-2, .img-caption-2 {
  margin: 0px auto;
  width: 100%;
  margin-top: 15px;
  color: black;
}

/* Footer */
footer {
  bottom: 0;
  left: 0;
  right: 0;
  background: #e8e8e8;
  height: auto;
  width: 100%;
  padding-top: 8px;
  color: rgb(46, 46, 46);
  border-top: 1px solid rgb(228, 228, 228);
}

footer p {
  margin-bottom: 20px;
}