@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{

    background: url('../img/photo.jpg');
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    width: 100%; 
    background-attachment: fixed; 
}
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.form{
    background: white;
    padding: 18px;
    width: 800px;
}
.main-tittle{
    font-family: 'Shadows Into Light', cursive;
}
.form-tittle{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
}
input[type="text"] , input[type="email"] , input[type="phone"] , input[type="date"] , input[type="select"] , input[type="number"] , input[type="option"]
{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    padding: 0;
}
.form-element{
    overflow: hidden;
}
.svg{
    position: relative;
    z-index: 3;
    background: white;
}
.nextPage{
    z-index: 2;
}
.button{
    outline: none;
    border-color: white;
    border: 3px solid white;
    color: white;
    padding: 6px 16px 6px 16px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    background-color: #E5097F;
}
.button:focus {
    outline:0;
}
.buttons{
    display: flex;
    justify-content: space-between;
}



/* PAGE 1 */
.page.active{
    right: 400px;
    animation: slide 0.75s ease;
    opacity: 0;
}
@keyframes slide {
    from{
        right: 0;
        opacity: 1;
        display: block;
    }
    to{
        right: 400px;
        opacity: 0;
        display: none;
    }
}
/* PAGE 1 */

@media screen and (max-width: 600px) {
    .svg {
      display: none;
    }
    .form{
        width: 400px;
    }
  }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.checkText{
    display: flex;
}
.tcKimlik:focus{
    outline: none;
}

.ok{
    display: flex;
    justify-content: center;
    align-items: center;
}
.success{
    margin-left: 4px;
    font-family: 'Nunito Sans', sans-serif;
}