.bodys {
  color: white;
  background-image: url("media/images/gradientB.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.body1 {
  background-image: url("media/images/BGCR.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.body2 {
  background-image: url("media/images/TICTAC.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.htmls {
  --top-spacing: 100px;
  scroll-padding-top: var(--top-spacing);
}

.btn-grad {
  background-image: linear-gradient(
    to right,
    #fc00ff 0%,
    #00dbde 51%,
    #fc00ff 100%
  );
}
.btn-grad {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 30px;
  display: block;
}

.btn-grad:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.btn-gradS {
  background-image: linear-gradient(
    to right,
    #56ccf2 0%,
    #2f80ed 51%,
    #56ccf2 100%
  );
}
.btn-gradS {
  margin: 10px;
  padding: 5px 5px;
  text-align: left;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: -ms-inline-grid;
}

.btn-gradS:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.btn-grad3 {
  background-image: linear-gradient(
    to right,
    #6a3093 0%,
    #3156cf 51%,
    #05fcef 100%
  );
}
.btn-grad3 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  font-style: italic;
  font-weight: bolder;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad3:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.btn-grad4 {
  background-image: linear-gradient(
    to right,
    #0004ff 0%,
    #ae00ff 51%,
    #00d9ff 100%
  );
}
.btn-grad4 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  font-style: italic;
  font-weight: bolder;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad4:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
.btn-grad9 {
  background-image: linear-gradient(
    to right,
    #000000 0%,
    #3156cf 51%,
    #fc0505 100%
  );
}
.btn-grad9 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  font-style: italic;
  font-weight: bolder;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad9:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
.btn-grad91 {
  background-image: linear-gradient(to right,
      #000000 0%,
      #77ff00 51%,
      #007bff 100%);
}

.btn-grad91 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  font-style: italic;
  font-weight: bolder;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px rgb(0, 0, 0);
  border-radius: 10px;
  display: block;
}

.btn-grad91:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: rgb(255, 255, 255);
  text-decoration: none;
}
.btn-grad912 {
  background-image: linear-gradient(to right,
      #000000 0%,
      #00fffb 51%,
      #ff0040 100%);
}

.btn-grad912 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  font-style: italic;
  font-weight: bolder;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px rgb(0, 0, 0);
  border-radius: 10px;
  display: block;
}

.btn-grad912:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: rgb(255, 255, 255);
  text-decoration: none;
}
.btn-grad7 {
  background-image: linear-gradient(
    to right,
    #00ffb3 0%,
    #000000 51%,
    #0011ff 100%
  );
}
.btn-grad7 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  font-style: italic;
  font-weight: bolder;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad7:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.btn-grad11 {
  background-image: linear-gradient(
    to right,
    #1100ff 0%,
    #1fffbc 51%,
    #000000 100%
  );
}
.btn-grad11 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  font-style: italic;
  font-weight: bolder;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad11:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
.btn-grad56 {
  background-image: linear-gradient(
    to right,
    #1100ff 0%,
    #cbff0f 51%,
    #851b6a 100%
  );
}
.btn-grad56 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  font-style: italic;
  font-weight: bolder;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad56:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.btn-grad10 {
  background-image: linear-gradient(
    to right,
    #0026ff 0%,
    #ff00ea 51%,
    #ffffff 100%
  );
}
.btn-grad10 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  font-style: italic;
  font-weight: bolder;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad10:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.multicolortext {
  background-image: linear-gradient(
    to left,
    rgb(55, 0, 255),
    rgb(0, 217, 255),
    rgb(0, 153, 255),
    rgb(5, 238, 255)
  );
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
}
.button {
  background-image: linear-gradient(
    to right,
    #56ccf2 0%,
    #2f80ed 51%,
    #56ccf2 100%
  );
}
.button {
  background-color: DodgerBlue;
  border: none;
  color: white;
  text-align: center;
  font-size: 20px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  border-radius: 30px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  border-radius: 30px;
}

.button span:after {
  content: "\00bb";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  border-radius: 30px;
}

.button:hover span {
  padding-right: 25px;
  border-radius: 30px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
  border-radius: 30px;
}
.btn-group button {
  background-color: DodgerBlue; /* Green background */
  border: 1px solid green; /* Green border */
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
  border-radius: 30px;
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
  border-radius: 30px;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
  border-radius: 30px;
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #75acfc;
}
.button2 {
  background-color: #75acfc;
  color: white;
  border-radius: 30px;
}
.navbar {
  overflow: hidden;
  margin-left: -10px;
  background-color: #000000;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  z-index: 2;
  font-family: "Lato", sans-serif;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  background: #75acfc;
  color: blue;
  border-radius: 30px;
  align-content: center;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 60px;
  font-size: 36px;
  margin-left: 11010px;

  border-radius: 0px;
}

#main {
  transition: margin-left 0.5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
ads {
  height: 4px;
  width: 5%;
  background-color: black;
  z-index: -1;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 13px;
  text-decoration: none;
  border-radius: 30px;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #75acfc;
  color: blue;
  border-radius: 30px;
}

#toc_container {
  background: dodgerblue none repeat scroll 0 0;
  border: 1px solid #aaa;
  text-align: left;
  display: table;
  font-size: 95%;
  color: whitesmoke;
  margin-bottom: 1em;
  padding: 20px;
  width: auto;
  border-radius: 30px;
}
#toc_title {
  font-weight: 700;
  text-align: center;
  text-align: left;
}

#toc_container li,
#toc_container ul,
#toc_container ul li {
  list-style: outside none none !important;
  color: whitesmoke;
}
.topnav-right {
  float: right;
}
.aside1 {
  width: 100%;
  padding-left: 15px;
  margin-left: 10px;
  margin-right: -10px;
  float: right;
  font-style: italic;
  color: white;
  background-image: linear-gradient(
    to right,
    #00c6ff 0%,
    #0072ff 51%,
    #5f23be 100%
  );
  border-radius: 30px;
}
.responsive {
  width: 500px;
  height: 290px;
  border-radius: 8px;
}
@media only screen and (max-width: 490px) {
  [class="responsive"] {
    width: 100%;
    height: auto;
  }
}

.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #27c03c;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px rgba(25, 0, 255, 0.247);
  z-index: 100;
}
@media only screen and (max-width: 490px) {
  [class="float"] {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 500px;
    left: 355px;
    background-color: #27c03c;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px rgba(25, 0, 255, 0.247);
    z-index: 100;
  }
}

.my-float {
  margin-top: 16px;
}

footer {
  text-align: center;
  padding: 3px;
  background-color: rgb(26, 160, 238);
  color: white;
}
.logo {
  border-radius: 50px;
}
/* Main content */