/* @import url(https://fonts.googleapis.com/css?family=Roboto); */

/*bug happens at 1013x622
notes on what to do

insert images

and see how it is

try to find more bugs

optimize 

create css animation to optimize


*/
@import url(https://fonts.googleapis.com/css?family=Inter);
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

button {
  cursor:pointer;
  border-color: transparent;
}

img {

  border-radius: 10px;
}


header {

  margin-top: 35px;
}

.container-button {

  background-color: black;
  border-radius: 8px;
  padding: 2rem 0.5rem;
  color: white;
  text-decoration: none;
  z-index: 3;

}

.mainpg-img {
  display: none;
}
/*media query display block show up with browser, inside media query, background image nothing in quotes so it disappears*/
/* .panel-demo {
  
  background-size: 40%;
  background-repeat: no-repeat;
  background-image: url("/assets/homepage.jpeg");
  background-position: 91% 60%;
} */



.image-container {
  position: relative;
}

/* .stacked-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; 
} */

/*
.second-stacked-image {
  position: absolute;
  top: 10px; 
  left: 10px;
  z-index: 2; 
}
*/
.rounded-images {
  border-radius: 10px;
  overflow: hidden;
}

.shadowed-image {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Adjust the values for the shadow effect */
}


@keyframes fadeInUFp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.fadeInUp-animation {
  animation: 1.5s fadeInUp;
}
/* .typewrite > .wrap { border-right: 0.08em solid #DC7CF7} */


@media only screen and (min-width: 1199px) and (max-width: 1301px) {
  h1 {
    font-size: 50px !important;
  }

  .container-desc{
    margin-top: -5px !important;
  }

  .container-mainact{
    margin-bottom: -22px !important;
  }


}

@media only screen and (min-width: 1200px) and (max-width: 1300px) {
  h1 {
    font-size: 50px !important;
  }

}
@media only screen and (max-width: 1200px) {
  .container-title {
    margin-bottom: 5px !important;
  }
  .container-desc{
    margin-top: 0px !important;
  }
  .container-mainact{
    margin-top: 30px !important;
  }
  h1 {
    font-size: 55px !important;
  }
  h2 {
    font-size: 30px !important;
  }
  button {
    font-size: 13px !important;
  }
}

@media only screen and (min-width: 1015px) and (max-width: 1199px) {
  h1 {
    font-size: 50px !important;
  }

  .container-desc{
    margin-top: -5px !important;
  }

  .container-mainact{
    margin-bottom: -22px !important;
  }

}

@media (min-width: 1040px) {
  .panel-demo {
  
    background-size: 40%;
    background-repeat: no-repeat;
    background-image: url("/assets/homepage.jpeg");
    background-position: 91% 60%;
  }

}

@media only screen and (max-width: 1020px) {
  .container-title {
    margin-bottom: 5px !important;
  }
  .container-desc{
    margin-top: 5px !important;
  }
  .container-mainact{
    margin-top: 30px !important;
  }
  h1 {
    font-size: 50px !important;
  }
  h2 {
    font-size: 30px !important;
  }
  button {
    font-size: 14px !important;
    width: 80vw !important;
  }

  .panel-demo {
    display: none;
  }
}


@media only screen and (max-width: 1000px) {
  .container-title {
    margin-bottom: 5px !important;
  }
  .container-desc{
    margin-top: 5px !important;
  }
  .container-mainact{
    margin-top: 30px !important;
  }
  h1 {
    font-size: 50px !important;
  }
  h2 {
    font-size: 30px !important;
  }
  button {
    font-size: 14px !important;
    width: 80vw !important;
    /* content: "Try Pagefelt"; */
  }
}

@media only screen and (max-width: 955px) {
  .container-title {
    margin-bottom: 5px !important;
    width: 80vw !important;
    height: 300px !important;
  }
  .container-desc{
    margin-top: 5px !important;
    height: 100px !important;
  }
  .container-mainact{
    margin-top: 5px !important;
  }
  h1 {
    font-size: 40px !important;
  }
  h2 {
    font-size: 25px !important;
  }
  button {
    font-size: 12px !important;
    width: 80vw !important;
  }
}

@media only screen and (min-width: 501px) and (max-width: 955px) {

  .container-desc{
    margin-bottom: -55px !important;
  }
  h2 {
    margin-top: -75px !important;
  }
  /* .container-mainact{
    margin-bottom: -60px !important;
  } */
}

@media only screen and (max-width: 835px) {

  
  a {
    font-size: 10px !important;

  }

  button {
    color: transparent;
    content: "Try Pagefelt";   
  }

  .container-button ::before {

    color: transparent;
    content: "Try Pagefelt";
  }
}

@media only screen and (min-width: 500px) and (max-width: 707px) {
  .container-title {
    margin-bottom: 5px !important;
    width: 80vw !important;
    height: 300px !important;
  }
  .container-desc{
    margin-top: 5px !important;
    height: 100px !important;
  }
  .container-mainact{
    margin-top: 5px !important;
  }
  h1 {
    font-size: 50px !important;
  }
  h2 {
    font-size: 18px !important;
  }
  button {
    font-size: 14px !important;
    width: 80vw !important;
  }
}

@media only screen and (max-width: 572px) {

  a {
    font-size: 9px !important;
  }

}
@media only screen and (max-width: 500px) {
  .container-title {
    margin-bottom: -5px !important;
    width: 80vw !important;
    height: 300px !important;
  }
  .container-desc{
    margin-top: 5px !important;
    height: 100px !important;
  }
  .container-mainact{
    margin-top: 12px !important;
  }
  h1 {
    margin-bottom: -15px;
    font-size: 50px !important;
  }
  h2 {
    font-size: 15px !important;
  }
  button {
    font-size: 14px !important;
    width: 80vw !important;
  }
}

/* @media only screen and (min-width: 28px) and (max-width: 375px) {

  .container-mainact {
    margin-bottom: -100px;
  }
} */

@media only screen and (max-width: 300px) {
  .container-title {
    margin-bottom: -25px !important;
    width: 80vw !important;
    height: 300px !important;
  }
  .container-desc{
    margin-top: 5px !important;
    height: 100px !important;
    width: 80vw;
  }
  .container-mainact{
    margin-top: 5px !important;
  }
  h1 {
    font-size: 45px !important;
  }
  h2 {
    font-size: 15px !important;
  }
  button {
    font-size: 14px !important;
    width: 80vw !important;
  }

  a{
    font-size: 10 !important;
  }
}