/* Define custom fonts */
@font-face {
  font-family: "better hobby";
  src: url("BetterhOBBY/BetterHobby-One.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "better hobby2";
  src: url("BetterhOBBY/BetterHobby-Two.otf");
  font-weight: normal;
  font-style: normal;
}




html {
  scroll-behavior: smooth;
}
body {
 /* cursor:none;   */
 cursor: url('images/cursor1.png')10 10, auto;
  padding: 0;
  margin: 0;
  
  
  background-color: #FBEFE1 !important;
}

.container_page_one{
  width: 100%;
    height: 100vh; /* Ekran yüksekliği kadar */
    background-color: pink; /* Pembe renk */
    
}

.container_page_two{
  
    background-color: rgb(36, 13, 17); /* Pembe renk */
    
}

::-webkit-scrollbar {
  width: 0;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #FF0000;
}
.centered-text1,
.centered-text2{
  
  font-size: 10vw;
  position: absolute;
  top: 50%; /* Üst kenarı ekranın yüzde 50'sine yerleştir */
  left: 50%; /* Sol kenarı ekranın yüzde 50'sine yerleştir */
  transform: translate(-50%, -50%);
  white-space: nowrap;

}

.text-bottom-right-image{
  width: 20%;
  position: absolute;
  top: 50%; /* Üst kenarı ekranın yüzde 50'sine yerleştir */
  left: 50%; /* Sol kenarı ekranın yüzde 50'sine yerleştir */
  display: block; /* Ensure the image is displayed as a block element */
  transform: translate(100%, -0%);

}

.bottom-me{
  width: 15%;
  height: auto;
  display: block; /* Ensure the image is displayed as a block element */
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 768px) {
  .bottom-me{

    min-width: 50%; /* Ekran küçükken %50 genişlik */
  }
}

@media screen and (max-width: 768px) {
  .circle{
    display: none;
  }
}


.centered-text1{
  font-family: "better hobby", sans-serif;
  color: #FF6464;
  opacity: 80%;

}
.centered-text2 {
  

  font-family: "better hobby2", sans-serif;
  color: #39CEF3;
  
  
}


/* Make both images responsive */
.responsive-image {
  max-width: 100%;
  height: auto;
}



#container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  
}
section {
  height: 100vh;
  grid-area: 1 / 1 / 2 / 2;
  background-color: #FFE375;
  clip-path: circle(100% at 50% 50%);
  
  display: flex;
  justify-content: center;
  align-items: center;
 
}
section .inner {
  width: 100%;
  height: 100%;

}
section:nth-child(even) {
  background-color: #FBEFE1;
}
.spacer {
  overflow: hidden;
  background-color: #FBEFE1;
  
 
}
.text_animation{
  font-family: "obviusly_wide", sans-serif;
  color: #5F45F2;
 

  font-size: 5vw;
  position: absolute;
  top: 50%; /* Üst kenarı ekranın yüzde 50'sine yerleştir */
  left: 50%; /* Sol kenarı ekranın yüzde 50'sine yerleştir */
  transform: translate(-50%, -50%);
  white-space: nowrap;
}



#main_contents{
  font-family: "obviusly_wide", sans-serif;
  color: #5F45F2;

}



.circle {
  overflow: hidden; /* İçerik taşmasını engellemek için */
}