:root {
    --app-dark-background: #181721;
    --app-light-background: #f1f2f3;
    --app-button-background: #77e0d2;
    --app-button-hover-background: #a3e4db;
    --app-input-background: #ffdbd9;
}
  
body {
    background: var(--app-light-background)
    url(../img/background.gif)
    center center / cover no-repeat; 
    margin:0;
    padding: 0;
}

/*--------------------------------------------*/
/*Utility classes                             */
/*--------------------------------------------*/

.container {
    width: min(100% - 30px, 900px);
    margin-inline: auto;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
    place-items: center;
}

.space {
    justify-content: space-between;
}

/*--------------------------------------------*/
/*Main                                        */
/*--------------------------------------------*/

main {
    min-height: calc(100vh - 60px - 60px);
    display: grid;
    place-items: center;
}

header {
    height:60px;
}

.title {
    text-align: center;
    line-height: 60px;
    color: #3b3b3b;
    font-size: 30px;
    font-weight: 650;
}

.converters-container {
    display:grid;
    gap:50px;
}

.converters-row {
    display: flex;
    gap:50px;
}

.block {
    width: 350px;
    height: 180px;
    background-color: #fff;
    border-radius: 10px;
    display: grid;
    padding: 10px;

    h2 {
        text-align: center;
        color:#3b3b3b;
        font-size: 20px;
    }
}

.enter-box{
    gap: 15px;
}

.temp-input, .length-input, .area-input, .weight-input {
    width: 75%;
    height: 35px;
    border-radius: 10px;
    padding-left: 10px;
    font-size: 14px;
    background-color: var(--app-light-background);
    border: 1px solid var(--app-light-background);
}

.temp-input:focus, .length-input:focus, .area-input:focus, .weight-input:focus {
    border: 1px solid var(--app-dark-background);
}

.temp-convert, .length-convert, .area-convert, .weight-convert {
    width: 25%;
    height: 35px;
    background-color: var(--app-button-background);
    color: #000;
    font-size: 14px;
    border-radius: 10px;
    font-weight: 500;
}

.temp-convert:hover, .length-convert:hover, .area-convert:hover, .weight-convert:hover {
    background-color: var(--app-button-hover-background);
    transition: ease-in-out 0.25s;
}

.temp-choice, .length-choice, .area-choice, .weight-choice {
    margin-top: 15px;
    gap: 30px;
    font-size: 14px;
}

.result-box {
    width:100%;
}

.temp-output, .length-output, .area-output, .weight-output {
    margin-top: 15px;
    width: 100%;
    height: 35px;
    font-size: 14px;
    background-color: var(--app-light-background);
    border-radius: 10px;
    padding-left: 10px;
    line-height: 50px;
    cursor: not-allowed;
}

.footer {
    height:60px;
    text-align: center;
    line-height: 60px;
    color: #3b3b3b;
    font-weight: 500;
}

@media screen and (max-width: 900px) {
    .converters-container {
        gap:30px;
    }
    
    .converters-row {
        display:grid;
        place-items: center;
        gap:30px;
        margin-top: 10px;
    }
}

@media screen and (max-width: 468px) {
    .block {
        width: 100%;
    }

    .temp-input, .length-input, .area-input, .weight-input {
        font-size: 10px;
    }

    .temp-convert, .length-convert, .area-convert, .weight-convert {
        font-size: 8px;
    }

    .temp-output, .length-output, .area-output, .weight-output {
        font-size: 10px;
    }

    .temp-choice, .length-choice, .area-choice, .weight-choice {
        font-size: 10px;
    }
}