@font-face {
    font-family: Lito;
    src: url(LITOCLEAN.ttf);
}

@font-face {
    font-family: AbhayaLibre-Medium;
    src: url(AbhayaLibre-Medium.ttf);
}
body {
    background: rgb(36, 91, 151);
    background: linear-gradient(90deg, #013766 12%, #ac0e28 93%);
	cursor: none;
}
.wtext {
	display: flex;
	justify-content: center;
    font-family: Lito, sans-serif;
    font-size: 32px;
    color: white;
    margin-top: 1px;
	width: 100%;
	margin-right: 0;
    
}

.wtext h1{
	width: 600px;
	text-align: center;
}

@media screen and (max-width: 900px)
  {
	.wtext {
font-size: 6vw;
	}
	 }
.logo img {
    width: 64px;
    height: 64px;
	cursor: none;
}

.trans
{
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	-webkit-transition: all 1s ease;
}
.top
{
	display: flex;
	width: 80vw;
	height: 80vh;
	margin-top: 10vh;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10vh;
  
}
.top ul
{
	list-style: none;
	width: 100%;
	height: 100%;
	z-index: 1;
	box-sizing: border-box;
}
.top ul li
{
	position: relative;
	float: left;
	width: 25%;
	height: 25%;
	overflow: hidden;
}

.top ul li::before
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: white;
	text-align: center;
	box-sizing: border-box;
	pointer-events: none;
	transition: all 0.5s ease;
}

.top ul li img
{
	width: 100%;
	height: auto;
	overflow: hidden;
    margin: 10px;
}
.lightbox
{
	position: fixed;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.642);
	z-index: 999;
	opacity: 0;
	pointer-events: none;
}
.lightbox img
{
	max-width: 90%;
	max-height: 80%;
	position: relative;
	top: -100%;
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	-webkit-transition: all 1s ease;
}
.lightbox:target
{
	outline: none;
	top: 0;
	opacity: 1;
	pointer-events: auto;
	transition: all 1.2s ease;
	-moz-transition: all 1.2s ease;
	-ms-transition: all 1.2s ease;
	-o-transition: all 1.2s ease;
	-webkit-transition: all 1.2s ease;
}
.lightbox:target img
{
	top: 0;
	top: 50%;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.container
{
	width: 100%;
	height: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 40px;
    gap: 5px;
}

.poemtxt1 {
    margin-top: 8vh;
    font-size: 20px;
    font-family: 'AbhayaLibre-Medium', serif;
    color: white;
    width: 30vw;
    text-align: center;
    line-height: 20px;
    font-weight: 200;
    border-width: 3px;
    border-color: gray;
    border-style: dotted;
    padding: 15px;
	height: fit-content;
  
}
.poemtxt2 
{
	margin-top: 8vh;
    font-size: 20px;
    font-family: 'AbhayaLibre-Medium', serif;
    color: white;
    width: 30vw;
    text-align: center;
    line-height: 20px;
    font-weight: 200;
    border-width: 3px;
    border-color: gray;
    border-style: dotted;
    padding: 15px;

}
.poems {
    display: flex;
    justify-content: center;
    gap: 10vw;
}

.Blh {
	display: flex;
	justify-content: center;
    margin-top: 70px;
    font-family: Lito, sans-serif;
    font-size: 80px;
    color: white;
    margin-left: 10px;

	
}

@media screen and (max-width: 900px)
  {
	.Blh {
		font-size: 12vw;
	}

  }

.logo img {
    width: 64px;
    height: 64px;
	cursor: none;
}
.footer {
	display:flex ;
    justify-content: center ;
    margin-top: 30px;
    font-family: AbhayaLibre-Medium, serif;
    font-weight: 100;
    color: white;
    font-size: 5px;
}

.swiper {
	width: 400px;
	cursor: none;
  }
  .swiper-slide
  {
	  height: auto;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  cursor: none;
  }

  img{
	width: 400px;
	height: auto;
	cursor: none;
  }
  .logosender {
	  cursor: none;
  }

  @media screen and (max-width: 500px)
  {
  	img{
		width: 60vw;
	  }

	  .swiper {
		width: 60vw;
		cursor: none;
	  }
  }
 
  body, canvas{
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    display: block;
	cursor: none;
  }
  .cursor, .cursor--bg, .click {
    position: absolute;
    border-radius:100%;
    transform:translate(-50%, -50%);
    pointer-events:none;
  }
  
  .cursor {
    background:#F0F0F0;
    width:10px;
    height:10px;
    z-index:1000;
    box-shadow:0 0 10px 0 rgb(255, 255, 255);
  }
  
  .cursor--bg {
    background:#94908D;
    height: 34px;
    width:34px;
    box-shadow: 0 0 15px 0 hsl(0, 0%, 100%);
  }
  
  .click {
    background:transparent;
    width:50px;
    height:50px;
    border:2px solid hsl(45, 100%, 100%);
    box-shadow:inset 0 0 5px 0 rgb(255, 255, 255);
    z-index:2;
    transform:scale(0)
  }
  
  .animate {
    animation: clickAnimate 0.4s;
  }
  
  @keyframes clickAnimate {
    from {
      transform:scale(0)
    }
    
    to {
      transform:scale(180%)
    }
  }