@import url(./font-s.css);
@import url(./animation.css);
@import url(./max-size.css);

*{
    margin: 0;
    padding: 0;
    font-family:  'Prompt';
   
    
}
body{
    background-color: #ffe4c4;
    transition: all 200ms;
}
:root{
    --color:#ffe4c4;
    --color2:#fbcf9b;
    --color3:#fdcd91;
    --color4:#ffbf70;
}
.c-main{
    background-color: var(--color);
}
.c-main-t{
    color: var(--color);
}
.c-main-2{
    background-color: var(--color2);
}
.c-main-t-2{
    color: var(--color2);
}
.c-main-3{
    background-color: var(--color3);
}
.c-main-t-3{
    color: var(--color3);
}
.c-main-4{
    background-color: var(--color4);
}
.c-main-t-4{
    color: var(--color4);
}
.border-t{
    border: 2px solid var(--color);
}.border-t-1px{
    border: 1px solid var(--color);
}
.border-t-2{
    border: 2px solid var(--color2);
}
.sc{
    width: 100vw;
    height: 100vh;
}
.sc-mw{
    max-width: 500px;
}
.sc-mw-s{
    max-width: 50vw;
}
.s-image-1{
    width: 45px;
    height: 45px;
}
.s-image-2{
    width: 75px;
    height: 75px;
}
.d{
    display: flex;
}
.d-c{
    flex-direction: column;
}
.d-r{
    flex-direction: row;
}
.d-r-res{
    flex-direction: row;
}
.radius{
    border-radius: 25px;
}
.radius-2{
    border-radius: 15px;
}.radius-3{
    border-radius: 10px;
}
.none_input{
    border: none;
    outline: none;
}.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.pointer{
    cursor: pointer;
}
.separator::before,
.separator::after {
  content: "";
  flex: 1;
  background-color: black;
  border-radius: 50px;
  padding: 2px;
  width: 20px;
}
.over-set > * {
    flex: 0 0 auto;
  }
.separator:not(:empty)::before {
  margin-right: 0.25em;
}

.separator:not(:empty)::after {
  margin-left: 0.25em;
}
.box-s{
    box-shadow: rgb(255, 255, 255) 11px 27px 78px -1px;
}
.box-s-t-1{
    box-shadow: var(--color3) 0px 0px 14px;
}
.box-s-t-2{
    box-shadow: var(--color) 0px 0px 14px;
}
.t-y{
    top: 50%;
  transform: translate(-50%, -50%);
}
.t-y-x{
    top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);
}
.nav-t{
    top: 0;
    left: 0;
}
.icon-input{
    left: 5%;
}
.animation{
    transition: all 300ms;
}
.nav-select{
    position: relative;
    
   
}
.nav-choose{
    position: relative;
    
}
.nav-choose::before{
    content: '';
 
    width: 10px;
    border-radius: 20px;
     background-color: var(--color2);
    box-shadow: var(--color2) 3px 0px 14px;
        height: 100% ;
    position: absolute;
    top: 50%;
    transform: translateY( -50%);
    left: 10%;
}
.nav-select::after{
    content: '';
    width: 0px;
    /* transition: all 500ms; */
    border-radius: 20px;
    background-color: var(--color3);
    box-shadow:var(--color3) 0px 0px 0px;
    height: 0% ;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    transition: all 250ms ease-in-out;
    left: 10%;
}
.nav-select:hover::after{
   
    content: '';
    width: 10px;
     background-color: var(--color3);
    box-shadow: var(--color3) 3px 0px 14px;
        height: 100% ;
    position: absolute;
    top: 50%;
    transform: translateY( -50%);
    left: 10%;
 
    
}

/* people */
.add{
    bottom:  50px;
    right: 50px ;
    
}