html, body {
    overflow-x: hidden;
    height: 100%;
    font-size: 62.5%;
  }

  body {
    background: #fff;
    padding: 0;
    margin: 0;
    font-family: 'Varela Round', sans-serif;
  }



  .mainInner {
    height: 100%;
    width: 100%;
    position: relative;
    text-align: center;
    margin: 1rem auto;
  }

  .mainInner div input {
       font-size: 1.5rem;
    font-weight: bold;
    background-color: yellow;
   color:black;
    border-radius:.5rem;
    border-color:black;
max-width: 90vw;
    margin:.8rem 1.1rem;
    padding:9px;
   width:100%;
   text-align: left;
  }
  
   .hthreedesign{
   text-decoration: underline red solid;    
   font-weight: bolder;
   font-size: 2rem;
 
   }
   
  .design {
    background-color: yellow;
    color: red;
    border: 0.2rem solid black;
    border-radius: 1rem;
    padding: 1rem;
    text-align: justify;
    margin: 1rem;
  }

.nomaterial{
    border:5px solid red;
    font-size:15px;
    width:100%;
    margin:auto;
    margin-top:150px;
    box-sizing:border-box;
    text-align:justity;
    padding:5px;

}

  hr.new1 {
    border: 0.1rem solid red;
  }

  hr.new2 {
    border: 0.1rem solid blue;
  }

  hr.new3 {
    border: 0.1rem solid black;
  }

 .buttondesign {
    font-family: 'Source Sans Pro', sans-serif;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    background-color: black; /* Use your preferred color */
    color: yellow; /* Use your preferred text color */
    border: none;
    text-decoration: none;
    transition: background-color 0.5s;
    display: inline-block;
}

.buttondesign:hover {
    background-color: #2980b9; /* Use a slightly darker shade for hover effect */
}

.topdesignmain {
  width: 100%;
  max-width: 85%;
  font-size: 2rem;
  color: #fff;
  margin: 1.5rem auto;
  padding: 1.6rem;
  text-align: center;
  background: linear-gradient(135deg, #007bff, #00d4ff);
  border-left: 8px solid #0056b3; /* Ribbon-style border */
  border-radius: 0 5px 5px 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  font-weight: bold;
  transition: all 0.3s ease;
}

.topdesignmain:hover {
  transform: translateX(5px); /* Ribbon effect on hover */
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.25);
}

.topdesign {
  width: 80%;
  font-size: 1.8rem;
  color: #f0f0f0; /* Lighter, off-white for text */
  margin: 1rem auto;
  padding: 1.5rem;
  text-align: center;
  border-left: 15px solid #2c3e50; /* Dark teal border for subtle emphasis */
  border-right: 15px solid #2c3e50;
  border-radius: 8px;
  background: linear-gradient(135deg, #FF512F, #DD2476);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.topdesign:hover {
  transform: scale(1.05);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
}
.VideoDesign{
    width: 270px;
    height: 400px;
    box-shadow: 20px 20px 20px 20px yellow;
    border: 2px solid black;

}

  :root {
    scroll-behavior: smooth;
  }

  .stt {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgb(128, 128, 255) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    box-shadow: 0 0.25rem 0.5rem 0 gray;
    opacity: 0.7;
  }

  .stt:hover {
    opacity: 0.8;
  }

  .stt:focus {
    opacity: 0.9;
  }

  .stt:active {
    opacity: 1;
  }

  h2 {
    text-align: center;
  }






@media (max-width: 480px) {
html {
font-size: 50%;
    }
img {
  width: 100%;
  height: auto;
  margin: 0 5px;
  border: 2px solid black;
    
  } 
  }
  


@media (min-width: 481px) {
html {
font-size: 50%;
    }
img {
  width: 70%;
  height: auto;
  margin: 0 auto;
  border: 2px solid black;
    
  } 
  }
      



@media (min-width: 768px) {
html {
font-size: 70%;
    }

.mainInner div input {
  width: 60%;
    }
img {
   width: 40%;
  height: auto;
    margin: 0 auto;
  border: 2px solid black;
    }
  }

  
  
  
@media (min-width: 992px) {
html {
  font-size: 70%;
    }
   
img {
  width: 40%;
  height: auto;
    margin: 0 auto;
  border: 2px solid black;
  
  }
.mainInner div input {
  width: 60%;
    }
    
  }