@font-face {
    font-family: 'Poppins';
    font-weight: 400;
    font-style: italic;
    src: url("fonts/Poppins-Italic.woff2") format('woff2'),
    url("fonts/Poppins-Italic.woff") format('woff'),
    url("fonts/Poppins-Italic.ttf") format("truetype");
}

@font-face {
    font-family: 'Poppins';
    font-weight: 700;
    font-style: normal;
    src: url("fonts/Poppins-Bold.woff2") format('woff2'),
    url("fonts/Poppins-Bold.woff") format('woff'),
    url("fonts/Poppins-Bold.ttf") format("truetype");
}

@font-face {
    font-family: 'Poppins';
    font-weight: 800;
    font-style: italic;
    src: url("fonts/Poppins-ExtraBoldItalic.woff2") format('woff2'),
    url("fonts/Poppins-ExtraBoldItalic.woff") format('woff'),
    url("fonts/Poppins-ExtraBoldItalic.ttf") format("truetype");
}

*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


html {
    --light-grey: hsl(0, 0%, 86%);
    --smokey-grey: hsl(0, 1%, 44%);
    --red: hsl(0, 100%, 67%);
    --purple: hsl(259, 100%, 65%);
    --black: hsl(0, 0%, 8%);
    font-size: 62.5%;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    background-color: var(--light-grey);
}

.cal {
    background-color: #fff;
    width: 95%;
    max-width: 45rem;
    margin: 10vh auto;
    padding: 5rem 2rem;
    border-radius: 20px 20px 100px 20px;
}

.cal__form{
    position: relative;
    border-bottom: 1px solid var(--light-grey);
}

.cal__fields {
    display: flex;
    padding-bottom: 7rem;
}

.cal__field {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cal__title-in {
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    color: var(--smokey-grey);
}

.cal__input {
    width: 85%;
    padding: 1rem;
    border-radius: 10px;
    outline: none;
    border: 1px solid var(--light-grey);
    background-color: white;
    font-size: 2rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    transition: box-shadow 0.3s;
}

.cal__input:focus{
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.cal__input::placeholder {
    color: var(--smokey-grey);
}

.cal__input::-ms-input-placeholder {
    color: var(--smokey-grey);
}

.cal__input::-webkit-input-placeholder {
    color: var(--smokey-grey);
}

.cal__error {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--red);
    padding-right: 0.5rem;
    visibility: hidden;
}

.cal__field--error .cal__input{
    border: 1px solid var(--red);
}

.cal__field--error .cal__title-in{
    color: var(--red);
}

.cal__field--error .cal__error{
    visibility: visible;
}



.cal__btn{
    border-radius: 50%;
    outline: none;
    border: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background-color: var(--purple);
    cursor: pointer;
    width: 6rem;
    height: 6rem;
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    transition: background-color 0.5s;
}

.cal__btn:active{
    background-color: hsl(0, 0%, 8%);
}

.cal__img{
    width: 6rem;
    padding: 1.5rem;
}

.cal__answer{
    padding:  6rem 0 2rem;
    font-size: 5rem;
    font-weight: 800;
    font-style: italic;
    color: var(--black);
}

.cal__output{
    line-height: 1.2;
}

.cal__result{
    color: var(--purple);
}

@media only screen and (max-width: 22.5em) {
    .cal__answer{
        font-size: 3.5rem;
    }
}


@media only screen and (min-width: 62em) {
    main{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    .cal {
        width: 50%;
        max-width: 100rem;
        margin: auto;
        padding: 4rem 4rem;
        border-radius: 20px 20px 150px 20px;
    }

    .cal__title-in {
        font-size: 1rem;
        letter-spacing: 0.3rem;
    }

    .cal__fields {
        width: 80%;
        padding-bottom: 3rem;
    }

    .cal__btn{
        left: unset;
        right: 0;
        transform: translate(0,50%);
    }

    .cal__answer{
        padding:  2rem 0 0;
        font-size: 7rem;
        font-weight: 800;
        font-style: italic;
    }
}

@media (hover: hover) and (pointer: fine){
    .cal__btn:hover{
        background-color: hsl(0, 0%, 8%);
    }
}