body {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  background-color: #202020;
  color: #dadada;
  text-align: justify;
}
main {
  max-width: 560px;
  margin: auto;
}

.solid-ass-bg {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border-radius: 20px;
  background-color: rgba(208, 208, 208, 0.278);
  box-shadow: 1px -1px 1px rgba(255, 255, 255, 0.764),
    -2px 2px 2px rgba(0, 0, 0, 0.693);
  backdrop-filter: blur(3px);
  transition: all 0.3s;
  content: "aaa";
  color: white;
}
.tint-red {
  background-color: rgba(255, 0, 0, 0.278);
}
.tint-green {
  background-color: rgba(43, 255, 0, 0.278);
}
.tint-blue {
  background-color: rgba(0, 115, 255, 0.278);
}

.solid-ass-text {
  color: white;
  mix-blend-mode: difference;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: x-large;
  align-self: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  user-select: none;
}

.solid-ass-bg::backdrop {
  filter: blur(3px);
  opacity: 40%;
  border-radius: 20px;
  transition: filter 0.3s;
}
.glassy-text { 
    color: #fafafa;
    filter: drop-shadow(1px -1px 1px rgba(255, 255, 255, 0.875)) drop-shadow(-5px 5px 4px rgba(0, 0, 0, 0.693));
        opacity: 70%;
    text-shadow: #202020 -4px 4px 1px ;
}
.solid-ass-button:hover .solid-ass-bg {
  cursor: pointer;
  box-shadow: 1px -1px 1px rgba(255, 255, 255, 0.875),
    -5px 5px 4px rgba(0, 0, 0, 0.693);
  transition: all 0.5s;
  backdrop-filter: blur(50px);
}
.solid-ass-button:hover .solid-ass-text {
  user-select: none;
  cursor: pointer;
}
.solid-ass-button:active .solid-ass-bg {
  cursor: pointer;
  box-shadow: 2px -1px 1px rgba(255, 255, 255, 0.914),
    -1px 1px 2px rgba(0, 0, 0, 0.693);
  transition: all 0.5s;
  backdrop-filter: blur(10px);
}

.solid-ass-button {
  position: relative;

  padding: 20px;
  margin-right: 8px;
}

.img-cont {
  
  max-height: 120px;
  max-width: 560px;
  overflow: scroll;
}
.buttons {
  margin-top: 0px;
  display: flex;
  padding: 15px;
    max-width: 550px;

}
.gradient {
background: #000000;
max-width: 550px;
padding-left: 20px;
/* overflow-x: scroll; */
background: linear-gradient(-178deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 1) 100%);
}
.lorem-img {
    background-image: url('lorem.png');
}


.lorem > p {
    position: absolute;
    text-wrap: wrap;
    max-width: 550px;
    margin-top: -10px;
    background: #dadada;
    color: #202020;
    margin-left: -15px;
    padding-left: 10px;
}