@font-face {
  font-family: 'tlakah';
  src: url(https://abridayy.neocities.org/tlakah.ttf);
  }
  
body {
  background-image: url('images n shi/main background.jpg');
  color: white;
  font-family: 'tlakah';
  }
/*scrollables*/
  /* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #604742;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #f0be56;
  }
  ::-webkit-scrollbar-corner {
    background: yellow;
  }
center {
  text-align: center;
  }
  
/*Contains everything*/
.wrapper {
  margin: 0 auto;
  top: 0;
  margin-top: -5px;
  left: 280px;
  right: 250px;
  width: 1300px;
  background: linear-gradient(#6f8631,#a3993f);
  overflow: hidden;
}
 .wrapper-2 {
  display: flex;
  gap: 10px;
  border: 3px solid #5e1922;
}
.boxes {
  display: flex;
  gap: 10px;
}

/*Header and footer images*/
.header {
  position: relative;
  height: 841px;
  width: 250px;
  background: url('images n shi/header-1.jpg'); /*This is the image in the header and footer. Replace it with your own!*/
  background-size: cover;
  border-right: 3px solid #5e1922;
  overflow: hidden;
  z-index: 2;
}
.footer {
  position: relative;
  background: #ba3f4b;
  overflow: hidden;
  color: #b5a394;
  /* footer background */
	background-color: #ba3f4b;
	background-image: linear-gradient(#911d28, #ba3f4b);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index: 50;
}
 .footer:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255, 143, 188,0.5), rgba(222, 120, 120,0.2));
	z-index: -1
}
/*header probs*/ 
.main-title {
  margin-top: 100px;
  font-size: 15px;
  padding-left:8px;
  height:5px;
  color: #f0be56;
  z-index: 3;
}
.main-title-desc {
  margin-top: 70px;
  color:#90a7bf;
  font-style:italic;
  filter: drop-shadow(8px 8px 8px #604742);
}
 .guestbook {
  position: relative;
  width: 170px;
  margin-left: 26px;
  margin-top: -20px;
  padding: 0px 10px 0px 10px;
  color: #2e8a80;
  border: 3px solid #2e8a80;
  /* guestbook background */
	background-color: #f0be56;
	background-image: linear-gradient(#ffb721, #eba42a, #f0be56);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index: -1;
}
 .guestbook:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255, 255, 255,0.5), rgba( 255, 218, 176, 0.4), rgba(184, 255, 228,0.2));
	border-radius: 8px;
	z-index: -1
}
 .guestbook a {
  font-weight: bold !important;
  text-decoration: none !important;
  color:#2e8a80 !important;
  padding: 0 4px !important;
  width: 100px;
  z-index: 80;
 }
  .guestbook a:hover {
  font-weight: bold;
  font-style: italic !important;
  color: #f0be56 !important;
  text-decoration: none !important;
  background-color: #2e8a80 !important;
  padding: 0 7px !important;
  }
  .screen-stains {
  left: 40px;
  top: 400px;
  position: fixed;
  }
/*Override default margins/padding for headings.*/
.title h1, .title h2, .title h3 {
  padding:0px;
  margin: 0px;
  }

/*navigation for links*/
.hotbar {
  position: relative;
  padding: 3px;
  background: #ba3f4b;
  height: 30px;
  width: 100%;
  /* hotbar background */
	background-color: #ba3f4b;
	background-image: linear-gradient(#911d28, #ba3f4b);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index: 50;
}
 .hotbar:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255, 143, 188,0.5), rgba(255, 143, 143,0.2));
	z-index: -1
}
.hotbar p{
  float: left;
  font-weight: bold;
  font-size: 1.16em;
  padding: 0px;
  border: none;
  margin: -0.5px;
  margin-left: 10px;
  margin-top: 5px;
  color: #b5a394;
}
.hotbar ul{
  float: left;
  margin: -0.5px;
  margin-right: 10px;
  margin-top: 5px;
  z-index: 99;
}
.hotbar ul li {
  float: left;
  list-style: none;
  position: relative;
  z-index: 98;
  margin-left: 10px;
  margin-right: 10px;
}
.hotbar ul li a{
  display: block;
  font-weight: bold;
  font-size: 1.16em;
  border: none;
  text-decoration: none;
  z-index: 98;
}
.hotbar ul li ul {
  display: none;
  position: absolute;
  background-color: linear-gradient (#f7f2f3, #dbd9da);
  width: 150px;
  padding: 0px;
  z-index: 99;
}
.hotbar ul li:hover ul{
  display: block;
  z-index: 99;
}
.hotbar ul li ul li a {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: -10px;
  margin-right: -10px;
  z-index: 100;
}
.hotbar ul li ul li a:hover {
  position: relative;
  width: 110px;
  max-width: 120px;
  background-color: lightgrey;
  z-index: 100;
  /* hotbar-select background */
	background-color:  #604742;
	background-image: linear-gradient(#966257, #692a1d,#604742);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index: -1;
}
 .hotbar ul li ul li a :after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255, 255, 255,0.5), rgba(184, 255, 228,0.2));
	border-radius: 5px;
	z-index: -1
}
/*Div style for individual links.*/
#link1 {
  display: inline-block;
  list-style-type: none;
}
#link1 a {
  color: #ffa8ce;
  text-decoration: none;
}
#linkinsides1 {
  background-color: #ffa8ce;
  border-bottom: 3px solid #5e1922;
  border-right: 3px solid #5e1922;
  border-left: 3px solid #5e1922;
}
#linkinsides1 a{
  color: #ba3f4b;
}
#linkinsides1 :hover{
  background-color: #7d4b41;
}
#linkinsides1 a:hover{
  color: #ffa8ce;
}
#link2 {
  display: inline-block;
  list-style-type: none;
  border: 0px solid red;
}
#link2 a {
  color: #34c9a2;
  text-decoration: none;
}
#link3 {
  display: inline-block;
  list-style-type: none;
  border: 0px solid red;
}
#link3 a {
  color:#ffa81d;
  text-decoration: none;
}

#link4 {
  display: inline-block;
  list-style-type: none;
  border: 0px solid red;
}
#link4 a {
  color:#8caed1;
  text-decoration: none;
}
#linkinsides4 {
  background-color: #90a7bf;
  border-bottom: 3px solid #5e1922;
  border-right: 3px solid #5e1922;
  border-left: 3px solid #5e1922;
}
#linkinsides4 a{
  color: #ffa8ce;
}
#linkinsides4 :hover{
  background-color: #7d4b41;
}
#linkinsides4 a:hover{
  color: #90a7bf;
}
#link5 {
  display: inline-block;
  list-style-type: none;
  border: 0px solid red;
}
#link5 a {
  color:#cfc144;
  text-decoration: none;
}
#linkinsides5 {
  background-color: #cfc144;
  border-bottom: 3px solid #5e1922;
  border-right: 3px solid #5e1922;
  border-left: 3px solid #5e1922;
}
#linkinsides5 a{
  color: #ba3f4b;
}
#linkinsides5 :hover{
  background-color: #7d4b41;
}
#linkinsides5 a:hover{
  color: #cfc144;
}
#link6 {
  display: inline-block;
  list-style-type: none;
  border: 0px solid red;
}
#link6 a {
  color: #f0be56;
  text-decoration: none;
}
#link7 {
  display: inline-block;
  list-style-type: none;
  border: 0px solid red;
}
#link7 a {
  color:#f1d4a5;
  text-decoration: none;
}
/*These three classes are just for defining the boundaries and size of the main and sidebar columns. Most fancy styling goes in the 'box' class.*/
.sidebars {
}
 .sidebar-right {
  display: block;
  width: 230px;
  }
  
.sidebar-left {
  display: block;
  width: 230px;
  }
  
.main {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  display: flex ;
  height: 820px;
  width: 780px;
  flex-wrap: wrap;
  gap: 5px;
}
.main-1 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 780px;
  height: 585px;
 }
.main-2 {
  display: flex;
  width: 780px;
  height: 265px;
  gap: 8px;
  flex: auto;
  }
.carousel {
  background-color: #f1d4a5;
  border: 3px solid #5e1922;
  width: 773px;
  display: flex;
  overflow-x: auto;
  height: 30px;
}
.carousel::-webkit-scrollbar {
  display: none;
}
 .blinker {
}
.blinkies {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  animation: spin 40s infinite linear;
  padding-right: 5px;
}
@keyframes spin {
  from {translate: 0;}
  to {translate: -100%;}
}
/*Box used for individual sections in the sidebar, center column, etc.*/

/*center boxes*/
 .first-main-1-box, .first-main-2-box, .thrid-main-2-box, .second-main-2-box, .third-main-2-box {
  background: #f1d4a5;
  color: #5e1922;
  border: 3px solid #5e1922;
 }
 
 .first-main-1-box{
  position: relative;
  height: 545px;
  /* first-main-1-box background */
	background-color: #f1d4a5;
	background-image: linear-gradient(#c47d2b, #f1d4a5);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index:20;
}
 .first-main-1-box:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(252, 224, 192,0.8), rgba(255, 203, 181,0.5));
	border-radius: 8px;
	z-index: -1
}
 .first-main-1-box img{
  margin-top: -25px;
 }
 .first-main-1-box a {
  font-weight: bold !important;
  background-color: #5e1922 !important;
  text-decoration: none !important;
  color:#f1d4a5 !important;
  padding: 0 4px !important;
  width: 100px;
 }
  .first-main-1-box a:hover {
  font-weight: bold;
  font-style: italic !important;
  color: #5e1922 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  background-color: #f1d4a5 !important;
  padding: 0 4px !important;
  
 }
.first-main-2-box, .second-main-2-box, .third-main-2-box{
  height: 220px;
  width: 720px;
}
.first-main-2-box{
  position: relative;
  padding-left: 8px;
  padding-bottom: 5px;
  overflow-y: scroll;
   /* first-main-2-box background */
	background-color: #f1d4a5;
	background-image: linear-gradient(#c47d2b, #f1d4a5);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index:20;
}
 .first-main-2-box:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(252, 224, 192,0.8), rgba(255, 203, 181,0.5));
	border-radius: 8px;
	z-index: -1
}
/*--------------featured art section----------*/
.second-main-2-box{
  position: relative;
   /* second-main-2-box background */
	background-color: #f1d4a5;
	background-image: linear-gradient(#c47d2b, #f1d4a5);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index:20;
}
 .second-main-2-box:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(252, 224, 192,0.8), rgba(255, 203, 181,0.5));
	border-radius: 8px;
	z-index: -1
}
  /*featured art section's links*/
 .second-main-2-box a {
  font-weight: bold;
  color: #5e1922 !important;
  text-decoration: none !important;
  padding: 0 4px !important;
}
 .second-main-2-box a:hover {
  font-weight: bold !important;
  font-style: italic !important;
  background-color: #5e1922 !important;
  color: #f1d4a5 !important;
  }
  /*featured-art-pic*/ 
 .featured-art {
  position: absolute;
  width: 100%;
  height: 100%;
 }
/*----------featured art ends here--------*/
.third-main-2-box {
  padding: 5px 5px 0px 5px;
  position: relative;
  padding: 5px 5px 0px 5px;
   /* third-main-2-box background */
	background-color: #f1d4a5;
	background-image: linear-gradient(#c47d2b, #f1d4a5);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index:20;
}
 .third-main-2-box:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(252, 224, 192,0.8), rgba(255, 203, 181,0.5));
	border-radius: 8px;
	z-index: -1
}
/*left boxes*/
 .box-of-top-left  {  
  position: relative;
  padding: 5px 10px 0px 10px;
  background: #f98128;
  color: #604742;
  border: 3px solid #604742;
  margin: 10px 0px 5px 0px;
   /* box-of-top-left background */
	background-color: #f98128;
	background-image: linear-gradient(#f54e07, #f98128);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index:20;
}
 .box-of-top-left:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255, 166, 125,0.8), rgba( 250, 149, 77,0.5));
	border-radius: 8px;
	z-index: -1
  }
  .box-of-second-left {  
  position: relative;
  padding: 5px 10px 0px 10px;
  background: #db455a;
  color: #ffbad6;
  border:3px solid #ffbad6;
   /* box-of-second-left background */
	background-color: #db455a;
	background-image: linear-gradient(#db455a, #db455a);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index: 50;
}
 .box-of-second-left:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255, 143, 188,0.5), rgba(222, 120, 120,0.2));
	z-index: -1
}
  .box-of-third-left  {  
  position: relative;
  padding: 5px 10px 0px 10px;
  background: #f0be56;
  color: #2e8a80;
  border: 3px solid #2e8a80;
  margin: 5px 0px 5px 0px;
     /* hotbar background */
	background-color: #f0be56;
	background-image: linear-gradient(#ffb721, #eba42a, #f0be56);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index: 50;
}
 .box-of-third-left:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255, 255, 255,0.5), rgba( 255, 218, 176, 0.4), rgba(184, 255, 228,0.2));
	border-radius: 15px;
	z-index: -1
}
  /*third left section's links*/
 .box-of-third-left a {
  font-weight: bold;
  color: #2e8a80 !important;
  text-decoration: none !important;
  padding: 0 4px !important;
}
  .box-of-third-left a:hover {
  font-weight: bold !important;
  font-style: italic !important;
  background-color: #2e8a80 !important;
  color: #f0be56 !important;
  }
  
  
  /*right boxes*/
  .top-right-box {  
  position: relative;
  background: #90a7bf;
  color: #961f08;
  border: 3px solid #961f08;
  margin: 5px 0px 5px 0px;
  height: 228px;
       /* top-right-box background */
	background-color: #90a7bf;
	background-image: linear-gradient(#0f6b8c, #90a7bf);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index: 50;
}
 .top-right-box:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(186, 195, 245,0.7), rgba(157, 191, 227,0.3));
	z-index: -1
  }
  .top-right-box h2 {
    padding-left: 10px;
  }
  .fan-list-inner {
   position: relative;
   padding-left: 10px;
   margin-top: -10px;
   height: 168px;
   overflow-y: scroll;
   width: 250px; 
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
  }
  .fan-icon {
   cursor: pointer;
   transition: transform 0.5s ease;
  }
  .fan-icon :hover {
  transform: scale(1.1);
  }
  .second-right-box{  
  position: relative;
  padding: 5px 10px 0px 10px;
  background: #ca5e3a;
  color: #f1d4a5;
  border: 3px solid #f1d4a5;
  margin: 5px 0px 5px 0px;
         /* second-right-box background */
	background-color: #ca5e3a;
	background-image: linear-gradient(#872504, #ca5e3a);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index: 50;
}
 .second-right-box:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255, 233, 196,0.5), rgba(237, 125, 5,0.2));
	z-index: -1
  }
  
  .third-right-box{  
  position: relative;
  padding: 5px 10px 0px 10px;
  background: #2e8a80;
  color: #ddc9ae;
  border: 3px solid #ddc9ae;
  margin: 5px 0px 5px 0px;
      /* third-right-box background */
	background-color: #2e8a80;
	background-image: linear-gradient(#005f70, #2e8a80);
	border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index: 50;
}
 .third-right-box:after{
  content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(152, 208, 250 ,0.5), rgba(53, 183, 219,0.2));
	z-index: -1
  }
  
/*Prevent overflow of large images in main text areas.*/
.box img {
  max-width: 100%;
  height: auto;
  }
  /* social media icons */

.social-links {
top: 160px;
right: 15px;
position: absolute;
height: auto;
width: 45px;
}

.social-media-icon {
  height: 45px;
  width: 45px;
  margin: 10px;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.social-media-icon:hover {
  transform: scale(1.1);
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: flex-start;
  transition: opacity 0.5s ease;
}

/* Modal content (image) */
.modal-content {
  position: relative;
  width: 90%;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  border-radius: 5px;
  overflow: hidden;
  animation: zoomIn 0.5s;
}

@keyframes zoomIn {
  from {transform: scale(0.6);}
  to {transform: scale(1);}
}

.modal.show {
  display: flex;
  opacity: 1;
}

/* Close button */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #ffffff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s;
}

/* Caption of modal image */
.caption {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 24px;
}

@media screen and (max-width: 768px) {
  .gallery-item {
     width: calc(50% - 20px);
  }
}

@media screen and (max-width: 480px) {
  .gallery-item  {
    width: calc(100% - 20px);
  }
}

/***
  Not give any style rules by default. Move the padding from the 'box' class here if you want boxes with specially styled headers or images that 
  don't follow the margins of the main text. (For an example of that: see skin #1.)
  ***/
.inner {
  }
  
/* For narrow screens. Makes the sidebars narrower, and makes width of the 
 * center/main div 50% of the viewport width.
 */
@media(max-width:1180px) {
  .wrapper {
    width: calc(440px + 50vw);
    }
  .main {
    width: 50vw;
    }
  }
  
@media(max-width:910px) {
  .wrapper {
    width: calc(360px + 52vw);
    }
  .sidebar-left, .sidebar-right {
    width: 160px;
    }
  .main {
    margin-left: 180px;
    width: 52vw;
    }
  }
  
/* Mobile compatibility. Puts everything into a standard vertical layout. */
@media(orientation:portrait) {
  .wrapper {
    width: 96vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .wrapper-2 {
    width: 94vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .sidebar-left, .main, .sidebar-right {
    position: relative;
    width: 92vw;
    margin: 0.25rem 1vw;
    }
  .sidebar-left, .sidebar-right {
    font-size: 0.95em;
    }
  }