#popup {
  position: fixed;
  bottom: 4rem;
  width: 17rem;
  height: auto;
  font-size: 0.8rem;
  right: 1rem;
  border: 1px solid white;
  padding: 1rem;
  text-align: justify;
  z-index: 999;
  border-radius: 5px;
}

#popup button {
  background: linear-gradient(#33ccccaa, #2CEAA3aa);
  float: left;
}

#popup button:hover {
  background: linear-gradient(#33ccccee, #2CEAA3ee);

}

html {
  scroll-behavior: smooth;
}

form h3 {
  color: #2CEAA3cc;
  font-size: 1.5rem;
}

label:hover {
  border-radius: 5px;
  background: #333;

}

.home-first {
  height: 100vh;
  width: 100vw;
  background: #333;
  z-index: 99999999999999999999999;
}

.home-first h1 {
  top: 5rem;
  position: relative;
  font-size: 2.5rem;
}

.anyone-top {
  display: none;
}

.anyone-topvis {
  -webkit-animation: highlight 2s;
          animation: highlight 2s;
}

.contain {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.contain input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


.checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}


.contain:hover input~.checkmark {
  background-color: #ccc;
}

.contain input:checked~.checkmark {
  background: linear-gradient(#33cccc, #2CEAA3);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.contain input:checked~.checkmark:after {
  display: block;
}

.contain .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

q {
  display: block;
  background: #333;

  -o-border-image: linear-gradient(0deg, #33cccc, #2CEAA3);

     border-image: linear-gradient(0deg, #33cccc, #2CEAA3);
  border-image-slice: 1;
  border-left: 0.2rem solid transparent;
  padding: 1rem;

  font-style: italic;
}

.code-py {
  background: #222;
  border-top: 0.1rem solid white;
  color: white;
  font-size: 1rem;

}

input {
  background-color: #272727;
  border-radius: 5px;
  color: white;
  padding: 0.5rem;
}

textarea {
  color: white;
  background: #222;

}

pre i {
  background: linear-gradient(-45deg, #33ccccaa, #f66079aa, #2CEAA3aa, #33ccccaa, #f66079aa, #2CEAA3aa);
  display: block;
  color: white;
  width: 100%;
  height: 100%;
  text-align: right;
  padding: 3px;
  padding-right: 10px;
  -webkit-animation: gradient 16s ease infinite;
          animation: gradient 16s ease infinite;
  background-size: 400% 400%;

}

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.dropbtn {
  background-color: #167a7a;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #167a7aaa;

}

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 99;

}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  overflow: auto;

  z-index: 1;
  color: white;
  z-index: 99;

}

#ceeblist li {
  line-height: 2rem;
}

li {
  line-height: 2rem;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  z-index: 99;
}

.content-ar {
  margin-top: 5px;

}

/*button for menu python*/
ol button {
  color: white;
  background: transparent;
  border: 0;

  padding: 0.5px;
  margin-bottom: 5px;
  border-radius: 2px;
  padding-left: 2px;
  padding-right: 2px;
  border-bottom: 3px solid #33ccccaa;

}

ol button:hover {
  background: #33ccccaa;
  -webkit-animation: highlight2 0.5s;
          animation: highlight2 0.5s;
  opacity: 1;
  border-radius: 5px;


}

button:focus {
  color: white;
  border: 0.5px solid #33cccc;


}

@-webkit-keyframes highlight2 {
  0% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}

@keyframes highlight2 {
  0% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}

.dropdown a:hover {
  background-color: #167a7a;
  border-radius: 0;
}

.show {
  display: block;
}

button {
  border-radius: 5px;
  background: linear-gradient(#33ccccaa, #2CEAA3aa);
  cursor: pointer;

  transition: background 400ms;
  color: #fff;

}


.active {
  background: linear-gradient(#33cccc99, #2CEAA399);
  color: white;
  border: none;
}


#one a {
  color: #f2f2f2;
  border: 0;
}

#tx img {
  border-radius: 50%;
}

#mobnav .active {
  color: white;
  background: linear-gradient(#33ccccaa, #2CEAA3aa);
}

.foot a {
  color: white;
  border: 0;
  border-bottom: 3px solid#167a7a;
}

.topnav {
  background-color: #232323;
  overflow: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

}

#loader {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: #2b2b2b;
  z-index: 99999999999999999999999999;
}

#menu {
  background: linear-gradient(#33ccccaa, #2CEAA3aa);
  color: white;
  border-radius: 5px;
  font-size: 1.5rem;
  border: 0;

}


#menu:hover {
  background: linear-gradient(#33ccccee, #2CEAA3ee);

}

header img {
  display: none;
}

#loader img {
  height: 400px;
  left: 50%;
  margin-top: -200px;
  margin-left: -200px;
  position: absolute;
  top: 50%;
  width: 400px;
  opacity: 0.8;
  margin-bottom: 2rem;
}

#loader p {
  width: 157px;

  top: 60%;
  position: relative;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid #33cccc;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .10em;
  /* Adjust as needed */
  -webkit-animation:
    typing 2s steps(20, end),
    blink-caret .75s step-end infinite;
          animation:
    typing 2s steps(20, end),
    blink-caret .75s step-end infinite;



}

@-webkit-keyframes typing {
  from {
    width: 0
  }

  to {
    width: 157
  }
}

@keyframes typing {
  from {
    width: 0
  }

  to {
    width: 157
  }
}

/* The typewriter cursor effect */
@-webkit-keyframes blink-caret {

  from,
  to {
    border-color: transparent
  }

  50% {
    border-color: #33cccc;
  }
}
@keyframes blink-caret {

  from,
  to {
    border-color: transparent
  }

  50% {
    border-color: #33cccc;
  }
}

.visible {

  height: 100%;
  background-color: #333;
  z-index: 99999999999999999999999999;

}

.topnav.responsive {

  -webkit-animation:
    drop 0.3s steps(40, end);

          animation:
    drop 0.3s steps(40, end);
}


@-webkit-keyframes up {
  from {
    height: 60%
  }

  to {
    height: 0
  }
}


@keyframes up {
  from {
    height: 60%
  }

  to {
    height: 0
  }
}

@-webkit-keyframes drop {
  from {
    height: 0
  }

  to {
    height: 60%
  }
}

@keyframes drop {
  from {
    height: 0
  }

  to {
    height: 60%
  }
}

.invisible {
  display: none;

}

@-webkit-keyframes highlight {
  0% {
    opacity: 1;

  }

  100% {
    opacity: 0.7;

  }
}

@keyframes highlight {
  0% {
    opacity: 1;

  }

  100% {
    opacity: 0.7;

  }
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border: 0;
}

.topnav .icon {
  display: none;
  border: 0;
}

th:hover {
  background-color: #333;
}

.codepaste {
  background: rgb(27, 27, 27)
}

.codepaste pre {
  color: white;
  font-size: 1rem;
}

.codepaste td:first-child {
  border-right: 1px solid white;
  padding-right: 0.4rem;
}

.codepaste td {
  padding-left: 0.4rem;
}

.topnav a:hover {
  background-color: #167a7a;
  color: white;

}

#mobnav a {
  border-radius: 0;
  color: white;
  border: 0;

}

.code {
  display: block;
  overflow: auto;
  font-family: consolas;
  background: rgb(27, 27, 27);
  font-size: 1.1rem;
  border: 1px solid white;

}

code {
  font-family: consolas;
  background-color: #333;
  color: #33cccc;
  padding: 2px;
  overflow: hidden;

}

.code-py {
  overflow: auto;
  display: block;
}

.code pre {
  margin: 1rem;
  color: white;
}

pre {
  font-size: 1.2rem;
  font-family: consolas;
}

.code h4 {
  font-family: consolas;
  font-size: 1.3rem;
  color: #33cccc;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  display: none;
}



/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1260px) {

  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }

  .row1 {
    font-size: 0.6rem;
  }
}

#mobnav {
  position: fixed;
  align-content: justify;
  top: 0;
  z-index: 999999;
  width: 100%;
  padding-top: 10px;
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1260px) {
  .topnav.responsive {
    position: relative;

  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 10px;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }


}

.uparrow {
  color: #f2f2f2;
  bottom: 8%;
  right: 8%;

  position: fixed;
  z-index: 99;
  height: 3.3rem;
  width: 3.3rem;
  background-color: #44444400;
  text-align: center;

  border: 2px white solid;
  border-radius: 50%;
}

html {
  cursor: url(images/cursor.png), auto;
}

.uparrow p {
  line-height: inherit;


  background: #33333300;

}

.uparrow a {
  border: none;
}

.uparrow a:hover {
  background: transparent;
  -webkit-animation: none;
          animation: none;

}

.uparrow:hover {
  background: linear-gradient(90deg, #33ccccaa, #2CEAA3aa);
  -webkit-animation:
    ease-in fade 0.25s;
          animation:
    ease-in fade 0.25s;
  margin-bottom: 1px;

}

#dropar {
  margin-top: 0.5rem;
  width: 100%;
  height: auto;
  background: #333;
  z-index: 99;
  position: relative;


  border: 0.5px solid white;

}

#x {
  float: right;
  margin-right: 10px;
  border: 0;

}

.arrow a {
  color: #f2f2f2;
  font-size: 2rem;
  text-align: center;
  padding: 0;

  background: transparent;

}

#acc table {
  font-weight: 300;
  font-size: 1.2rem;
  text-align: justify;
}

#acc td {
  padding-right: 1rem;
  font-weight: 300;
  text-align: center;
}

#acc th {
  padding: 0.5rem;
  font-weight: 300;
  text-align: center;
}

@media only screen and (max-width: 450px) {
  table {
    display: block;
    overflow: auto;
    font-size: 0.76rem;
  }

}

.python-select {
  text-align: justify;
}

.python-select ::-moz-selection {
  background: #3ad19aaa;
  color: white;
}

.python-select ::selection {
  background: #3ad19aaa;
  color: white;
}

.pink ::-moz-selection {
  background: pink;
  color: white;
}

.pink ::selection {
  background: pink;
  color: white;
}

.or ::-moz-selection {

  background: #f66079;
  color: white;
}

.or ::selection {

  background: #f66079;
  color: white;
}

.gr ::-moz-selection {
  background: #2CEAA3aa;
  color: white;
}

.gr ::selection {
  background: #2CEAA3aa;
  color: white;
}

.cy ::-moz-selection {
  background: #33ccccaa;
  color: white;
}

.cy ::selection {
  background: #33ccccaa;
  color: white;
}

.yel ::-moz-selection {
  background: #F2ED56;
  color: white;
}

.yel ::selection {
  background: #F2ED56;
  color: white;
}

#tx {
  font-size: 1vw;
}

#mobnav #tx {
  font-size: 20px;
}

#one {
  position: fixed;
  font-size: 1vw;
  border-radius: 25px;
  margin-bottom: 25px;
  box-shadow: 2px 2px 8px 8px rgba(0, 0, 0, 0.2);
  background: #333;
}

#textarAns {

  border: 3px solid transparent;
  -o-border-image: linear-gradient(90deg, #33cccc, #2CEAA3);
     border-image: linear-gradient(90deg, #33cccc, #2CEAA3);
  border-image-slice: 1;

}

#mobnav {
  background-color: #232323;
}

#one ::-moz-selection {
  background: #33cccc;
  color: white;
}

#one ::selection {
  background: #33cccc;
  color: white;
}

#one img {
  width: 1.5vw;
  height: auto;
}

@media only screen and (min-width: 1550px) {
  #mobnav {
    display: none;
  }
}

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

@media only screen and (max-width: 900px) {
  #mobnav #tx {
    display: none;
  }

  #mobnav {
    font-size: 12px;
    background-color: #232323;

  }
}

@media only screen and (max-width: 1550px) {
  #one {
    display: none;
  }

}

body {
  background: #222;
  color: #FFFFFF;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: 300;
  overflow-x: hidden;

}

a {
  text-decoration: none;
  color: white;
  padding: 2px;

  margin-bottom: 5px;
  -o-border-image: linear-gradient(90deg, #33cccc, #2CEAA3);
     border-image: linear-gradient(90deg, #33cccc, #2CEAA3);
  border-image-slice: 1;
  border-bottom: 1px solid transparent;

}

a:hover {
  color: white;
  text-decoration: none;
  background: linear-gradient(90deg, #33ccccaa, #2CEAA3aa);
  border-radius: 2px;
  -webkit-animation:
    ease-in fade 0.25s;
          animation:
    ease-in fade 0.25s;
  transition: background 400ms;
}

@-webkit-keyframes fade {
  0% {
    opacity: 0.3;

  }

  100% {
    opacity: 1;

  }
}

@keyframes fade {
  0% {
    opacity: 0.3;

  }

  100% {
    opacity: 1;

  }
}

.f {
  width: 7rem
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
}

h3 {
  font-size: 1.3rem;
}

.tm-site-logo {
  width: 40px;
  height: 40px;
  border: 7px solid white;
  transform: rotate(45deg);
  display: inline-block;
  vertical-align: middle;
}

#prog1 {
  width: 100%;
  background-color: #222;
  border-radius: 10px;
  z-index: 99;
}

#bar1 {
  width: 0%;
  height: 1.5rem;
  color: white;
  background: linear-gradient(45deg, #33ccccaa, #2CEAA3aa);
  border-radius: 10px;
  z-index: 9;
}

.tm-site-title {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
}

.tm-site-header {
  padding-top: 45px;
  padding-bottom: 45px;
  margin-bottom: 0;
}

.header {
  position: fixed;
  top: 0;
  z-index: 9999999;
  width: 100%;
  background-color: #333;
}

.complete {
  border-radius: 5px;
  background: linear-gradient(#33ccccaa, #2CEAA3aa);
  color: white;
  font-size: 1.3rem;
  border: 1px solid transparent;

}

.complete:hover {
  background: linear-gradient(#33ccccee, #2CEAA3ee);
}

.progress-bar {
  height: 8px;
  background: linear-gradient(45deg, #33cccc, #2CEAA3);
  width: 0%;
}

.progress-con {
  width: 100%;
  height: 8px;
  padding-bottom: 5px;
  background: #222;
}


.row1 {
  background-color: #333333;
  text-align: center;
  padding-bottom: 5px;
  margin-bottom: 0px;
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 99;

}

.foot a {
  border-radius: 0;
}

.row1 {
  font-size: 0.5 rme;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 99;
}

.row2 {
  background-color: #333;
  text-align: center;
  bottom: 0;
  padding-top: 15px;
  padding-bottom: 5px;
  position: relative;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.foot ::-moz-selection {
  color: white;
  background-color: #33cccc;
  border-radius: 7px;
}

.foot ::selection {
  color: white;
  background-color: #33cccc;
  border-radius: 7px;
}

.row1 {
  padding: 8px 8px;
}

.row2 a {
  margin: 20px;
  padding: 10px;
  border-radius: 0px;
  z-index: 999;
}

@media only screen and (max-width:1500px) {
  .row2 {
    display: none;
  }


}

.tm-welcome-text {
  margin-top: 65px;
  margin-bottom: 65px;
  font-size: 2.2rem;
}

.tm-font-400 {
  font-weight: 400;
}

.tm-text-light-gray {
  color: #CDCDCD;
}

.tm-text-gray {
  color: #CCCCCC;
}

.tm-text-red {
  color: #f66079;
}

.tm-text-white {
  color: #FFFFFF;
}

a.tm-text-white:hover,
a.tm-text-white:focus {
  color: #FFFFFF;
}

.tm-text-green {
  color: #2CEAA3;
}

.tm-text-cyan {
  color: #33CCCC;
}

.tm-text-yellow {
  color: #F2ED56;
}

.tm-text-orange {
  color: #f66079;

}

.tm-bg-dark {
  background-color: #262626;
}

.tm-bg-dark-light {
  background-color: #404040;
}

hr {
  background: linear-gradient(90deg, #33cccc, #2CEAA3);
  border: 2px solid transparent;
  -o-border-image: linear-gradient(90deg, #33cccc, #2CEAA3);
     border-image: linear-gradient(90deg, #33cccc, #2CEAA3);
  border-image-slice: 1;
  max-width: 70%;
  border-radius: 25%;
}

.tm-video-iframe {
  height: auto;
}

.tm-timeline-item {
  margin-left: 70px;
}

.tm-timeline-item-inner {
  display: flex;
  align-items: center;

}

.tm-img-timeline {
  width: 160px;
  height: 160px;
  display: inline-block;
  vertical-align: middle;

  box-shadow: 2px 2px 8px 8px rgba(0, 0, 0, 0.2);

}

.tm-timeline-connector {
  width: 55px;
  height: 3px;
  background: linear-gradient(#2CEAA3, #33cccc);
}

.tm-timeline-connector-vertical {
  height: 60px;
  width: 3px;
  background: linear-gradient(#2CEAA3, #33cccc);

  margin-left: 260px;
}

.tm-timeline-description {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  padding: 35px 40px;
  max-width: 712px;
  box-shadow: 2px 2px 8px 8px rgba(0, 0, 0, 0.2);

}

.tm-section-mb {
  margin-bottom: 85px;
}

.tm-section-mt {
  margin-top: 85px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}


::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #555, #444, #333, #222);


}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #333;
}

iframe {
  max-width: 100%;
}

input {
  border: 1px solid white;
}

input,
textarea,
[contenteditable] {
  caret-color: #FFFFFF;
}

p {
  line-height: 1.9;
  cursor: text;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1310px;
  }

  .tm-container-2 {
    max-width: 1170px;
  }

}

@media (max-width: 991px) {
  .tm-timeline-item {
    margin-left: 25px;
  }
}

@media (max-width: 767px) {
  .tm-timeline-item {
    margin-left: 0;
  }

}

@media (max-width: 584px) {
  .tm-timeline-item-inner {
    flex-direction: column;
  }

  .tm-timeline-connector {
    width: 3px;
    height: 55px;
  }

  .tm-timeline-connector-vertical {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 575px) {
  .container {
    max-width: 540px;
  }
}