/* ***** Common Css **** */
:root {
    scroll-behavior: initial;
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
}

ol,
ul {
    margin: 0;
    padding: 0;
}

img {
    display: block;
}

button,
a {
    transition: 0.4s linear;
    -webkit-transition: 0.4s linear;
    text-decoration: none;
}

body,
html {
    height: 100%;
    width: 100%;
}

body {
    font-family: "Krona One", sans-serif;
    font-family: "Kanit", sans-serif;
    font-size: 14px;
    background: #303030;
    font-weight: 400;
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-wrpper {
    width: 100%;
    height: 100vh;
    background: #f8faf1;
    position: relative;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.main-wrpper.change-bg {
    background: #e7ebd4;
}
.container{
    max-width: 960px;
    margin: 0 auto;
}
/* ***** End Common Css **** */

.btn-secondary {
    color: #39393b;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.4px;
    border-radius: 8px;
    border: 1px solid #39393b;
    background: rgba(48, 59, 105, 0);
    box-shadow: 0px 1px 1px 0px rgba(18, 23, 46, 0.25);
    padding: 19px;
    display: block;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.btn-primary span,
.btn-secondary span {
    position: relative;
    z-index: 9;
}
.btn-primary {
    color: #e7ebd4;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.4px;
    padding: 20px;
    border-radius: 8px;
    background: linear-gradient(90deg, #303b69 0%, #b0171c 100%);
    box-shadow: 0px 1px 1px 0px rgba(18, 23, 46, 0.25);
    display: block;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.btn-primary:before,
.btn-secondary:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #b0171c 0%, #303b69 100%);
    top: 0;
    left: 50%;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.btn-primary:hover:before,
.btn-secondary:hover:before {
    width: 100%;
    left: 0;
    right: 0;
}
.btn-primary:hover,
.btn-secondary:hover {
    color: #fff;
    border-color: #1f2541;
}

/* **** start-screen **** */
.start-screen {
    border-radius: 16px;
    background: #f6f6f6;
    box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 16px;
    width: 100%;
}
.start-screen .logo-img {
    max-width: 100%;
    margin: 0 auto 24px;
}
.start-screen .detail h3 {
    margin: 0 0 24px;
    color: #39393b;
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.48px;
}
.start-screen .detail p {
    color: #39393b;
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    letter-spacing: -0.32px;
    margin: 0 0 24px;
}
.start-screen .detail ul {
    display: flex;
    align-items: center;
    margin: 0 -8px;
}
.start-screen .detail ul li {
    width: 50%;
    padding: 0 8px;
}
/* **** End start-screen **** */

/* **** logo-screen **** */
.logo-screen {
    display: none;
}
.logo-screen .logo-img {
    max-width: 100%;
    margin: 0 auto;
}
/* **** End logo-screen **** */

/* **** biden-screen **** */
.biden-screen {
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100vh;
    background-image: url("../images/biden-bg.svg");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
    cursor: pointer;
}
.biden-screen.show {left: -50%;animation: shake2 2s ease forwards;}
.biden-screen.show.show-full {left: 0;}
.biden-screen.show.hide-full {left: -100%;}
.biden-screen.show.clean-screen {left: 100%;}
.biden-screen .biden-img {position: absolute;max-width: 100%;left: -200px;bottom: 0;-webkit-transition: all 0.3s linear;transition: all 0.3s linear;}
.biden-screen.show-img .biden-img {left: 84%;animation: moveLeft 1.2s forwards}
.biden-screen.show-img{animation: unset;}
/* **** End biden-screen **** */

/* **** trump-screen **** */
.trump-screen {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    right: -100%;
    background-image: url("../images/trump-bg.svg");
    background-size: cover;
    background-position: left;
    background-repeat: repeat;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
    cursor: pointer;
}
.trump-screen.show {right: -50%;animation: shake 2s ease forwards;}
.trump-screen.show.show-full {right: 0;}
.trump-screen.show.hide-full {right: -100%;}
.trump-screen.show.clean-screen {right: 100%;}
.trump-screen .trump-img {position: absolute;max-width: 100%;right: -200px;bottom: 0;-webkit-transition: all 0.3s linear;transition: all 0.3s linear;}
.trump-screen.show-img .trump-img {right: 82%; animation: moveRight 1.2s forwards}
.trump-screen.show-img{animation: unset;}

/* **** End trump-screen **** */

@keyframes moveRight {
    0% {
        transform: translateX(10px);
    }
    25% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes moveLeft {
    0% {
        transform: translateX(-10px);
    }
    25% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
    75% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes Imgshake2 {
    0%, 100% {transform: translateX(0);}
    35%{transform: translateX(-10px);}
    85%{transform: translateX(-10px);}
}

@keyframes shake {
    0%, 100% {right: -50%}
    10%{right: -10%;}
    30%, 50%, 70%{ right: -55%;}
    20%, 40%, 60%{right: -52%;}
}
@keyframes shake2 {
    0%, 100% {left: -50%}
    10%{left: -40%}
    30%, 50%, 70%{left: -55%}
    20%, 40%, 60%{left: -52%}
} 




@keyframes bounceLeft {
  0% {
      opacity: 0;
      transform: translateX(2000px);
   }
   60% {
      opacity: 1;
      transform: translateX(30px);
   }
   80% {
      transform: translateX(10px);
   }
   100% {
      transform: translateX(0);
   }
}

.biden-screen h2,
.trump-screen h2 {
    color: #000;
    text-align: center;
    text-shadow: 0px 2px 4px #f0f3d3;
    -webkit-text-stroke-width: 2;
    -webkit-text-stroke-color: #e7ebd4;
    font-family: "Krona One", sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -1.28px;
    margin: 0;
    position: absolute;
    top: 70px;
    right: 0;
    text-align: right;
    z-index: 121;
}
.trump-screen h2 {
    top: 135px;
    left: 0;
    right: auto;
    text-align: left;
}
.trump-screen.show h2 {
    left: -104px;
}
.biden-screen.show h2 {
    right: -102px;
}
.winner-img.show-winner.clean-screen-right {
    left: 100%;
}
.winner-text.clean-screen-right {
    left: 100%;
    right: auto;
}
.winner-img.show-winner.clean-screen-left {
    right: 100%;
    left: auto;
}
.winner-text.clean-screen-left {
    right: 100%;
    left: auto;
}

.winner-text {
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    text-align: center;
/*     -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear; */
}
.winner-text h2 {
    color: #000;
    text-align: center;
    text-shadow: 0px 2px 4px #f0f3d3;
    -webkit-text-stroke-width: 2;
    -webkit-text-stroke-color: #e7ebd4;
    font-family: "Krona One";
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -1.28px;
    margin: 0;
}
.winner-img {
    position: absolute;
    left: 0;
    right: 0;
    width: 390px;
    margin: 0 auto;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.winner-img.show-winner {
    opacity: 1;
    visibility: visible;
}
.winner-img img {
    max-width: 100%;
}