*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Tahoma,sans-serif;
}

:root{

    --child-size:80px;
    --child-height:150px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Gandom,Tahoma,sans-serif;
}

body{

    background:#eef3f8;

    padding:14px;

}

.container{

    width:min(1400px,100%);

    margin:auto;

}

h1{

    text-align:center;

    margin-bottom:16px;

    font-size:30px;

    color:#263238;

}

.toolbar{

    display:flex;

    align-items:flex-end;

    flex-wrap:wrap;

    gap:8px;

}

.toolbar-spacer{

    flex:1;

}

.field{

    display:flex;

    flex-direction:column;

    gap:3px;

}

label{

    font-size:13px;

    text-align:center;

}

input,
select{

    width:64px;

    height:28px;

    border-radius:6px;

    border:1px solid #cfd8dc;

    outline:none;

    text-align:center;

    font-size:16px;

}

button{

    height:28px;

    padding:2px 10px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    color:white;

    font-size:14px;

}

#generate{

    background:#3498db;

}

#prev{

        margin-right:20px;


    background:#8e44ad;

}

#next{

    background:#27ae60;

}

.info{

    width:max-content;

    margin:14px auto;

    background:white;

    border-radius:10px;

    padding:8px 18px;

    font-size:22px;

}

#ground{

    margin-top:16px;

    min-height:300px;

    background:white;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    flex-wrap:nowrap;

    overflow:hidden;

    padding:8px;

}

.child{

    width:var(--child-size);

    height:var(--child-height);

    flex:0 0 auto;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    perspective:900px;

}

.child img{

    width:95%;

    height:auto;

    display:block;

    user-select:none;

    pointer-events:none;

    backface-visibility:hidden;

}

.turn{

    animation:turning .9s ease-in-out;

}

@keyframes turning{

0%{

transform:rotateY(0deg);

}

45%{

transform:rotateY(90deg);

}

55%{

transform:rotateY(90deg);

}

100%{

transform:rotateY(180deg);

}

}

.finished{

background:#eaf8ea!important;

}

img{

display:block;

}

.ground-very-small{

justify-content:space-evenly;

}

.ground-small{

justify-content:space-around;

}

.ground-medium{

justify-content:space-between;

}

.ground-large{

justify-content:center;

}
/* ===========================
   Mobile
=========================== */

@media (max-width:700px){

body{

    padding:8px;

}

.container{

    width:100%;

}

h1{

    font-size:22px;

}

.toolbar{

    gap:5px;

    padding:6px;

}

label{

    font-size:12px;

}

input,
select{

    width:52px;

    height:26px;

    font-size:14px;

}

button{

    height:20px;

    padding:2px 8px;

    font-size:12px;

}

.info{

    font-size:14px;

    padding:6px 6px;

}

#ground{

    min-height:150px;

    padding:4px;

}

.child{

    width:var(--child-size);

    height:var(--child-height);

}

.child img{

    width:96%;

}

}


/* ===========================
   Large Screens
=========================== */

@media (min-width:1500px){

.container{

    max-width:1500px;

}

}


/* ===========================
   Smooth Image Rotation
=========================== */

.child.turn img{

    animation:flipImage .9s ease-in-out;

    transform-origin:center center;

}

@keyframes flipImage{

0%{

transform:rotateY(0deg);

}

45%{

transform:rotateY(90deg);

}

55%{

transform:rotateY(90deg);

}

100%{

transform:rotateY(180deg);

}

}


/* حذف کامل هر نوع لرزش */

.child,
.child img{

    animation-fill-mode:forwards;

}


/* انیمیشن نرم تغییر جهت */

.child img{

    transition:
        opacity .15s linear;

}


/* دکمه‌ها */

button:hover{

    opacity:.9;

}

button:active{

    transform:scale(.97);

}


/* جلوگیری از انتخاب تصویر */

.child img{

    -webkit-user-drag:none;

    -webkit-user-select:none;

    user-select:none;

}


/* ظاهر ورودی‌ها */

input:focus,
select:focus{

    border-color:#4aa3ff;

}

@media (max-width:700px){

.toolbar{

    justify-content:center;

}

.toolbar-spacer{

    flex-basis:100%;

    height:0;

}

}
/* پایان فایل */