/* ----- CSS about ----- */ /* Button wrapper */ 
.wrapper {
  display:flex;
  align-items:center;
  justify-content:center;
}
.wrapper a {
  background-color:#fff000;
  font-family:Comic Relief;
  color:#ff5500;
  border-bottom:5px solid #bf2d00;
  padding:10px;
  font-size:20px;
  border-right:transparent;
  border-top:transparent;
  border-left:transparent;
  border-radius:13px;
  cursor:pointer;
}
.wrapper a:active {
  border:none;
  transform:translate(0px,5px);
}
/* about container */ .about {
  visibility:hidden;
  opacity:0;
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 0.4s ease,visibility 0s 0.4s;
  z-index:1102;
}
.about::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:0.5;
  background-image:linear-gradient(#ff5500,#fff000);
  background-attachment:fixed;
  z-index:1101;
  transition:none;
}
.about:target {
  visibility:visible;
  opacity:1;
  transition:opacity 0.4s ease,visibility 0s,transform 0.4s ease;
}
.about__content {
  position:relative;
  width:45%;
  height:70%;
  overflow-y:scroll;
  overflow-x:hidden;
  scrollbar-width:none;
  max-width:90%;
  background:#FFDB33;
  color:#850e00;
  padding:10px;
  border-radius:20px;
  z-index:1103;
  font-family:Comic Relief;
  filter:drop-shadow(0px 0px 5px rgba(133,14,0,0.35));
  transform:scale(1.2);
  transition:transform 0.4s ease,opacity 0.4s ease;
}
.iconabt {
  margin:165px 0 0 25px;
  border:5px solid #FFDB33;
  border-radius:50%;
  height:50%;
  z-index:2000;
}
@media screen and (max-width:1624px) {
  .about__content {
  width:60%;
}
}.about:target .about__content {
  transform:scale(1);
}
.about__close {
  display:flex;
  position:fixed;
  align-items:center;
  justify-content:center;
  text-align:center;
  top:20px;
  right:20px;
  width:40px;
  height:40px;
  border:3px dashed #FFCB00;
  outline:4px solid rgba(250,92,0,0.4);
  background-color:rgba(250,92,0,0.45);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  color:yellow;
  font-size:40px;
  border-radius:50%;
  cursor:pointer;
  text-decoration:none;
  filter:drop-shadow(3px 3px 0px rgba(46,5,0,0.4));
  z-index:1100;
}
.about:not(:target) .about__content {
  transform:scale(1.2);
  opacity:0;
  transition:opacity 0.4s ease,transform 0.4s ease;
}
/* Responsive layout */ @media screen and (max-width:680px) {
  .about__content {
  width:70%;
  height:70%;
  overflow-y:scroll;
}
}.about__content .banner {
  background:url("https://blog.sinproexe.net/img/abt/banner.png");
  height:250px;
  width:100%;
  border-radius:20px;
  background-size:cover;
}
.about__content .moodboard {
  text-align:center;
  width:30%;
  border-radius:20px;
  filter:drop-shadow(0px 0px 5px rgba(133,14,0,0.35));
}
.containerabt {
  background-color:rgba(242,69,0,0.8);
  border-radius:10px;
  margin:0 auto;
  margin-top:2em;
  padding:1.5em;
  width:80%;
}
dt {
  background:rgba(255,219,51,1);
  text-align:center;
  border-radius:5px;
  color:orangered;
  margin:0 0 5px;
  padding:1 6px;
  width:100%;
  font-family:Comic Relief;
}
.about__footer {
  text-align:center;
  color:#ff6f1c;
  padding:20px;
}
.about__footer img {
  text-align:center;
  width:80%;
}
dd {
  text-align:right;
  color:#FFDB33;
  font-family:Comic Relief;
  border-bottom:dotted 2px rgba(255,219,51,1);
}
@media screen and (max-width:600px) {
  dt {
  width:90%;
}
}@media screen and (max-width:600px) {
  dt,dd {
  font-size:80%;
}
}@media screen and (max-width:770px) {
  dt,dd {
  font-size:80%;
}
}@media screen and (max-width:770px) {
  dt {
  width:92%;
}
}.abt {
  margin:0 10px;
  width:80%;
  border-radius:30px;
  background-color:#FFFE8C;
  padding:20px;
}
#tinymaca {
  filter:drop-shadow(4px 4px 0px rgba(201,21,0,0.20));
  transition:0.5s;
}
#tinymaca:hover {
  transform:scale(1.2);
}
.tinyscal {
  width:100%;
  height:250px;
  background-image:url('https://blog.sinproexe.net/img/abt/tiny.gif');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  background-attachment:scroll;
  object-fit:contain;
}
.thing:before {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  border-left:15px solid transparent;
  border-right:15px solid #FFFE8C;
  border-top:15px solid #FFFE8C;
  border-bottom:15px solid transparent;
  left:-16px;
  bottom:0px;
}
.thing:before {
  top:-20px;
  left:95px;
  transform:rotate(45deg);
}
.thing2:before {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  border-left:15px solid #FFFE8C;
  border-right:15px solid transparent;
  border-top:15px solid #FFFE8C;
  border-bottom:15px solid transparent;
  right:-16px;
  bottom:0px;
}
.thing2:before {
  bottom:-12px;
  left:250px;
  transform:rotate(-45deg);
}
/* Responsive layout */ @media screen and (max-width:1070px) {
  .thing2:before {
  left:95px;
}
}