@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arimo', sans-serif;
    

}
body {
    background-color: linear-gradient( #EE7752, #E73C7E, #23A6D5,#23D5AB);
}



html {
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

section {
    width: 100%;
    height: 100vh;
    color: #fff;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5,#23D5AB);
    background-size: 400% 400%;
    position: relative;
    animation: change 10s ease-in-out infinite;

}

.textme {
    border: 2px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5rem 10rem;
    cursor: pointer;
    border-radius: 20px;
}

h1 {
    font-family: 'Arimo', sans-serif;
    font-size: 4rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}
h1:hover {
    color: dodgerblue;
}

.textme p {
    font-size: 16px;
    text-align: center;
    font-family: 'Arimo', sans-serif;
    


}

/* Display picture */
.main-img {
	display: block;
    margin: 0 auto;
	max-width: 40%;
    border: 4px solid #efefef;
    border-radius: 50%;
    -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
       

/*pembungkus dalam jancok */

.jancok {
    display: center;
    letter-spacing: 5px;
	
}
/*modal*/

  .wrap {
    padding: 40px;
    text-align: center;
  }
  .btn {
    background: #428bca;
    border: #357ebd solid 1px;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    min-width: 60px;
    position: relative;
    transition: color 0.1s ease;
    /* top: 40em;*/
  }
  .btn:hover {
    background: #357ebd;
  }
  .btn.btn-big {
    font-size: 18px;
    padding: 15px 20px;
    min-width: 100px;
    border-radius: 20px;

  }
  .btn-close {
    color: #aaa;
    font-size: 30px;
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 0;
  }
  .btn-close:hover {
    color: #919191;
  }
  .modal:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  .modal:target:before {
    display: block;
  }
  .modal:target .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    top: -1%;
    left: 200px;
    width: 100%;
  }
  .modal-dialog {
    background: #fefefe;
    color:#23A6D5;
    border: #333 solid 1px;
    border-radius: 5px;
    margin-left: -200px;
    position: fixed;
    left: 50%;
    top: -100%;
    z-index: 11;
    width: 360px;
    -webkit-transform: translate(0, -500%);
    -ms-transform: translate(0, -500%);
    transform: translate(0, -500%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
  }
  .modal-body {
    padding: 20px;
  }
  .modal-header,
  .modal-footer {
    padding: 10px 20px;
  }
  .modal-header {
    border-bottom: #eee solid 1px;
  }
  .modal-header h2 {
    font-size: 20px;
  }
  .modal-footer {
    border-top: #eee solid 1px;
    text-align: right;
  }
  /*ADDED TO STOP SCROLLING TO TOP*/
  #close {
    display: none;
  }
  
/*MODAL KEDUA FUNGSI NYA SAMA KEK MODAL SATU*/


.wrap2 {
    padding: 40px;
    text-align: center;
  }
  .btn2 {
    background: #428bca;
    border: #357ebd solid 1px;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    min-width: 60px;
    position: relative;
    transition: color 0.1s ease;
    /* top: 40em;*/
  }
  .btn2:hover {
    background: #357ebd;
  }
  .btn.btn-big2 {
    font-size: 18px;
    padding: 15px 20px;
    min-width: 100px;
    border-radius: 20px;
  }
  .btn-close2 {
    color: #aaa;
    font-size: 30px;
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 0;
  }
  .btn-close2:hover {
    color: #919191;
  }
  .modal2:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  .modal2:target:before {
    display: block;
  }
  .modal2:target .modal-dialog2 {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    top: -1%;
    left: 200px;
    width: 100%;
  }
  .modal-dialog2{
    background: #fefefe;
    color:#23A6D5;
    border: #333 solid 1px;
    border-radius: 5px;
    margin-left: -200px;
    position: fixed;
    left: 50%;
    top: -100%;
    z-index: 11;
    width: 360px;
    -webkit-transform: translate(0, -500%);
    -ms-transform: translate(0, -500%);
    transform: translate(0, -500%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
  }
  .modal-body2 {
    padding: 20px;
  }
  .modal-header2,
  .modal-footer2 {
    padding: 10px 20px;
  }
  .modal-header2 {
    border-bottom: #eee solid 1px;
  }
  .modal-header2 h2 {
    font-size: 20px;
  }
  .modal-footer2 {
    border-top: #eee solid 1px;
    text-align: right;
  }
  /*ADDED TO STOP SCROLLING TO TOP*/
  #close2 {
    display: none;
  }

@keyframes change {
    
0% {
    background-position: 0 50%;
}
 50%{
     background-position: 100% 50%;
 }
 100% {
     background-position: 0 50%;
 }
} 

/*mediaquery jancok */

 @media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
  .textme {
      width:95%;
  }
  .btn.btn-big, .btn.btn-big2  {
      margin-left: -60px;
  } 
   .jancuk {
     width:100%;
     
   }
  
}