html,
body {
    width: 100%;
    height: 100%;
    user-select: none;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #032f3c;
    overflow: hidden;
    font-family: 'Coda', cursive;
    background: url(../../assets/img/bg-banner.jpg) center no-repeat;
    background-size: cover;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 32px rgb(156 156 156/ 15%) inset;
    -webkit-background-clip: text;
     -webkit-text-fill-color: white;
}

input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 32px transparent inset;
    -webkit-background-clip: text;
     -webkit-text-fill-color: white;
}

#logo {
    text-align: center;
    width:100%
}
#logo img{
    width:125px
}
#game{
    display:none
}
.deck {
    width: 870px;
    /* height:83%;*/
    margin: 0 auto;
    text-align: center;
    background: #8f6a38;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 14px 14px 0 0 #000;
    box-sizing: content-box;
}

.deck .cards {
    /*height: 500px;*/
    width: 130px;
    background: #ffcf7f;
    display: inline-flex;
    margin: 0 15px 15px 0;
    line-height: 140px;
    font-size: 0;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    vertical-align: top;
    cursor: pointer;
    transform: rotateY(180deg);
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
    font-family: FontAwesome;
    line-height: 75px;
    align-items: center;
    justify-content: center;
    -webkit-user-drag: none;
}
.deck .cards:active{
    cursor: grabbing
}

.deck .cards img {
    width: 100%;
    opacity: 0;
    -webkit-user-drag: none;
    transition: ease .3s;
}
.deck .cards img.logo{
        width: 70px;
        opacity:1 !important;
        position:absolute;
        transform: rotateY(180deg);
}
.deck .cards.match img.logo{
        transform: rotateY(0deg);
}
.deck .cards.hideLogo img.logo{
    opacity:0 !important
}

.deck .cards:nth-child(6n) {
    margin: 0 0 15px 0;
}

.deck .cards:nth-child(n+13) {
    margin: 0 15px 0 0;
}

.deck .cards:nth-child(n+13):nth-child(6n) {
    margin: 0;
}

.deck .cards.open {
    transform: rotateY(0);
    /*background: #89c4ff;*/
    cursor: default;
}

.deck .cards.open img,
.deck .cards.show img {
    opacity: 1
}

.deck .cards.match img {
    opacity: 0.3
}

.deck .cards.show {
    font-size: 33px;
}

.deck .cards.match {
    transform: rotateY(0);
    cursor: default;
    background: #61c10a;
    font-size: 33px;
}

.deck .cards.notmatch {
    background: #f43535;
}

#score-panel {
    width: 870px;
    color: #fff;
    margin: auto auto 10px;
}

#score-panel .stars {
    margin: 0;
    padding: 0;
    display: inline-block;
    margin: 0 5px 0 0;
}

#score-panel .stars li {
    list-style: none;
    display: inline-block;
}

#score-panel .restart {
   text-align:center;
   font-size:3rem
}

*::selection {
    background: transparent;
}

.swal2-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}

.theme-font{
    font-family: "Pinyon Script" !important;
  }
.e_phone, .e_email-1,.e_kvkk,.e_fullname { display:none;}
#contactForm{
    /*display: block;
    width:300px;
    margin:auto;
    position: relative;
    z-index: 2;
    left: 18%;
    top: 20%;*/
}
#contactForm #kvkk+label{
    color: #e1e1e1;
    font-size: 14px;
}
#contactForm .logo img{
    width: 150px
}

.form-control {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background: transparent;
    border: none;
    height: 50px;
    color: white !important;
    border: 1px solid rgbA(255,255,255,0.3);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    }
    @media (prefers-reduced-motion: reduce) {
      .form-control {
        -webkit-transition: none;
        -o-transition: none;
        transition: none; } }
    .form-control::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: rgba(255, 255, 255, 0.8) !important; }
    .form-control::-moz-placeholder {
      /* Firefox 19+ */
      color: rgba(255, 255, 255, 0.8) !important; }
    .form-control:-ms-input-placeholder {
      /* IE 10+ */
      color: rgba(255, 255, 255, 0.8) !important; }
    .form-control:-moz-placeholder {
      /* Firefox 18- */
      color: rgba(255, 255, 255, 0.8) !important; }
    .form-control:hover, .form-control:focus {
      background: transparent;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      border-color: rgba(255, 255, 255, 0.4); }
    .form-control:focus {
      border-color: rgba(255, 255, 255, 0.4); }

      .btn {
        cursor: pointer;
        border-radius: 40px;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        font-size: 15px;
        text-transform: uppercase; }
        .btn:hover, .btn:active, .btn:focus {
          outline: none; }
        .btn.btn-primary {
         background: #c59d5f;
         border: 1px solid #c59d5f;
         color:#fff; }
          .btn.btn-primary:hover {
            border: 1px solid #fbceb5;
            background: #bf8f42;
            color: #fff; }
          .btn.btn-primary.btn-outline-primary {
            border: 1px solid #fbceb5;
            background: transparent;
            color: #fbceb5; }
            .btn.btn-primary.btn-outline-primary:hover {
              border: 1px solid transparent;
              background: #fbceb5;
              color: #fff; }
              .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
              .show > .btn-primary.dropdown-toggle {
                color: #fff;
                background-color:rgb(196 156 94 / 54%);
                border-color: #c59d5f; }

                #info {
                    color: #fff
                    }

#main{
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(360deg, rgb(47 41 33 / 80%) 20%, rgb(92 76 50 / 60%) 75%, rgb(163 128 73 / 40%) 100%);
}
#register{
    height:100vh
}
#register-video{
    width:400px
}
.cerceve{
    background-color:#8f6a38;
    padding:5px 10px 0 7px;
    width:max-content;
    border-radius:15px;
}
#area-form{
    display:none
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.swal2-modal h2{
    text-transform: capitalize;
}

@media(max-width:480px){
    #logo img{
        width:100px
    }
    #score-panel{
        width: 100%;
    }
    #score-panel .restart{
        font-size: 2rem;
    }
    #timer{
        width:110px !important
    }
    .deck{
        width:96%;
        padding: 6px;
        box-shadow: 5px 5px 0 0 #000;
    }
    .deck .cards{
        width: 64px;
        margin: 0 5px 5px 0 !important;
    }
    .deck .cards img.logo{
        width: 100%;
    }
    .cerceve, #register-video{
        width: 100%;
    }
    #contactForm #kvkk+label{
        font-size: 10px;
    }
    .form-control{
        height: 40px;
        font-size: .8rem;
    }
    button.swal2-cancel {
        margin-top: 10px !important;
    }
    .swal2-modal h2{
        line-height: 40px !important;
    }
}