*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
body{
    background: linear-gradient(to right, rgb(255, 38, 0),rgba(215, 143, 8, 0.836),orange,rgba(157, 119, 5, 0.945), rgba(132, 0, 255, 0.777));
}
.one{
    position: sticky;
    top: 10px;
    text-align: center;
}
.hr{
    background-color: rgb(253, 25, 9);
    height: 2.1px;
    border: none;
    margin-bottom: 2rem;
}
h1{
    margin: 40px;
    background: linear-gradient(to right,red,orange);
    border-right:red 4px solid;
    border-left: rgba(132, 0, 255, 0.985) 4px outset;
    border-top:rgb(253, 3, 24) 4px solid;
    border-bottom: rgba(132, 0, 255, 0.985) 4px inset;
    border-radius: 55px;
    padding: 7px;

    margin-left: 350px;
    margin-right: 350px;
}
.o1{
    text-align: center;
}
h1:hover{
    transition: all 1.5s ease;
    color: rgb(255, 255, 253);
    background: linear-gradient(to right,orange,red);

}

h5{
    padding: 10px;
    font-size: 26px;
    color: rgb(246, 6, 78);
}
.one p{
    padding: 10px;
    color: antiquewhite;
    font-size: 20px;
}
iframe{
    background-color: rgb(241, 194, 191);
    margin: 35px;
    border: 3px solid rgb(191, 0, 255);
    border-radius: 30px;
    box-shadow: 0 8px 25px rgb(192, 27, 252);
}
iframe:hover{
    transform: scale(1.02);
    transition: all 1s ease;
}
.two{
    margin-left: 120px;
    margin-right: 120px;
    background-color: rgba(219, 77, 77, 0.523);
    color: aliceblue;
    padding: 25px;
    border-radius: 20px;
    line-height: 1.6;
    border: 3px solid rgba(115, 0, 255, 0.705);
    box-shadow: 2px 2px 50px 2px rgba(244, 7, 51, 0.934);
}
.two:hover{
    color: rgb(26, 21, 21);
}
h2{
    margin: 50px;
    text-align: center;
    color: rgba(249, 247, 247, 0.999);
    border: 3px solid rgba(9, 92, 148, 0.712);
    border-radius: 25px;
    padding: 10px;
    margin-left: 350px;
    margin-right: 350px;
    background: linear-gradient(to right,rgba(132, 0, 255, 0.985) ,rgb(253, 3, 24) );
    box-shadow: -2px 2px 20px 5px rgb(50, 63, 205);
}
h2:hover{
    background: linear-gradient(to right,rgb(253, 3, 24) ,rgba(132, 0, 255, 0.985) );
    color: rgb(6, 6, 6);
}
ul{
    
    list-style-position: inside;
    max-width: 500px;
    margin: 1.5rem auto;
    text-align: center;
    list-style: none;
}
li{
    color: antiquewhite;
    padding: 17px;
    border-bottom: 2px solid ;
    font-size: 20px;
}
li:hover{
    padding-top: 2rem;
    color: rgb(7, 7, 7);
    
}
table{
    padding: 10px;
    width: 70%;
    margin: 40px;
    border-collapse: collapse;
    background-color: aliceblue;
}
tr{
    border: 3px solid yellow;
    border-right:rgba(255, 0, 0, 0.632) 4px solid;
    border-left: rgba(132, 0, 255, 0.985) 4px outset;
    border-top:rgba(253, 3, 24, 0.607) 4px solid;
    border-bottom: rgba(132, 0, 255, 0.589) 4px inset;
    box-shadow: 2px 2px 20px 5px rgba(6, 51, 252, 0.637);
}
.tr1 td{
    padding: 15px;
    text-align: center;
    color: rgb(255, 145, 1); 
    font-size: 22px;
     background: linear-gradient(to right,rgba(132, 0, 255, 0.985) ,rgb(253, 3, 24) );

}
.tr1 td:hover{
    color: rgb(11, 11, 11);
}
.tr2 td{
    padding: 12px;
    text-align: center;
}
.tr3 td{
    padding: 12px;
    text-align: center;
}
.tr4 td{
    padding: 12px;
    text-align: center;
}

tr:hover{
color: white;
transform: scale(1.04);
background: linear-gradient(to right,blue,red,violet);
}
.end{
    margin: 25px;
    border: 3px solid lightseagreen;
    padding: 15px;
    border-radius: 28px;
    font-size: 26px;
    margin-left: 350px;
    margin-right: 350px;
    background: linear-gradient(to right,red,orange);
    border-right:red 4px solid;
    border-left: rgba(132, 0, 255, 0.985) 4px outset;
    border-top:rgb(253, 3, 24) 4px solid;
    border-bottom: rgba(132, 0, 255, 0.985) 4px inset;

}
.end:hover{
    background: linear-gradient(to right,orange,red);
}
a{
    text-decoration: none;
}
.table2{
    background: linear-gradient(to right,rgba(58, 58, 249, 0.842),red,violet);
    width: 500px;
    color: white;
}
.table2:hover{
    color: black;
    background: linear-gradient(to right,rgb(227, 61, 61),rgb(83, 83, 219),violet);
}
input{
    margin: 10px;
    padding: 3px;
    border: 2.3px solid blue;
    border-radius: 15px;
 /* background-image: linear-gradient(white, white),
    linear-gradient(45deg, red, blue, purple);*/
     background-origin: border-box;
     background-color: rgba(245, 207, 207, 0.963);
     background-clip: padding-box, border-box;
}
td{
    padding: 5px;
}
.s2{
    padding-top: 15px;
    padding-bottom: 15px;
}
.in1{
    padding-left: 60px;

}
.in2{
    padding-left: 200px;
}
::placeholder {
  color: #666;
  font-size: 13px;
}
input[type="radio"] {
  transform: scale(1.2);
  accent-color: #343434;
  margin: 0 5px;
}
select,
input[type="file"] {
  width: 90%;
  padding: 10px 12px;
  border-radius: 20px;
  border: 2px solid blue;
  outline: none;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
  transition: 0.3s ease;
}
input[type="reset"],
input[type="submit"] {
  padding: 10px 25px;
  border: 2.5px solid blue;
  border-radius: 25px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  color: #111010;
  transition: all 0.3s ease;
  
}
/* ==== MOBILE OVERFLOW FIX ==== */
@media screen and (max-width: 768px) {

  * {
    max-width: 100%;
  }

  body {
    overflow-x: hidden;
  }

  h1, h2, .end {
    margin-left: 15px !important;
    margin-right: 15px !important;
    width: auto;
  }

  iframe {
    width: 100% !important;
    margin: 15px 0 !important;
  }

  table {
    width: 100% !important;
    margin: 10px 0 !important;
    display: block;
    overflow-x: auto;
  }

  tr:hover,
  iframe:hover {
    transform: none !important; /* stops right push */
  }

  .two {
    margin: 15px !important;
  }

  .table2 {
    width: 100% !important;
  }

  input,
  select {
    width: 100% !important;
  }

  .in1,
  .in2 {
    padding-left: 0 !important;
  }
}