@font-face {
    font-family: Montserrat;
    src: url('../font/Montserrat/static/Montserrat-Regular.ttf');
}
@font-face {
    font-family: Montserrat-bold;
    src: url('../font/Montserrat/static/Montserrat-Bold.ttf');
}
@font-face {
    font-family: Piximisa;
    src: url('../font/piximisa/Piximisa\ \(1\).ttf');
}
 body {
    font-family: Montserrat, 'Courier New', Courier, monospace;
    background-color: #EDEDED;
}


  /* SCROLL CUSTOM */
body::-webkit-scrollbar {
    width: 0.5em;
}

 body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

 body::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);
    outline: 1px solid slategrey;
}
  /* END SCROLL CUSTOM */

#myBtn {
    display: none;
    position: fixed;
    bottom: 45px;
    right: 80px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #2C3238;
    color: white;
    cursor: pointer;
    padding: 10px 15px 10px 15px;
    border-radius: 50px;
    font-size: 18px;
}



 /* NavBar Ketika di sorot */
.active {
    border-bottom: 2px solid #00FFCE;
}
header .webinar:hover,
header .home:hover,
header .compe:hover,
header .about:hover {
    border-bottom: 2px solid #00FFCE;
    transition: 0.1s;
}
 /* End NavBar Ketika di sorot */

/* NOTE */
/* .first-content-index => content pertama yg di halaman index */
/* .second-content-index => content kedua yg di halaman index */
/* .third-content-index => content ketiga yg di halaman index */
/* .fourth-content-index => content keempat yg di halaman index */
/* .footer-content-index => content footer yg di halaman index */

/* .first-content-webinar => content pertama yg di halaman webinar */
/* dst */

/* .first-content-about => content pertama yg di halaman about */
/* dst */


.second-content-index .about-find-it {
    border-radius: 10px;
    padding: 80px 60px 80px 60px;
    background-image: url(../img/kotak2.png);
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.second-content-index .about-find-it H1, 
.first-content-about .find-it-in-about H1{
    font-weight: 2000;
    font-family: Piximisa, Courier, monospace;
    color: #FFFFFF;
    text-shadow: 0 0 10px #FFFFFF, 2px 19px 2px rgba(0, 255, 206, 0);
}

.second-content-index .about-find-it, 
.first-content-about .find-it-in-about, 
.first-content-about .evo-verse p{
    font-size: 0.8em;
    color: #E8E9E9;
}

.second-content-index .btn-see-more-about-find-it {
    box-shadow: 0 0 10px #00FFCE, 2px 19px 20px rgba(0, 255, 206, 0);
}

.third-content-index .competition {
    letter-spacing: 3px;
    font-family: Piximisa;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 3em;
    text-align: center;
    color: #00FFCE;
    margin-bottom: -10px;
    text-shadow: 0 0 10px #00FFCE, 2px 2px 2px rgba(206, 89, 55, 0);
}

.third-content-index .head-comp label{
    font-family: montserrat-bold;
    margin-bottom: 40px;
    border-left: 70px solid #00FFCE;
    background-color: white;
    font-weight: bold;
    text-align: left;
    font-size: 0.6em;
}

.third-content-index .more-in-comp {
    text-transform: uppercase;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 0.9em;
}


.third-content-index .more-in-comp .prize label {
     padding-left: 5px;
     border-left: 5px solid #00FFCE;
     background: rgb(0,255,206);
     background: linear-gradient(90deg, rgba(0,255,206,0.8267682072829132) 37%, rgba(233,68,202,0) 73%);
 }
.third-content-index .more-in-comp .exce label {
     padding-left: 5px;
     border-left: 5px solid #AC0088;
     background: rgb(0,255,206);
     background: linear-gradient(280deg, rgba(0,255,206,0) 37%, rgba(233,68,202,0.8463760504201681) 73%);
 }
.third-content-index .more-in-comp .chall label {
     padding-left: 5px;
     border-left: 5px solid #FFCE00;
     background: rgb(255,206,0);
     background: linear-gradient(90deg, rgba(255,206,0,0.8267682072829132) 37%, rgba(233,68,202,0) 73%);
 }

.third-content-index .slider{
    overflow: hidden;
    width: 70%;
    height: 370px;
    margin: auto;
    margin-bottom: 50px;
}

.third-content-index .slides{
    display: flex;
    height: 100%;
}

.third-content-index .slide{
    background-image: url(../img/kotak3.png);
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 100px;
    height: 100%;
    width: 100%;
}

.third-content-index .slide h1{
    font-family: montserrat-bold;
}

.third-content-index .slide img{
    margin-right: 60px;
}


.third-content-index #radio1:checked ~ .first{
    margin-left: 0;
}
.third-content-index #radio2:checked ~ .first{
    margin-left: -100%;
}
.third-content-index #radio3:checked ~ .first{
    margin-left: -200%;
}
.third-content-index #radio4:checked ~ .first{
    margin-left: -300%;
}
.third-content-index #radio5:checked ~ .first{
    margin-left: -400%;
}

.third-content-index .slide h1{
    margin-top: 25px;
    font-size: 2em;
    font-weight: bold;
    color: #00FFCE;
}

.third-content-index .slide p {
    font-size: 0.8em;
    color: #E8E9E9;
}

.third-content-index .slide button {
    width: 150px;
    border-radius: 10px;
    box-shadow: 0 0 10px #00FFCE, 2px 2px 2px rgba(206, 89, 55, 0);
    color: #FFFFFF;
}

.third-content-index .galeri-comp .col-md-2{
     width: 120px; 
    height: 120px; 
}

.third-content-index .galeri-comp label{
    border-radius: 10px;
    font-size: 0.8em;
    text-align: center;
    color: #EDEDED;
    cursor: pointer;
    width: 120px; 
    margin: 2px;
    height: 120px; 
    background-color: #20252B;
}

.third-content-index .galeri-comp .active-galeri {
    border-radius: 10px;
    background-color: #00FFCE;
    color: black;
}

.third-content-index .webinar-sec h1{
    font-family: Piximisa, Courier, monospace;
    font-size: 48px;
    text-shadow: 0 0 10px #FFCE00, 2px 2px 2px rgba(206, 89, 55, 0);
    color: #FFCE00;
}

.third-content-index .webinar-sec label{
    font-family: montserrat-bold;
    width: 180px;
    margin-bottom: 40px;
    border-left: 70px solid #FFCE00;
    background-color: white;
    font-weight: bold;
    text-align: left;
    font-size: 0.4em;
}

.third-content-index .webinar-sec p{
    font-size: 0.8em;
    color: #E8E9E9;
}

.third-content-index .webinar-sec button{
    width: 200px; 
    height: 50px;
    box-shadow: 0 0 10px #FFCE00, 2px 2px 2px rgba(206, 89, 55, 0);
    background-color: #FFCE00;
}

.fourth-content-index .media-part h1{
    font-family: Piximisa, Courier, monospace;
    font-size: 40px;
}

.text-stroke {
    font-size: 80px;
    background: -webkit-linear-gradient(180deg, rgba(255,206,0,0.9164040616246498) 0%, rgba(255,206,0,0.28895308123249297) 85%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px transparent;
    -webkit-text-fill-color: #EDEDED;
    font-family: Piximisa, Courier, monospace;
}

.second-content-competition .col-md-4, 
.second-content-competition .col-md-12{
    border-radius: 10px;
    border: 2px solid #10927C;
    background-color: #20252B;
    color: #FFFFFF;
    font-size: 14px;
}

.second-content-competition .ctf-competition .tingkat{
    color: #E643C7;
    background: rgb(53,40,60);
    padding: 8px 25px;
    border-radius: 5px;
    font-family: montserrat-bold;
    font-size:10px
}
.second-content-competition .ctf-competition .harga{
    color: #00FFCE;
    background: rgb(29,47,50);
    padding: 8px 25px;
    border-radius: 5px;
    font-family: montserrat-bold;
    margin: 10px;
    font-size:10px
}
.second-content-competition .ctf-competition .button-daftar button{
    font-family: Montserrat-bold;
    padding: 5px;
    border-radius: 13px;
    width: 50%;
    background: rgb(27,234,206);
    background: linear-gradient(196deg, rgba(27,234,206,1) 11%, rgba(221,78,203,1) 72%);
}
.second-content-competition .ctf-competition .button-guidebook button{
    width: 35%;
    padding: 2px;
    border: 2px solid #FFCE00;
    color: #FFCE00;
}

.second-content-competition h1{
    font-family: Montserrat-bold;
    font-size: 25px;
    text-shadow: 0 0 30px #943ac5, 2px 2px 2px rgb(53,40,60);
}
.second-content-competition .ctf-competition h1{
    font-family: Montserrat-bold;
    font-size: 25px;
    text-shadow: 0 0 20px #FFCE00, 1px 1px 1px rgb(53,40,60);
}

.second-content-competition .overview h1
.second-content-competition .overview h1
.second-content-competition .overview h1
.second-content-competition .overview h1{
    font-family: Montserrat-bold;
    font-size: 25px;
}



.second-content-competition .timeline .col-kiri{
   border-right: 2px solid #2C3238;
   height: 350px;
   position: relative;
}

.second-content-competition .timeline .col-kanan label,
.second-content-competition .timeline .col-kiri label{
   margin-bottom: 50px;
}


.second-content-competition .timeline .col label div
{
     font-family: montserrat-bold;
}

.second-content-competition .contack h2{
     font-family: montserrat-bold;
     font-size: 32px;
}


.first-content-about .evo-box {
    padding: 20px;
    background-image: linear-gradient(180deg, #11161C, #1D2228);
    border-width: 4px;
    border-style: solid;
    border-image: linear-gradient(27deg, rgba(17, 145, 250, 1) 22%, rgba(176, 45, 167, 1) 75%);
    border-image-slice: 1;
}


.evo-box h1 {
    font-family: Piximisa, Courier, monospace;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0 0 10px #32301B, 2px 2px 2px rgba(206, 89, 55, 0);
}

.first-content-about .evo-box label {
    font-size: 1.4rem;
    font-weight: 700;
    background: #C0597B;
    background: -webkit-linear-gradient(to top, #C0597B 0%, #C68637 67%);
    background: -moz-linear-gradient(to top, #C0597B 0%, #C68637 67%);
    background: linear-gradient(to top, #C0597B 0%, #C68637 67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.first-content-about .image-galeri {
    margin-bottom: 300px;
    padding: 30px 20px 30px 20px;
    background-color: #20252B;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(180deg, rgba(0, 255, 206, 1) 0%, rgba(35, 227, 205, 1) 39%, rgba(233, 68, 202, 1) 73%);
    border-image-slice: 1;
}
.first-content-about .image-galeri h2 {
    background: #A4DF49;
    background: -webkit-linear-gradient(to top, #A4DF49 35%, #4DF090 56%);
    background: -moz-linear-gradient(to top, #A4DF49 35%, #4DF090 56%);
    background: linear-gradient(to top, #A4DF49 35%, #4DF090 56%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.footer-content-all .footer-about h4{
    font-family: Piximisa, Courier, monospace;
    font-size: 24px;
}


.footer-content-all .footer-about .col-md-3 div{
    font-size: 12px;
}
.footer-content-all .footer-about .col-md-3 a{
    color: #EDEDED;
    text-decoration: none;
}


footer{
    font-size: 0.6em;
    color: #EDEDED;
    font-weight: bold;
    height: 100%; 
    background: rgb(115,66,123);
    background: linear-gradient(288deg, rgba(115,66,123,1) 21%, rgba(76,99,124,1) 57%, rgba(30,135,125,1) 100%);
}