* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #24252a;
}

#particleCanvas {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /*background: radial-gradient(#ffc38c, #ff9b40);*/
  /*background: radial-gradient(#00aeff, #008c99);*/
  background: radial-gradient(#00aeff26, #008c992a);
}

#container {
  display: flex;
  margin: 10px auto;
}

#canvasNetwork {
  border: 1px solid #d3d3d3;
  display: block;
  flex: 0 0 1000px;
  background-color: #d3d3d3;
  margin-left: 20px;
}

#sideMenu {
  background-color: #303030;
  margin-left: 10px;
  height: 1010px;
  /*width: calc(100% - 1000px - 10px);*/
  width: 400px;
  flex: none;
}

body h1 {
  text-align: center;
  font-size: 40px;
  color: white;
  background-color: #303030;
  width: 300px;
  margin: auto;
  padding: 10px;
}

select {
  box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  border-width: 3px;
  border-color: rgb(29, 29, 29);
  display: block;
  padding: 15px;
  font-size: 20px;
  margin: auto;
  background-color: #24252a;
  color: white;
  cursor: pointer;
}

select option {
  background-color: #24252a;
}

table {
  text-align: center;
  border-collapse: collapse;
}

table,
td {
  border: 3px solid rgb(29, 29, 29);
  background-color: #24252a;
  color: #d3d3d3;
}

td {
  width: 100px;
  height: 35px;
}

/*NAVBAR*/
li,
a,
p,
button {
  /* The font comes from theme.css (no fonts from Google: privacy). */
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  color: #ecf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 10%;
  background-color: rgb(25, 25, 27);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
}

.logo {
  cursor: pointer;
  height: 30px;
  width: 300px;
}

.logoContainer {
  margin-right: auto;
}

.navLinks,
.sideLinks {
  list-style: none;
}

.navLinks li {
  display: inline-block;
  padding: 0px 20px;
}

.navLinks li a {
  transition: all 0.3s ease 0s;
}

.navLinks li a:hover {
  color: #00b7ff;
}

.sideLinks li {
  padding: 10px;
  margin: 10px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.sideLinks li:hover {
  color: #00b7ff;
}

.navButton {
  margin-left: 20px;
  padding: 9px 25px;
  background-color: rgb(38, 168, 170);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.navButton:hover {
  background-color: rgba(46, 214, 216, 0.8);
}
/*NAVBAR END*/

.pages {
  margin-top: 400px;
}

.page {
  margin-top: calc(100vh + 20px);
  height: 100vh;
}

#imgBrain {
  display: block;
  margin: auto;
  margin-top: 20vh;
  width: 1000px;
  height: auto;
  transition: all 1s ease 0s;
}

#imgBrain:hover {
  width: 1040px;
}

.section1,
.section2,
.section3,
.section4,
.section5,
.section6 {
  margin-left: 10px;
  display: none;
}

.section1.show,
.section2.show,
.section3.show,
.section4.show,
.section5.show,
.section6.show {
  display: block;
}

.slide {
  display: none;
}

.slide1A {
  height: 200px;
  width: 360px;
  background: url(images/Sigmoid.png) no-repeat center center/cover;
}

.slide1B {
  height: 200px;
  width: 360px;
  background: url(images/Binary\ Step.png) no-repeat center center/cover;
}

.slide1C {
  height: 200px;
  width: 360px;
  background: url(images/ArcTan.png) no-repeat center center/cover;
}

.slide1D {
  height: 200px;
  width: 360px;
  background: url(images/Tanh.png) no-repeat center center/cover;
}

.slide1E {
  height: 200px;
  width: 360px;
  background: url(images/ReLU.png) no-repeat center center/cover;
}

.slide2,
.slide3 {
  height: 60px;
  width: 200px;
  background-color: #ffffff;
}

.slide2 input,
.slide3 input {
  margin-top: 10px;
  margin-left: 10px;
  height: 40px;
  width: 180px;
  background-color: #24252a;
  color: #d3d3d3;
  text-align: center;
  border: none;
  font-size: 18px;
}

.slide4 {
  height: 60px;
  width: 200px;
  background-color: #ffffff;
}

.slide4 input {
  margin-top: 10px;
  margin-left: 10px;
  height: 40px;
  width: 180px;
  background-color: #24252a;
  color: #d3d3d3;
  text-align: center;
  border: none;
  font-size: 18px;
}

.slide5.xor {
  height: 200px;
  width: 200px;
  margin-top: 10px;
  background: url(images/xorProblem.png) no-repeat center center/cover;
}

.slide5.separation {
  height: 200px;
  width: 200px;
  margin-top: 10px;
  background: url(images/separationProblem.png) no-repeat center center/cover;
}

.slide5.sphere {
  height: 200px;
  width: 200px;
  margin-top: 10px;
  background: url(images/sphereProblem.png) no-repeat center center/cover;
}

.slide5.quadrant {
  height: 200px;
  width: 200px;
  margin-top: 10px;
  background: url(images/quadrantProblem.png) no-repeat center center/cover;
}

.slide6 {
  height: 200px;
  width: 200px;
  background-color: #15ff00;
}

.btnLeft {
  position: absolute;
  margin-top: -115px;
  margin-left: -5px;
  height: 40px;
  width: 40px;
  border: none;
  background-color: #24252a;
  z-index: 2;
}

.btnLeft:hover {
  background-color: rgb(29, 29, 29);
}

.btnRight {
  position: absolute;
  margin-top: -115px;
  margin-left: 165px;
  height: 40px;
  width: 40px;
  border: none;
  background-color: #24252a;
  z-index: 2;
}

.btnRight:hover {
  background-color: rgb(29, 29, 29);
}

#trainingTask {
  margin-left: 0px;
  padding: 0;
  font-size: 17px;
  height: 45px;
  width: 150px;
}

.trainButton {
  margin-left: 20px;
  padding: 9px 25px;
  background-color: rgb(38, 168, 170);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  margin-top: 30px;
}

.trainButton:hover {
  background-color: rgba(46, 214, 216, 0.8);
}

.weightsContainer {
  width: 1412px;
  height: 400px;
  margin-left: 20px;
  margin-top: 10px;
  background-color: #303030;
  margin-bottom: 20px;
}

#weightSelection {
  position: absolute;
  margin-left: 10px;
  margin-top: 10px;
}

#tableContainer {
  position: absolute;
  margin-top: 90px;
  margin-left: 20px;
}

.section4 p {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.section5 p {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.section6 p {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.output {
  display: flex;
}

#buttonContainer {
  display: flex;
  flex-direction: column;
  margin-left: 7px;
  margin-top: 25px;
}

.viewButton {
  height: 30px;
  width: 30px;
  margin-bottom: 6px;
  border: none;
  background: url(images/eye.png) no-repeat center center/cover;
  user-select: none;
}

.viewButton:hover > .overlay {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.2;
  border-radius: 15px;
}

#errorLog {
  color: red;
  margin-left: 20px;
  margin-top: 30px;
}

@keyframes move {
  0% {
    offset-distance: 0%;
    background: url(images/eye.png) no-repeat center center/cover;
  }
  100% {
    offset-distance: 100%;
    background: url(images/eye.png) no-repeat center center/cover;
  }
}

#eyeAnimation {
  display: none;
}

#eyeAnimation.anim {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #00000000;
  position: absolute;
  /*offset-path: path('M325 40 Q-250 -350 -550 0');
    animation: move 3000ms 1 normal cubic-bezier(0.3, 0, 0, 1);*/
  user-select: none;
  display: block;
}

/*SWITCH*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/*SWITCH END*/