:root {
    --strong_cyan: hsl(172, 67%, 45%);
    --very_dark_cyan: hsl(183, 100%, 15%);
    --dark_grayish_cyan1: hsl(186, 14%, 43%);
    --dark_grayish_cyan2: hsl(184, 14%, 56%);
    --light_grayish_cyan1: hsl(185, 41%, 84%);
    --light_grayish_cyan2: hsl(189, 41%, 97%);
    --white: hsl(0, 0%, 100%);
}

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

body {
    font-family: 'Space Mono', monospace;
    min-height: 100vh;
    min-width: 100vw;
    background-color: var(--light_grayish_cyan1);
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none; 
}

label, p{
    display:flex; 
    flex-direction: column; 
    color: var(--dark_grayish_cyan1);
    margin: 10px;
    font-weight: 700;    
}

input{
    border: none;
    background-color: var(--light_grayish_cyan2);
    color: var(--very_dark_cyan);
    font-size: 24px;
    text-align: right;
    padding-right: 20px;
    width: 290px;
    font-weight: 700;  
}

output{
    text-align: right; 
    width: 50%;
}

.header_container{
    display: flex; 
    flex-direction: row;
    justify-content: space-between;
}

.left{
    margin-top: 20px; 
}

input:focus{
    outline: none;  
}

.container {
    width: 375px; 
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
}

.header{
    margin-top: 40px; 
}

.calculator_container{
    display: flex;
    justify-items:start;
    flex-direction: column; 
    width: 100%;
    background-color: white;
    padding-left: 30px; 
    padding-right: 30px;
    border-radius: 10px;     
}

.amount_input, .person_input{
    display: flex;
    align-items: center;
    background-color: var(--light_grayish_cyan2);
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 5px;
    border: 2px solid var(--light_grayish_cyan2);
    border-radius: 5px;
}

.amount_input:hover,   
.amount_input:focus,
#percentage:hover,
#percentage:focus,
.person_input:focus, 
.person_input:hover{
    border-color: var(--strong_cyan);
    cursor: pointer;   
}




.buttons_container{
    position: relative;
}

.buttons {
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 10px;  
}

.buttons input[type="radio"]{
    opacity: 0; 
    position: fixed; 
    width:0; 
}

.buttons label{
    background-color: var(--very_dark_cyan);
    color: var(--white); 
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 24px;
    border: 2px solid #444;
    border-radius: 5px;
    text-align: center;
    margin:0;  
}

#percentage{
    position: absolute;
    left: 165px;
    bottom: 0px;
    width: 150px;
    border-radius: 5px;
    border: 2px solid var(--white);
    background-color: var(--light_grayish_cyan2);
    color: var(--very_dark_cyan);
    font-weight: 700;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 20px;
    font-size: 24px;
    text-align: right;
}

input[type="radio"]:checked + label{
    background-color:var(--strong_cyan); 
    color: var(--very_dark_cyan);
    border: 1px solid var(--strong-cyan); 
}

input[type="radio"]:hover + label {
    background-color: var(--strong_cyan);
    border-color: var(--strong-cyan);
    cursor: pointer;   
}

.error{
    color: red; 
    text-align: right; 
}

.error_border{
    border: 2px solid red; 
}

.right{
    margin-top: 20px; 
    background-color: var(--very_dark_cyan);
    border-radius: 10px ;
    color: var(--white);
    padding-top: 40px;
    padding-left: 20px; 
    padding-right: 20px;
    margin-bottom: 40px;    
}

.white{
    color: var(--white); 
}

.green {
    color: var(--dark_grayish_cyan1)
}

.tip_output_container, .total_output_container{
    display: flex; 
}

.tip {
    width: 40%; 
}

.tipPerPerson, .totalPerPerson {
    color: var(--strong_cyan); 
    font-size: 32px;
    padding-top: 10px;  
}


.btn{
    margin-top: 20px;
    margin-bottom: 20px; 
    width:270px;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: var(--strong_cyan); 
    font-weight: 700;
    font-size: 20px;  
}

@media screen and (min-width: 1000px){

    .container {
        width: 100vw;
        display: flex;
    }

    .header {
        margin-bottom: 50px;
        margin-top: 0px;  
    }

    .calculator_container{
        width: 800px;
    }

    form {
        display: flex; 
        flex-direction: row;
        gap: 20px; 
        
    }

    .left{
        width: 400px;
        margin-bottom: 40px;   
    }

    .right {
        width: 400px;
        margin-top: 40px;  
    }

    .tip_output_container{
        margin-bottom: 60px; 
    }
    
    .total_output_container{
        margin-bottom: 60px; 
    }

    .btn {
        width: 360px;
    }
}