* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.cont {
  width: 100%;
  height: 100%;
}
.input-field {
  display: block;
  margin: 5px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid gray;
  box-shadow: 2px 2px 10px lightgray;
}
.button-field {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  margin: 2px;
}
.input-submit-field {
  background: white;
  display: block;
  font-weight: bold;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid gray;
  width: 100%;
  box-shadow: 2px 2px 10px lightgray;
}
.input-submit-field:hover {
  cursor: pointer;
  background: lightgray;
  box-shadow: 5px 5px 10px lightgray;
}
body,
html {
  background: #f07;
  background-color: rgb(255, 0, 152);
  background-repeat: repeat;
  background-image: none;
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
  background-image: linear-gradient(45deg, #3023ae 0%, #f07 100%);
  /* background-image: linear-gradient(
    to right top,
    #d16ba5,
    #c777b9,
    #ba83ca,
    #aa8fd8,
    #9a9ae1,
    #8aa7ec,
    #79b3f4,
    #69bff8,
    #52cffe,
    #41dfff,
    #46eefa,
    #5ffbf1
  );
  background-repeat: no-repeat;
  background-position: center; */
  color: white;
  height: 100%;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande";
  counter-reset: counter;
}
h1 {
  margin: 100px 0px 50px 0px;
  text-align: center;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
.flex-component {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flex-component-child {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ecf4f3;
  color: gray;
  text-align: center;
  border-radius: 62% 38% 19% 81% / 64% 30% 70% 36%;
  max-width: 300px;
  height: 200px;
  font-size: 120px;
  font-weight: bold;
  margin: 10px;
  padding: 50px;
  box-shadow: 15px 15px 25px lightgreen;
  animation: flex-component-child 5s infinite;
}
@keyframes flex-component-child {
  50% {
    box-shadow: 15px 15px 25px gray;
  }
  100% {
    box-shadow: 15px 15px 25px lightgreen;
  }
}
.flex-component-child-move2 {
  border-radius: 62% 38% 60% 40% / 64% 71% 29% 36%;
  padding: 100px;
}
.flex-component-child-move12 {
  border-radius: 82% 18% 77% 23% / 64% 60% 40% 36%;
  padding: 100px;
}
.flex-component-child:hover {
  transform: rotate(30deg);
  cursor: pointer;
}
.flex-component-workplace {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
}
.flex-20-box {
  display: flex;
  flex: 18%;
  flex-direction: column;
  border: 2px solid white;
  border-style: none solid solid solid;
  border-radius: 6px;
  margin: 2px;
  padding: 0px 0px 100px 0px;
  height: 85%;
}
.flex-40-left-box {
  display: flex;
  flex: 38%;
  max-height: 85%;
  flex-direction: column;
  border: 2px solid white;
  border-style: none solid solid solid;
  border-radius: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0px 2px;
}
.flex-40-right-box {
  border: 2px solid white;
  border-style: none solid solid solid;
  border-radius: 6px;
  flex: 38%;
  margin: 2px;
  max-height: 85%;
  overflow-x: hidden;
  overflow-y: auto;
}
.nav-box {
  background: white;
  box-shadow: 1px 1px 10px lightgray;
  padding: 15px;
  margin: 5px;
}
.heading {
  background: whitesmoke;
  color: gray;
  width: 100%;
  box-shadow: 0px 1px 5px white;
  text-align: center;
  border-radius: 5px;
  margin: 0px 0px 10px 0px;
  padding: 10px;
}
.output {
  margin: 20px 0px;
  text-align: center;
}
.code-box::before {
  font-weight: bold;
  color: white;
  margin: 5px 0px;
  counter-increment: counter;
  content: counter(counter) ". ";
}
.code-see {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 500px;
}
.code-inside-code {
  color: white;
  font-weight: bold;
}

/* animation */
.animation-div1 {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #9d65c9;
  position: relative;
  border-radius: 5px;
  animation-name: animation-div1;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
.animation-text-include {
  margin-top: 40%;
  text-align: center;
  color: white;
}
.animation-text-file {
  margin-top: 50%;
  text-align: center;
  color: white;
}
.animation-div2 {
  display: inline-block;
  width: 250px;
  height: 250px;
  background-color: #7e8a97;
  float: right;
  border-radius: 5px;
  animation-name: animation-div2;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
@keyframes animation-div1 {
  0% {
    background-color: #9d65c9;
    left: 0px;
    top: 0px;
  }
  100% {
    background-color: #28df99;
    left: 370px;
    top: 0px;
  }
}
@keyframes animation-div2 {
  30% {
    background-color: #7e8a97;
  }
  100% {
    background-color: #28df99;
  }
}
.animation-moving-div-main {
  width: 107px;
  height: 200px;
  position: relative;
  left: 215px;
  border-style: none solid solid solid;
}
.animation-moving-div {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #9d65c9;
  position: relative;
  border-radius: 5px;
  animation-name: animation-moving-div;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
.animation-stack-box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #7e8a97;
  border-radius: 5px;
  float: right;
  animation-name: animation-stack-box;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
@keyframes animation-moving-div {
  0% {
    background-color: #9d65c9;
    left: 0px;
    top: 0px;
  }
  100% {
    background-color: #28df99;
    left: 370px;
    top: 0px;
  }
}
@keyframes animation-stack-box {
  30% {
    background-color: #7e8a97;
  }
  100% {
    background-color: #28df99;
  }
}
.animation-moving-div-datatype {
  width: 100px;
  height: 20px;
  background-color: #31112c;
  position: relative;
  left: 217px;
  top: 0px;
  animation-name: animation-moving-div-datatype;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes animation-moving-div-datatype {
  0% {
    background-color: #31112c;
    top: 0px;
  }
  100% {
    background-color: #31112c;
    top: 190px;
  }
}
.animation-text-show {
  display: block;
  margin: 5px;
  color: black;
  text-align: center;
  font-weight: bold;
}
.animation-text-printf {
  background: #31112c;
  color: white;
  text-align: center;
}
.animation-moving-div-scanf {
  width: 100px;
  height: 20px;
  background-color: #31112c;
  position: relative;
  left: 217px;
  top: 0px;
  animation-name: animation-moving-div-scanf;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes animation-moving-div-scanf {
  0% {
    background-color: #31112c;
    top: 0px;
  }
  100% {
    background-color: #31112c;
    top: 190px;
  }
}

.animation-ifelse-body {
  position: relative;
  left: 200px;
  top: 0px;
  width: 167px;
  height: 35px;
  background: #31112c;
  color: white;
  padding: 10px;
  animation-name: animation-ifelse-body;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.animation-cursor-true {
  display: inline-block;
  position: relative;
  top: 0px;
  left: 270px;
  background: black;
  color: white;
  animation-name: animation-cursor-true;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
.animation-cursor-false {
  display: inline-block;
  position: relative;
  top: 0px;
  left: 270px;
  background: black;
  color: white;
  animation-name: animation-cursor-false;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
.animation-show-true {
  background: #28df99;
  color: white;
  padding: 10px;
  display: inline-block;
  position: relative;
  top: 150px;
  left: 221px;
}
.animation-show-false {
  background: #31112c;
  color: white;
  padding: 10px;
  display: inline-block;
  position: relative;
  top: 150px;
  left: 207px;
}
@keyframes animation-ifelse-body {
  0% {
    background-color: #31112c;
  }
  100% {
    background-color: #28df99;
  }
}
@keyframes animation-cursor-true {
  to {
    background: lightblue;
    color: white;
    top: 130px;
  }
}
@keyframes animation-cursor-false {
  to {
    background: lightblue;
    color: white;
    top: 130px;
  }
}
.animation-moving-div-mainup {
  width: 100px;
  height: 20px;
  background-color: #31112c;
  position: relative;
  left: 217px;
  top: 190px;
  animation-name: animation-moving-div-mainup;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.animation-stack-box-mainup {
  width: 110px;
  height: 200px;
  border-style: none solid solid solid;
  position: relative;
  left: 50px;
  top: 0px;
}
@keyframes animation-moving-div-mainup {
  0% {
    background-color: #31112c;
    top: 190px;
  }
  100% {
    background-color: #31112c;
    top: 0px;
  }
}
.hellgoback {
  font-size: 17px;
  color: gray;
  cursor: pointer;
}
.type-blink {
  display: inline;

  animation: type-blink 0.5s infinite;
}
@keyframes type-blink {
  to {
    opacity: 0;
  }
}
.type-thisisword {
  display: inline;
  text-align: center;
}
.type-text-center {
  display: flex;
  justify-content: center;
  align-items: center;
}