@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap');

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

:root {
--Green-400: hsl(172, 67%, 45%);
--Green-900: hsl(183, 100%, 15%);
--Grey-50: hsl(189, 47%, 97%);
--Grey-200: hsl(185, 41%, 84%);
--Grey-400: hsl(184, 14%, 56%);
--Grey-500: hsl(186, 14%, 43%);
--Red: hsl(0, 100%, 66%);
--Reset: hsl(183, 79%, 24%);
--White: hsl(0, 100%, 100%);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

body {
    font-family: 'Space Mono', monospace;
    background-color: var(--Grey-200);
    display: flex;
    flex-direction: column;
    gap: 100px;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.img-container {
    margin-top: 20px;
}
main {
    display: flex;
    gap: 40px;
    background-color: var(--White);
    color: var(--Grey-500);
    border-radius: 20px;
    padding: 30px;
    width: 60%;
}
main div {
    width: 100%;
}
.bill-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 12px;
    margin-left: 15px;
}

.flex {
    display: flex;
    flex-direction: column;
}
.input-wrapper {
    cursor: pointer;
    display: flex;
    align-items: center;
    background-color: var(--Grey-50);
    height: 50px;
    padding-inline: 20px;
    border-radius: 8px;
}
.input-wrapper:hover, .input-wrapper:focus-within {
    border: 2px solid var(--Green-400);
}
.input-wrapper input {
    cursor: pointer;
    font-family:'Space Mono', monospace;
    border: none;
    color: var(--Green-900);
    flex: 1;
    background: transparent;
    text-align: right;
    font-size: 25px;
    width: 100%;
}
.input-wrapper input::placeholder {
    color: var(--Grey-400);
  }
.input-wrapper input:focus {
    outline: none;
}
.custom-input {
    cursor: pointer;
    display: flex;
    align-items: center;
    background-color: var(--Grey-50);
    border-radius: 5px;
}
.custom-input input {
    font-family:'Space Mono', monospace;
    background: transparent;
    width: 100%;
    border: none;
    padding-left: 12px;
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--Green-900);
}
.custom-input input:focus {
    outline: none;
}
.custom-input:hover, .custom-input:focus-within {
    border: 2px solid var(--Green-400);
}
.tip-buttons {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 50px);
}
.tip-button {
    cursor: pointer;
    font-family:'Space Mono', monospace;
    font-size: 22px;
    border: 0;
    border-radius: 5px;
    color: var(--White);
    background-color: var(--Green-900);
}
.tip-button:hover, .tip-button:focus {
    color: var(--Green-900);
    background-color: var(--Green-400);
}
.tip-button.active {
    background-color: var(--Green-400);
    color: var(--Green-900);
  }
  
label {
    display: flex;
    padding-bottom: 10px;
}
.error-message {
    display: none;
    color: var(--Red);
    margin-left: auto;
}
.border-error {
    border: 2px solid var(--Red);
}
.tip-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--Green-900);
    color: var(--White);
    padding: 35px;
    border-radius: 10px;
}
.per-person {
    font-size: 14px;
    letter-spacing: -0.5px;
    color: var(--Grey-400);
}
.tip-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.value {
    font-size: 45px;
    color: var(--Green-400);
}
.reset {
    cursor: pointer;
    font-family:'Space Mono', monospace;
    font-size: 18px;
    height: 50px;
    background-color: var(--Reset);
    border: none;
    color: var(--Green-900);
    border-radius: 5px;
    margin-top: auto;
}
.reset:hover {
    background-color: var(--Grey-200);
}
.reset-color {
    background-color: var(--Green-400);
}


.attribution { 
    font-size: 12px; 
    text-align: center; 
}
.attribution a { 
    color: hsl(228, 45%, 44%); 
}

@media screen and (max-width: 1200px){
    main {
        width: 70%;
    }
}
@media screen and (max-width: 1000px){
    main {
        width: 80%;
    }
}
@media screen and (max-width: 800px){
    body {
        gap: 50px;
    }
    main {
        flex-direction: column;
    }
    .bill-container {
        margin-left: 0;
    }
    .custom-input input{
        padding-left: 25%;
    }

}
@media screen and (max-width: 400px){
    main {
        width: 100%;
        padding: 25px;
        gap: 25px;
    }
    .tip-buttons {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 50px);
    }
    .tip-container {
        padding: 15px;
    }
    .bill-container {
        padding: 5px;
    }
    .value {
        font-size: 35px;
    }
}