body {
    height: 100vh;
}
img {
    max-width: 100%;
}
body {
    background-image: url('../images/background/background2.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
body.home {
    background-image: url('../images/background/bg-main.webp');
}

h1,h2,h3 {
    font-family: 'gotham_blackregular';
}
#page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-wrapper {
    max-width: 768px;
    margin: 0 auto;
}
.text-upper {
    text-transform: uppercase;
}
#codeInput {
    font-size: 1.5rem;
    height: 3rem;
    max-width: 340px;
    margin: auto;
}
.codeinput_button {
    cursor: pointer;
}
.top-menu {
    position: fixed;
    top: 10px;
    width: 100%;
}
.site-info {
    position: absolute;
    left: 10px;
    cursor: pointer;
}
.logout {
    position: absolute;
    right: 10px;
    cursor: pointer;
}
.lomba-item {
    position: relative;
    cursor: pointer;
}
.lomba-title {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 75%, rgba(237,50,55,1) 97%);
    border-radius: 0 0 15px 15px;
}
.lomba-title h4 {
    font-size: .65rem;
    color: #fff;
    font-weight: 700;
    margin-top: auto;
    margin-bottom: .25rem;
}
.prize-item {
    position: relative;
}
.prize-item .prize-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(237,50,55,1) 24%, rgba(237,50,55,1) 68%, rgba(237,50,55,1) 87%);
    border-radius: 15px;
    color: #fff;
}
.prize-item.active {
    cursor: pointer;
}
.prize-item.active .prize-text {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,187,0,1) 24%, rgba(255,187,0,1) 68%, rgba(255,187,0,1) 87%);
}
.prize-item .prizeTitle {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    font-family: 'gotham_blackregular';
    line-height: 1.2;
    margin-top: 1rem;
}
.prize-item .lombaTitle {
    font-size: .5rem;
    font-weight: 600;
    margin-bottom: .25rem;
}
#congratz-banner {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,.65);
    /*
    background-image: url('../images/icegif-210.gif');
    */
}
.congratz-banner_content {
    max-width: 600px;
}
.congratz-banner_image {
    position: relative;
    width: 100%;
    text-align: center;
    background: url('../images/cahaya-box-selamat.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.congratz-banner_image_cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -10px;
    left: 0;
    /*
    background-image: url('../images/cahaya-box-selamat.webp');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center; */
}
.congratz-banner_prize {
    color: #ED3237;
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 2.25rem;
    font-family: 'gotham_blackregular';
    text-transform: uppercase;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    /*
    text-shadow: 1px 1px rgba(255,255,255,.7); */
    line-height: 1;
    margin: 0 auto;
    top: 153px;
}
.congratz-banner_prize span {
    display: inline-block;
    width: 200px;
/*    background-image: url('../images/cahaya.webp');
    background-size: cover;
    background-position: center; */
}
.congratz-banner_ribbon {
    position: relative;
}
.congratz-banner_lomba {
    background: url('../images/pita.webp');
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    width: 100%;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 90px;
    padding: 10px;
}
.congratz-banner_button, .special-prize_button {
    cursor: pointer
}

#special-prize {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#special-prize h3 {
    font-size: 2rem;
    color: #FFBB00;
}
.sprize-list {
    max-width: 600px;
    color: #fff;
}
.sprize-list ol {
    text-align: left;
    font-size: 1.2rem;
    font-weight: 600;
  }
.claimBtn {
    cursor: pointer;
}
.inputcodeTitle {
    color: #fff;
}
.codeinput {
    width: 100%;
    max-width: 300px;
    height: 60px;
    transform: skew(20deg);
    background: yellow;
    border: 2px solid #000;
    -webkit-box-shadow: 7px 7px 0px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 7px 7px 0px 0px rgba(0,0,0,0.75);
    box-shadow: 7px 7px 0px 0px rgba(0,0,0,0.75);
    margin: 0 auto;
    padding: .35em 2rem;
}
.codeinput input {
    background: transparent;
    border: none;
    transform: skew(-20deg);
}
.codeinput input:hover, .codeinput input:focus {
    background: transparent;
}
.codeinput input::placeholder {
    font-size: 1rem;
    font-weight: 600;
    color: #000;
}
.codeinput input:hover::placeholder, .codeinput input:focus::placeholder {
    font-size: 0;
}
#parallelogram {
    width: 150px;
    height: 100px;
    transform: skew(20deg);
    background: red;
  }

@media(min-width: 678px) {
    body {
        height: auto;
    }
}