* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
  --primiary-color: #ff6a00;
  --secondary-color: #0e4775;
}
html {
  scroll-behavior: smooth;
}
/* START GLOBAL RULES */
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
/* END GLOBAL RULES */
/* START load */
.loading {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: 10000;
  background-color: var(--secondary-color);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.half-circle-spinner,
.half-circle-spinner * {
  box-sizing: border-box;
}

.half-circle-spinner {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  position: relative;
}

.half-circle-spinner .circle {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: calc(60px / 10) solid transparent;
}

.half-circle-spinner .circle.circle-1 {
  border-top-color: var(--primiary-color);
  animation: half-circle-spinner-animation 1s infinite;
}

.half-circle-spinner .circle.circle-2 {
  border-bottom-color: var(--primiary-color);
  animation: half-circle-spinner-animation 1s infinite alternate;
}

@keyframes half-circle-spinner-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* END load */
/* START scroll top */
.scroll {
  width: 100%;
  position: fixed;
  bottom: 5px;
  left: 0;
  display: none;
  justify-content: flex-end;
}
.scroll img:hover {
  border-radius: 50%;
  background-color: var(--secondary-color);
}
.scroll.visible {
  display: flex;
}
.scroll img {
  opacity: 0.3;
  cursor: pointer;
  margin-bottom: 50px;
  width: 60px;
}
.scroll img:hover {
  opacity: 1;
}
/* END scroll top */
body {
  transition: 0.3s;
  font-family: "Zen Dots", cursive;
  background-attachment: fixed;
  /* background-image: linear-gradient(20deg, #00d4ff -60%, #6f0979 100%); */
  /* background-image: linear-gradient(20deg, #243363 -10%, #859398 100%); */
  /* background-image: linear-gradient(20deg, #fc354c 10%, #0abfbc 100%); */
  /* background-image: linear-gradient(20deg, #4b6cb7 -60%, #182848 100%); */
  /* background-image: linear-gradient(20deg, #c55858 -60%, #190a05 100%); */
  background-image: linear-gradient(20deg, #780206 -60%, #061161 100%);
}
header {
  z-index: 100;
  transition: 0.4s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
header.sticky {
  background: var(--secondary-color);
  padding: 10px 100px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
header nav {
  width: 100%;
  display: flex;
  margin: 10px;
  align-items: center;
  justify-content: space-between;
}
header nav ul {
  display: flex;
}
header nav ul li {
  cursor: pointer;

  text-transform: capitalize;
  margin-left: 20px;
}
header nav ul li a {
  color: #fff;
}
header nav ul li a:hover {
  color: var(--primiary-color);
}
header .logo {
  display: flex;
  align-items: center;
}
header .logo img {
  width: 50px;
  border-radius: 50%;
}
header .logo span {
  letter-spacing: 8px;
  color: var(--primiary-color);
  margin-left: 15px;
}
/* start home */
.container {
  width: 100%;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .home {
  margin-top: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 900px;
  min-height: 300px;
}
.container .home h1 {
  color: #eee;
  font-family: "Bebas Neue", cursive;
  letter-spacing: 8px;
  font-size: 5em;
  text-align: center;
}
.container .home h3 {
  color: #a6a6a6;
  font-family: Arial, Helvetica, sans-serif;
}
.container .home .btn {
  margin: 0 auto;
  width: 70%;
  display: flex;
  justify-content: space-evenly;
}
.btn button a {
  color: rgb(255, 255, 255);
}
.btn button a:hover {
  color: var(--primiary-color);
}
button {
  text-transform: capitalize;
  font-size: 18px;
  transition: 0.3s;
  margin-top: 15px;
  border: none;
  color: white;
  background-color: transparent;
  width: 150px;
  height: 45px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
.container .home button:hover {
  padding: 5px;
  background-color: var(--secondary-color);
  color: var(--primiary-color);
}
/* end home */
/* START ABOUT */
.about {
  width: 100%;
}
#discord {
  opacity: 0;
  margin-bottom: 100px;
}
#discord.move {
  opacity: 1;
  transition: 2s;
}
#about {
  margin-top: 50px;
  margin-bottom: 180px;
  opacity: 0;
  transform: translateX(-1000px);
}
#about.move {
  opacity: 1;
  transition: 2s;
  transform: translate(0);
}
.section-title {
  padding: 110px;
  color: var(--primiary-color);
  text-align: center;
  text-decoration: underline;
}
.about .content {
  justify-content: space-evenly;
  display: flex;
  height: 400px;
}
.about .content .CJimg {
  display: flex;
  align-items: center;
  max-width: 550px;
}
.about .content .CJimg img {
  width: 100%;
}
.about .content .pargraph {
  font-family: "Poppins", sans-serif;
  text-align: center;
  line-height: 2em;
  color: #fff;
  display: flex;
  max-width: 500px;
}
.about .content .pargraph span {
  color: crimson;
  text-decoration: underline;
}
/* END ABOUT */
/* START DISCORD */
.contentDiscord {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contentDiscord .discordText {
  width: 45%;
}
.contentDiscord .discordText h3 {
  color: #eee;
  font-size: 35px;
  font-family: "Patua One", cursive;
}
.contentDiscord .discordText p {
  color: #111;
  font-size: 15px;
  margin-bottom: 20px;
}
.contentDiscord .discordText a {
  transition: 0.3s;
  text-transform: capitalize;
  font-size: 18px;
  transition: 0.3s;
  margin-top: 15px;
  border: none;
  color: white;
  background-color: transparent;
  padding: 15px 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
.contentDiscord .discordText a:hover {
  background-color: var(--primiary-color);
}
.contentDiscord .imgDiscord {
  width: 45%;
}
.contentDiscord .imgDiscord img {
  width: 650px;
  height: 400px;
}
/* END DISCORD */
.contentJoin {
  margin-bottom: 100px;
  width: 1100px;
  display: flex;
  min-height: 400px;
}
.contentJoin .joinText {
  width: 50%;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.contentJoin h3 {
  color: #fff;
  margin-bottom: 25px;
  font-size: 30px;
}
.contentJoin h3 span {
  text-transform: capitalize;
  color: var(--primiary-color);
}
.contentJoin ul li {
  margin-left: 20px;
  line-height: 35px;
  position: relative;
}
.contentJoin ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.contentJoin ul li img {
  margin-right: 20px;
  width: 40px;
  text-align: center;
}
.contentJoin ul li a {
  margin-left: 20px;
}
/* .tringle {
  height: 0;
  width: 0;
  border-top: 35px solid blue;
  border-bottom: 35px solid green;
  border-left: 35px solid var(--secondary-color);
  border-right: 35px solid red;
} */
.contentJoin .joinImg {
  width: 50%;
  display: flex;
  justify-content: flex-end;
}
/* START RULES */
.containerRules {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 70vh;
}
.containerRules .rules {
  width: 1000px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}
.containerRules .rules .rulesBlock {
  border: 2px solid white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.103);
  width: 235px;
  height: 250px;
}
.containerRules .rules .rulesBlock:hover {
  transition: 0.6s;
  transform: translateY(-10px);
}
.containerRules .rules .rulesBlock h1 {
  color: var(--primiary-color);
  font-family: "Poppins", sans-serif;
  letter-spacing: 5px;
  margin-bottom: 20px;
}
.containerRules .rules .rulesBlock a {
  border: none;
  color: #fff;
  background-color: var(--secondary-color);
  opacity: 0.4;
  padding: 15px 25px;
}
.containerRules .rules .rulesBlock a:hover {
  opacity: 1;
}
/* END RULES */
/* START FOOTER */
footer {
  margin-top: 60px;
  background-color: var(--primiary-color);
  text-align: center;
  padding: 13px;
}
footer p {
  font-family: "Poppins", sans-serif;
}
footer p a {
  color: var(--secondary-color);
}
/* END FOOTER */
/* START MEDIA */
@media (max-width: 915px) {
  header .logo span {
    display: none;
  }
}
@media (max-width: 915px) {
}
/* END MEDIA */