* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 100%;
  font-family: Arial, sans-serif;
}

div,
section,
span,
ul,
li,
a,
header {
  box-sizing: border-box;
}
/*css reset*/

header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px 50px;
  align-items: center;
  position: fixed;
  /* z-index: 999; */
}

/* .main {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  border-radius: 50%;
  font-family: Arial, sans-serif;
} */

img.logo {
  width: 200px;
  height: auto;
}

#nav-items li {
  list-style: none;
  display: inline-block;
  margin: 20px;
}

#nav-items li a {
  color: #000;
  text-decoration: none;
  font-size: 20px;
}

section {
  width: 100%;
  float: left;
  height: 100vh;
  position: relative;
}

#home {
  background-color: #ffffff;
  width: 100%;
  float: left;
  height: 100vh;
  position: relative;
}

#about {
  background-color: #bc8cf2;
}

#learn {
  background-color: #ffffff;
}

#job {
  background-color: #ffffff;
}

#community {
  background-color: #ffffff;
}

#contact {
  background-color: #bc8cf2;
}

/* .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #3f0071;
} */

.card {
  /* To correctly align image, regardless of content height: */
  vertical-align: top;
  display: inline-block;
  /* To horizontally center images and caption */
  text-align: center;
  /* The width of the container also implies margin around the images. */
  width: 400px;
}
.caption {
  /* Make the caption a block so it occupies its own line. */
  display: block;
}

h2 {
  text-align: center;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 500px;
  width: 50%;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: bold;
}

.position {
  /* display: block;
  margin-left: auto;
  margin-right: auto; 
  padding: 500px;
  width: 100%;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  */
  position: absolute;
  text-align: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
}

.space {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 500px;
  width: 100%;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  color: rgb(22, 20, 20);
}

.main {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
}

.home-image {
  width: 400px;
}

h1 {
  text-align: center;
}

/* Float three columns side by side */
.column {
  float: left;
  width: 33.3%;
  padding: 10px 10px;
}

/* Remove extra left and right margins, due to padding */
.row {
  margin: 0 -5px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 1000px) {
  .column {
    width: 50%;
    display: block;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 12px;
  text-align: center;
  background-color: #f1f1f1;
  transition: 0.3s;
  border-radius: 10px;
}

.card:hover {
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.4);
}

img {
  border-radius: 10px 10px 10px 10px;
}

#job a:link,
a:visited {
  background-color: #000;
  color: #ffffff;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

#job a:hover,
a:active {
  background-color: #3f0071;
}

h4 {
  font-size: large;
  font-weight: bold;
  text-align: left;
  color: #000;
}
/* Slideshow container */

.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
  width: 50%;
}
/* Slides */

.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}
/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
/* Position the "next button" to the right */

.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}
/* The dot/bullet/indicator container */

.dot-container {
  text-align: center;
  padding: 20px;
  background: #ddd;
  width: 50%;
}
/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
/* Add a background color to the active dot/circle */

.active,
.dot:hover {
  background-color: #717171;
}
/* Add an italic font style to all quotes */

q {
  font-style: italic;
}

.center {
  text-align: center;
}

h3 {
  color: white;
  text-align: center;
}
/* form CSS */

input[type="tel"],
input[type="number"],
input[type="text"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #3f0071;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 20px;
  resize: vertical;
}

label {
  color: white;
}

input[type="submit"] {
  background-color: #3f0071;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form {
  display: block;
}
/* table CSS */

#alignment {
  width: 40%;
  color: white;
  margin-left: auto;
  margin-right: auto;
}

th {
  text-align: left;
}

.social-media ul {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  margin: 0;
  transform: translate(-50%, -50%);
  display: flex;
}

.social-media ul li {
  list-style: none;
  margin: 0 15px;
}

.social-media ul li .fab {
  font-size: 30px;
  line-height: 60px;
  transition: 0.3s;
  color: #000;
}

.social-media ul li .fab:hover {
  color: #fff;
}

.social-media ul li a {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  transition: 0.6s;
  box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);
}

.social-media ul li a:hover {
  transform: translate(0, -10%);
}

.social-media ul li:nth-child(1) a:hover {
  background-color: #1892d4;
}

.social-media ul li:nth-child(2) a:hover {
  background-color: #92088b;
}

.social-media ul li:nth-child(3) a:hover {
  background-color: #1892d4;
}

.social-media ul li:nth-child(4) a:hover {
  background-color: #1892d4;
}
/* p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-align: center;
} */

h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-align: justify;
}

#intro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000000;
  text-align: center;
}

#desc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-align: center;
}

.footer {
  position: fixed;
  padding: 20px;
  left: 0px;
  bottom: 0px;
  height: 100px;
  width: 100%;
  background-color: #000000;
  color: white;
  text-align: center;
}

.footer .fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}
/* Discord */

.footer .fa-discord {
  background: #000000;
  color: white;
}
/* Facebook */

.footer .fa-facebook {
  background: #000000;
  color: white;
}
/* Linkedin */

.footer .fa-linkedin-in {
  background: #000000;
  color: white;
}

@media screen and (max-width: 600px) {
  .col-25,
  .col-75,
  input[type="submit"] {
    width: 100%;
    margin-top: 0;
  }
}