.belanosima-regular {

  font-family: "Belanosima", sans-serif;

  font-weight: 400;

  font-style: normal;

}



.body {

  height: 100vh;

  width: 100vw;

  margin: 0 auto;

}



.header {

  overflow: hidden;

  padding: 10px 10px;

}



.header a {

  float: left;

  color: black;

  padding: 32px 30px;

  margin-left: 20px;

  margin-top: 0px;

  text-decoration: none;

  font-size: 18px;

  line-height: 25px;

  font-family: "Belanosima", sans-serif;

}



.header-right {

  float: right;

  margin-right: 50px;

  margin-top: 40px;

  box-sizing: border-box;

  display: inline-block;

}



.header-right a{

  padding-inline: 55px;

  position: relative;

}



.header-right a:hover {

  background-color: red;

  color: white;

  font-family: "Belanosima", sans-serif;

  text-align: center;

  justify-content: center;

  padding-top: 12px;

  padding-bottom: 34px;

  padding-right: 20px;

  padding-left: 20px;

  box-sizing: border-box;

  height: 3px;

  width: 155px;

  margin-top: 20px;

  border-radius: 9px;

  display: inline-block;

  position: relative;

}



.about:hover {

  margin-left: 20px;

  margin-right: 10px;

}



.porto:hover {

  margin-right: 30px;

  margin-left: 48.7px;

}



.game:hover {

  margin-right: 1px;

  margin-left: 27px;

}



.contact:hover {

  margin-right: 19.9px;

  margin-left: 40.77px;

}



.dark-mode {

  background-color: #1e1e1e;

}



.dark-mode .testi{

  background-color: white;

}



.dark-mode a{

  color: white;

}



/*toggle box dark mode*/

.switch {

  position: relative;

  display: inline-block;

  width: 56px;

  height: 30px;

  margin-top: 30px;

  margin-left: 50px;

  padding-top: 20px;

  box-sizing: border-box;

}



.switch input {

  opacity: 0;

  width: 0;

  height: 0;

}



.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #da2027;

  -webkit-transition: .3s;

  transition: .3s;

}



.slider:before {

  position: absolute;

  content: "";

  height: 22px;

  width: 22px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: .3s;

  transition: .3s;

}



input:checked + .slider {

  background-color: #da2027;

}



input:checked + .slider:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}



.slider.round {

  border-radius: 34px;

}



.slider.round:before {

  border-radius: 50%;

}



.switch img{

  position: absolute;

  width: 20px;

  top: 40px;

}



.switch img.sun{

  left: 4.6px;

  top: 4.9px;

}



.switch img.moon{

  left: 31px;

  top: 4.9px;

}





/*toggle box dark mode*/



.atas {

  background-image: url(images/awanpolos.png);

  height: 120vh;

  background-repeat: no-repeat;

  background-size: cover;

  margin-top: 50px;

}



.kotak {

  float: left;

  background-color: red;

  color: white;

  font-family: "Belanosima", sans-serif;

  font-weight: 600;

  font-size: 16pt;

  margin: 100px -195px;

  padding: 0px 30px 0px 30px;

  border-radius: 8px;

  width: 600px;

  height: 260px;

  line-height: 1.7;

  word-spacing: 5px;

}



.kotak a {

  float: right;

  font-family: "Belanosima", sans-serif;

  color: red;

  background-color: white;

  font-size: 12pt;

  padding: 10px 40px 10px 40px;

  margin-top: 40px;

  margin-bottom: 30px;

  position: relative;

  border-radius: 4px;

  border-color: transparent;

}



.testi {

  position: relative;

  background-size: cover;

  text-align: center;

  height: 100vt;

  margin: 0 auto;

}



.testi img{

  text-align: center;

  width: 270px;

  position: relative;

  margin-top: 60px;

  margin-left: -10px;

  z-index: 10;

}



.wadah {

  position: relative;

  width: 1200px;

  height: 300px;

  background-color: red;

  display: block;

  margin: 40px;

  border-radius: 50px;

  margin: 0 auto;

}



.wadah img{

  width: 200px;

  border-radius: 100%;

  display: block;

  margin: 80px;

  top: 15%;

  position: relative;

}



.wadah h1 {

  font-family: "Belanosima", sans-serif;

  display: block;

  color: white;

  margin-top: -160px ;

  margin-left: 310px;

  position: absolute;

}



.wadah p {

  font-family: "Belanosima", sans-serif;

  display: block;

  color: white;

  font-size: 10pt;

  margin-top: -140px ;

  margin-left: 310px;

  position: absolute;

}



.testi1 p{

  font-family: "Belanosima", sans-serif;

  display: block;

  color: white;

  position: absolute;

  margin-top: -210px;

  margin-left: 670px;

  margin-right: 50px;

  text-align: justify;

}



.testi2 p{

  font-family: "Belanosima", sans-serif;

  display: block;

  color: white;

  position: absolute;

  margin-top: -200px;

  margin-left: 670px;

  margin-right: 50px;

  text-align: justify;

}



.dark-mode .wadah{

  background-color: #1e1e1e;

}



.bawah {

  width: 100%;

  margin: 0 auto;

  padding: 80px;

} 



*,*:before,*:after {

  box-sizing: inherit;

}



.box h1 {

  font-family: "Belanosima", sans-serif;

  font-weight: 600px;

  color: red;

}



.link {

  width: 10px;

  height: 7px;

  background-color: red;

  border-radius: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}



.social img {

  top: -30px;

  width: 35px;

  height: 35px;

  left: 6px;

  object-fit: cover;

}



.half{

  width: auto;

  display: inline;

}



.logo {

  font-family: "Belanosima", sans-serif;

  font-weight: 600px;

  color: red;

  margin-left: -900px;

  margin-top: 200px;

}



.social {

  float: right;

  margin-top: -90px;

  margin-right: 250px;

}



.hmu{

  position: sticky;

  float: right; 

  margin-right: 150px;

  margin-left: -330px;

  cursor: pointer;

  margin-top: 50px;

}



.hmu a{

  color: white;

  font-family: "Belanosima", sans-serif;

  font-size: 14pt;

  width: 100px;

  background-color: red;

  border-radius: 20px;

  border-color: transparent; 

  justify-content: center;

  align-items: center;

}



.ktk {

  position: relative;

  background-size: cover;

  height: 100vt;

  top: 100px;

}



.ktk img{

  width: 200px;

  position: relative;

  margin-left: 400px;

  z-index: 10;

}



.poto {

  position: relative;

  width: 1200px;

  height: 450px;

  background-color: red;

  display: block;

  margin: 40px;

  border-radius: 50px;

  left: 100px;

}



.poto img{

  width: 300px;

  border-radius: 100%;

  display: block;

  margin-left: 100px;

  top: 16%;

  position: relative;

}



.bio p{

  font-family: "Belanosima", sans-serif;

  display: block;

  font-size: 12pt;

  color: white;

  position: absolute;

  margin-top: -210px;

  margin-left: 600px;

  margin-right: 100px;

  text-align: justify;

  line-height: 30px;

}





.org {

  position: relative;

  background-size: cover;

  height: 100vt;

  top: 100px;

}



.border {

  position: relative;

  width: 1200px;

  height: 710px;

  background-color: transparent;

  border-style: solid;

  border-color: red;

  display: block;

  margin: 40px;

  border-radius: 50px;

  border-width: 6px;

  left: 100px;

}



.border h1{

  font-family: "Belanosima", sans-serif;

  color: red;

  text-align: center;

}



.border p{

  font-family: "Belanosima", sans-serif;

  display: block;

  font-size: 12pt;

  color: red;

  position: absolute;

  margin-top: 20px;

  margin-left: 340px;

  margin-right: 100px;

  text-align: justify;

  line-height: 30px;

}



.section {

  margin-top: 180px;

  margin-left: 100px;

  margin-right: 100px;

  margin-bottom: 100px;

  position: relative;

}



.content p{

  font-family: "Belanosima", sans-serif;

  color: red;

  padding-left: 20px;

  text-align: center;

}



.content img{

  width: 200px;

  position: relative;

  margin-left: 550px;

  z-index: 10;

}





.score {

  font-family: "Belanosima", sans-serif;

  color: red;

  font-size: 26px;

  font-weight: bold;

  padding-top: 5px;

  text-align: center;

  margin-left: -470px;

  margin-top: 100px;

  margin-bottom: 900px;

}



.stage {

  left: 0;

  position: absolute;

  right: 0;

  z-index: 2;

  top: 300px;

  margin-left: 220px;

}



.tile {

  background: rgba(0, 0, 0, 0.15);

  position: absolute;

  transition-property:

    background,

    box-shadow,

    opacity,

    transform

  ;

  transform: translateZ(0);

  transition-duration: 3000ms;



}



.tile:before {

  bottom: 0;

  content: '';

  height: 0;

  left: 0;

  margin: auto;

  opacity: 0;

  position: absolute;

  right: 0;

  top: 0;

  width: 0;

  transition: opacity 300ms;

}



.tile.path:before {

  opacity: 1;

}



.tile.up:before {

  border-bottom: 4px inset rgba(255, 0, 0, 0.15);

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

}



.tile.down:before {

  border-top: 4px inset rgba(255, 0, 0, 0.15);

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

}



.tile.left:before { 

  border-right: 4px inset rgba(255, 0, 0, 0.15);

  border-top: 4px solid transparent;

  border-bottom: 4px solid transparent;

}



.tile.right:before { 

  border-left: 4px inset rgba(255, 0, 0, 0.15);

  border-top: 4px solid transparent;

  border-bottom: 4px solid transparent;

}



@media (max-width: 900px), (max-height: 900px) {

  .tile.up:before,

  .tile.down:before,

  .tile.left:before,

  .tile.right:before {

    border-width: 3px;

  }

}



@media (max-width: 500px), (max-height: 500px) {

  .tile.up:before,

  .tile.down:before,

  .tile.left:before,

  .tile.right:before {

    border-width: 2px;

  }

}



.tile.pressed {

  background: rgba(0, 0, 0, 0.3);

  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);

  transition-duration: 0ms;

}



.wrapper {

  position: relative;

  width: 1500px;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  padding: 10px;

  margin: 0 auto;

}



.card {

  position: relative;

  max-width: 340px;

  height: 415px;

  display: flex;

  flex-direction: column;

  align-content: center;

  text-align: center;



  background-color: red;

  box-sizing: 0 5px 202px rgba(255, 0, 0, .5);

  margin: 50px 40px;

  padding: 20px 15px;

  transition: .3s ease-in-out;

  border-radius: 8px;

}



.card:hover {

  height: 620px;

}



.porto img{

  height: 100px;

  margin-top: 100px;

  margin-left: 360px;

  margin-bottom: 100px;

}



.img-box {

  position: relative;

  width: 260px;

  height: 260px;



  top: -60px;

  left: 40px;

  box-sizing: 0 5px 20px rgba(0, 0, 0, .2);

  z-index: 1;

}



.img-box img {

  max-width: 100%;

  border-radius: 4px;

}



.content {

  position: relative;

  margin-top: -140px;

  padding: 10px 15px;

  text-align: center;

  color: #111;

  visibility: hidden;

  opacity: 0;

  transition: .3s ease-in-out;

}



.content h2{

  font-family: "Belanosima", sans-serif;

  color: white;

  margin-top: 100px;

}



.content p{

  font-family: "Belanosima", sans-serif;

  color: white;

  margin-top: 10px;

  margin-left: -15px;

}



.wrapper .card:hover .content {

  visibility: visible;

  opacity: 1;

  margin-top: -40px;

  transition-delay: .3s;

}



.contact img{

   height: 100px;

  margin-top: 100px;

  margin-left: 360px;

}



input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

  color: red;

  font-size: 0.875em;

}



input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {

  color: red;

}



input::-moz-placeholder, textarea::-moz-placeholder {

  color: red;

  font-size: 0.875em;

}



input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {

  color: red;

}



input::placeholder, textarea::placeholder {

  color: red;

  font-size: 0.875em;

}



input:focus::placeholder, textarea::focus:placeholder {

  color: red;

}



input::-ms-placeholder, textarea::-ms-placeholder {

  color:red;

  font-size: 0.875em;

}



input:focus::-ms-placeholder, textarea:focus::-ms-placeholder {

  color: red;

}



/* on hover placeholder */



input:hover::-webkit-input-placeholder, textarea:hover::-webkit-input-placeholder {

  color: red;

  font-size: 0.875em;

}



input:hover:focus::-webkit-input-placeholder, textarea:hover:focus::-webkit-input-placeholder {

  color: red;

}



input:hover::-moz-placeholder, textarea:hover::-moz-placeholder {

  color: red;

  font-size: 0.875em;

}



input:hover:focus::-moz-placeholder, textarea:hover:focus::-moz-placeholder {

  color: red;

}



input:hover::placeholder, textarea:hover::placeholder {

  color: red;

  font-size: 0.875em;

}



input:hover:focus::placeholder, textarea:hover:focus::placeholder {

  color: red;

}



input:hover::placeholder, textarea:hover::placeholder {

  color: white;

  font-size: 0.875em;

}



input:hover:focus::-ms-placeholder, textarea:hover::focus:-ms-placeholder {

  color: white;

}



header {

  position: relative;

  margin: 100px 0 25px 0;

  font-size: 2.3em;

  text-align: center;

  letter-spacing: 7px;

}



#form {

  position: relative;

  width: 500px;

  margin: 50px auto 100px auto;

}



input {

   font-family: "Belanosima", sans-serif;

  font-size: 0.875em;

  width: 470px;

  height: 50px;

  padding: 0px 15px 0px 15px;

  

  background: transparent;

  outline: none;

  color: red;

  

  border: solid 1px red;

  border-bottom: none;

  

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}



input:hover {

  background: red;

  color: white;

}



textarea {

  width: 470px;

  max-width: 470px;

  height: 110px;

  max-height: 110px;

  padding: 15px;

  

  background: transparent;

  outline: none;

  

  color: white;

   font-family: "Belanosima", sans-serif;

  font-size: 0.875em;

  

  border: solid 1px red;

  

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}



textarea:hover {

  background: red;

  color: white;

}



#submit {

  width: 500px;

  

  padding: 0;

  margin: -5px 0px 0px 0px;

  

   font-family: "Belanosima", sans-serif;

  font-size: 0.875em;

  color: red;

  

  outline:none;

  cursor: pointer;

  

  border: solid 1px red;

  border-top: none;

}



#submit:hover {

  color: white;

}



.box {

  margin-left: 100px;

  margin-top: 20px;

}



.box2{

  margin-top: 1000px;

  margin-left: 100px;

  font-family: "Belanosima", sans-serif;

  color: red;

}



.box3{

  margin-left: -200px;

  font-family: "Belanosima", sans-serif;

  color: red;

}



.box4{

  margin-left: -1050px;

  margin-top: 200px;

font-family: "Belanosima", sans-serif;

  color: red;

}



.apa{

  margin-left: -600px;

  font-family: "Belanosima", sans-serif;

  color: red;

  z-index: 10px;

  position: relative;

  margin-top: 20px;

}



.box5{

  margin-right: -700px;

  margin-top: 20px;

}



.content p{

  font-size: 12pt;

}