/* simple reset*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  font-size: 24px;
  line-height: 1.44;
  height: 100%;
  scroll-behavior: smooth;
  overflow-x:hidden;
}
/* 
header{
  
  display: block;
  height: 100%;
  width: 100%;
  padding: -1vw;
} */


/* #top{
align-items: stretch;
} */

#sign{
  width: 15vw;

  position: absolute;
  position: relative;
  top: -20px;
  margin-bottom: 5rem;
}

#top {
width: 100vw; /* Full viewport width */
height: auto; /* Adjusts height automatically */
overflow: hidden; /* Prevents unwanted overflow */
}

#top img{
width: 100%; /* Makes the image take the full width of #top */
height: auto; /* Keeps aspect ratio */
object-fit: cover; /* Ensures it covers the space properly */
}


/* section{
width: auto;
  margin:auto;
  position: absolute;
  position: relative;
  top: -20px;
  
} */

.p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}

body, html {
margin: 0;
padding: 0;
height: 100%;
overflow-wrap: anywhere;

}
.background-container {

background-image: url(../projects/first_project_Img/background.svg);
background-size: cover; /* Ensures the image covers the entire container */
background-position: center; /* Centers the image */
width: 100vw;
height: 100vh; /* Makes the container take up the full height of the viewport */
/* color: white; Text color for visibility */
text-align: center; /* Center the text */
/* display: flex;
justify-content: center;
align-items: center;
flex-direction: column; */

}

div, p {

margin: 10px;
padding: 10px;
}

#maintext {
font-size: 30px;
width: clamp(550px, 20vw, 300px);
color: #FFFFFF;
background-color: black;
border-top: 10px solid #ffffff;
border-right: 10px solid #555555;
border-bottom: 10px solid #555555;
border-left: 10px solid #ffffff;
box-shadow: 0px 0px 0px 8px #000000, 0px 0px 0px 16px #C6C6C6, 5px 5px 15px 5px rgba(0,0,0,0); 
/* box-shadow: 0px 0px 0px 8px #373737, 0px 0px 0px 16px #4B4C4B, 5px 5px 15px 5px rgba(0,0,0,0); */
background: #000000;
text-align: center;
margin: auto;
top: 5vw;
font-size: 30px;
width: 90%; /* Make it take up 90% of the screen width */
max-width: 550px; /* Set a max width so it doesn't get too large */
color: #FFFFFF;
background-color: black;
border: 10px solid #ffffff;
box-shadow: 0px 0px 0px 8px #000000, 0px 0px 0px 16px #C6C6C6, 5px 5px 15px 5px rgba(0,0,0,0); 
text-align: center;
margin: auto;
top: 5vw;
padding: 10px; /* Add some padding so text doesn't touch the edges */
}

.scaling:hover{
  transform: scale(2);
  transition: transform 0.5s;
}

.subtitle{
background-color: #ffffff;
border-radius: 1vw;
max-width: 90%; /* Prevents it from getting too wide */
width: fit-content; /* Makes it only as wide as the text inside */
padding: 5px 10px; /* Adds some spacing around the text */
font-family: "Press Start 2P", serif;
font-weight: 400;
font-style: normal;
text-align: center;
justify-content: center;
margin: auto; /* Centers it */
display: inline-block; /* Helps with keeping it from stretching */
top: 6vw;
}
.press-start-2p-regular {
font-family: "Press Start 2P", serif;
font-weight: 400;
font-style: normal;
}



/* CSS for cards we can add this anywhere we would like to use cards */


header{
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 100%;
margin:auto;
width: 25%;
text-align: center
}

body{
font-family: Jua;
margin:auto;
width: 25%;
text-align: center;
perspective: 1000px;
transform-style: preserve-3d;
}


/* Ensure perspective for 3D effect */
/* #cards {
  padding-top: 10rem;
  gap: 6vw;
  
} */

.grids {
  display: grid;
  grid-template-columns: 1fr; /* Creates a horizontal layout */
  /* gap: 3vw; */
  height: auto;
  width: 100%;
  /* justify-content: center; Ensures the items are centered */
  padding: 10vw;
  align-items: center;
  justify-content: center;
}

.rows{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
position: relative;
/* right: 10%; */
}

/* #cards img{
  width: auto;
  object-fit: cover;
  object-position: center center;
} */

/* .box{
  position: relative;
  perspective: 700px;
  user-select: none;
} */

.box article{
  transform-style: preserve-3d;
  transform: rotateX(0deg) ;
  transition: transform 0.5s;
  transform-origin: center ;  
}

.front, .back{
width: 15.4vw;
height: 4.5vw;
position: absolute;
user-select: none;
}
.front{
position: absolute;
transform: rotateX(0deg) translate3d(-80px, -100px, 50px);
top: 6vw;

}

.back{
position: absolute;
transform: rotateX(-90deg) translate3d(-80px, 0px, 225px);
top: -11.5vw;

}
.box:hover article{
transform: rotateX(90deg);
}

.subscribe:hover{
  transform: rotate(45deg);
  transition: transform 0.5s;
  /* width: 3vw; */
}

.subscribe{
  margin-top: 10rem;
  width: 15vw;
  position: absolute;
  position: relative;
  top: -20px;
  margin-bottom: 5rem;
  width: 25%;
}


/* Add media queries for responsiveness */
@media screen and (max-width: 768px) {
  .subscribe {
    margin-top: 5vw; /* Adjust margin for smaller screens */
    transform: scale(0.8); /* Scale down for smaller screens */
    width: 25%;
  }
}

@media (max-width: 480px) {
  .subscribe {
    margin-top: 2vw; /* Further adjust margin for very small screens */
    transform: scale(0.6); /* Further scale down for very small screens */
    width: 25%;
  }
}

/* 
#animation:hover{
  img{
    transition: transform 0.5s;
} */