@font-face {
    font-family: 'Poppins-Regular';
    src: url('./fonts/Poppins-Regular.ttf');
}
@font-face {
    font-family: 'Poppins-Bold';
    src: url('./fonts/Poppins-Bold.ttf');
}
@font-face {
    font-family: 'Poppins-BoldItalic';
    src: url('./fonts/Poppins-BoldItalic.ttf');
}
@font-face {
    font-family: 'Poppins-ExtraBold';
    src: url('./fonts/Poppins-ExtraBold.ttf');
}
@font-face {
    font-family: 'Poppins-ExtraBoldItalic';
    src: url('./fonts/Poppins-ExtraBoldItalic.ttf');
}
@font-face {
    font-family: 'Poppins-Italic';
    src: url('./fonts/Poppins-Italic.ttf');
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    position: relative;
    display: flex;
    width: 90rem;
    max-width: 100%;
    height: 100vh;
    margin: auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #F0F0F0;
}
.attribution{
    font-family: 'Poppins-Regular';
    margin: 1rem 0 0 0;
    font-size: .8rem;
}
a,a:hover{
    text-decoration: none;
}
.box{
    position: relative;
    width: 52.5rem;
    height: 40.6875rem;
    border-radius: 1.5625rem 1.5625rem 12.5rem 1.5625rem;
    background: #FFF;
    font-family: 'Poppins-Regular';
    padding: 3.69rem 3.5rem;
}
form{
    position: relative;
    display: flex;
    align-items: flex-start;
}
form .List{
    position: relative;
    display: flex;
    align-items: start;
    flex-direction: column;
    margin-right: 2rem;
}
.List label, input{
    margin: .5rem .5rem .5rem 0;
}
.List label{
    color: #8D8D8D;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.18375rem;
}
.List input{
    width: 10rem;
    height: 4.5rem;
    border-radius: 0.5rem;
    padding-left: 1.5rem;
    padding-top: .2rem;
    border: 1px solid #E5E5E5;
    color: #151515;
    font-size: 2rem;
    font-weight: 700;
}
.List input:hover{
    border: 2px solid #7762A5;
}
.List input::placeholder{
    color: #8D8D8D;
    font-size: 2rem;
    font-weight: 700;
}
.box span{
    position: absolute;
    width: 39.5rem;
    height: 0.125rem;
    border-radius: 0.3125rem;
    background: #F1F1F1;
    top: 11rem;
}
.box button{
    position: absolute;
    width: 6rem;
    height: 6rem;
    border-radius: 3.125rem;
    background: #864CFF;
    top: -3rem;
    left: 39.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    cursor: pointer;
}
.box button:hover{
    background: #151515;
}

/* result */
.result{
    position: relative;
    margin-top: 4rem;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
}
.result .dates{
    display: flex;
    align-items: center;
    margin-top: -1.2rem;
}
.result h1{
    font-size: 4rem;
    color: #864CFF;
    font-family: 'Poppins-BoldItalic';
    margin-right: 2rem;
    font-style: italic;
    font-weight: 700;
}
.result h2{
    color: #151515;
    font-family: 'Poppins-BoldItalic';
    font-size: 6.25rem;
    font-style: italic;
    font-weight: 700;
}

/* Media Query */
@media screen and (max-width: 646px) {
    .box{
        width: 21.4375rem;
        height: 30.375rem;
        border-radius: 1.5625rem 1.5625rem 6.375rem 1.5625rem;
        padding: 1.2rem;
    }
    .List label, input{
        margin-top: .3rem;
    }
    form .List {
        margin-right: .94rem;
    }
    .List input{
        width: 5.5rem;
        height: 3.375rem;
        padding-left: .8rem;
    }
    .List input, .List input::placeholder{
        font-size: 1.375rem;
    }
    .box span{
        width: 100%;
        height: 0.125rem;
        top: 8.8rem;
    }
    .box button{
        width: 4rem;
        height: 4rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .result{
        margin-top: 5.8rem;
    }
    .result .dates{
        margin-top: 0;
    }
    .result h1{
        font-size: 3rem;
    }
    .result h2{
        font-size: 3.2rem;
    }
    
}