style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px solid red; */
}

body{
    text-align: center;
    font-family: 'Inter';
    color: #3C3C3C;
}

#header{
    /* dimension */
    width: 200px;
    height: 31px;

    /* text style */
    line-height: 15px;
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.2rem;

    /* position */
    margin: 28px auto 0px;

    /* content position */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 8px 8px 8px;
}

#input-field-container{
    /* dimension */
    width: 374px;

    /* layout of content */
    padding: 24px 16px 16px ;
    display: flex;
    justify-content: center;
    align-items: center;

    /* position */
    margin: 0 auto 20px;
}

#input-field{
    /* text-style */
    font-size: 1.8rem;

    /* style */
    background: #ECECEC;
    border-radius: 10px;

    /* dimension */
    width: 342px;
    height: 72px;

    /* layout of content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 24px 16px 16px;
}

#grid{
    /* grid style */
    display: inline-grid;
    grid-template-columns: auto auto auto;
    gap: 16px 16px;

    /* position of grid container */
    margin-bottom: 24px;
}

#grid>button,
#grid>#acheck-btn>button,
#grid>#adelete-btn>button {
    /* dimension */
    height: 80px;
    width: 80px;

    /* button style */
    border: 0px;
    border-radius: 10px;

    /* text style */
    font-size: 1.5rem;
    font-weight: 300;
}

#grid>button:hover{
    background: #F5F5F5;
}

#grid>button:active {
    background: #ECECEC;
}

.acheck-btn {
    /* style */
    background: #53DC71;
    border: 0px;

    /* text style */
    color: white;
}

.acheck-btn:hover{
    background: #67F085;
}

.acheck-btn:active{
    background: #53DC71;
}

.adelete-btn {
    /* style */
    background: #F04C4C;
    border: 0px;

    /* text style */
    color: white;
}

.adelete-btn:hover{
    background: #FF6060;
    /* border-radius: 10px; */
}

.adelete-btn:active{
    background: #F04C4C;
    /* border-radius: 10px */
}

a {
    text-decoration: none;
}

#save-el {
    /* text style */
    color: #F04C4C;
    font-weight: 600;
    font-size: 1.375rem;
}

#display{
    /* style */
    background: white;
    border: 1px solid black;

    /* text-style */
    color: #3C3C3C;
    font-size: 1rem;

    /* dimension */
    width: 342px;
    height: 51px;
    border-radius: 10px;

    /* content layout */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    /* position */
    position: fixed;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
}

#display:hover{
    /* style */
    background: #3C3C3C;

    /* text style */
    color: white;
}

#display:active {
    /* style */
    background: #4F4F4F;

    /* text style */
    color: white;
}

/* History Page */
#sub-heading{
    /* position */
    margin-top: 24px;
    margin-bottom: 24px;

    /* text style */
    font-weight: 600;
    font-size: 1.375rem;
}

#table{
    /* style */
    display: flex;
    justify-content: space-between;

    /* dimension */
    width: 390px;

    /* postion */
    margin: 0 auto;
}

li{
    list-style: none;
    padding-bottom: 16px;
}

#items{
    /* text style */
    text-align: left;
}

#prices{
    /* text style */
    text-align: right;
}

#total{
    /* position */
    margin: 32px;

    /* text style */
    font-weight: 600;
    font-size: 1.5rem;
    color: #3C3C3C;
}

#clear{
    /* text style */
    color: #F04C4C;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.1875rem;
}

/* Overlay 1 */
#overlay1{
    /* style */
    background: rgba(0, 0, 0, 0.283);

    /* dimension */
    width: 100%;
    height: 100%;

    /* position */
    margin: -29px auto 0;
    position: fixed;
    z-index: 1;

    /* grid layout */
    display: grid;
    grid-template-columns: auto 343px auto;
    grid-template-rows: 260px 259px auto;

    /* visibility */
    visibility: hidden;
}

#overlay1:target{
    visibility: visible;
}

#overlay1>a{
    display: block;
}

.item1_4{
    grid-column-start: 1;
    grid-column-end: 4;
}

#overlay1-content{
    /* position of content */
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    align-items: center;

    /* dimension */
    width: 343px;
    height: 259px;

    /* style */
    border: 0px solid black;
    border-radius: 10px;
    background: #FFFFFF;
    padding: 40px 16px;
}

#overlay1-question {
    font-weight: 600;
}

#inp-text {
    /* dimension */
    height: 51px;
    width: 311px;

    /* style */
    background: #ECECEC;
    border-radius: 10px;
    border-width: 0px;

    /* position */
    margin-bottom: 24px;

    /* position of content */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;

    /* content style */
    font-weight: 400;
    line-height: 19px;
}

#submit-btn {
    /* arrangement of content */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 8px;
    gap: 8px;

    /* dimension */
    width: 311px;
    height: 51px;

    /* style */
    border: 1px solid #53DC71;
    border-radius: 10px;
    background: white;
    color: #53DC71;

    /* text style */
    font-size: 1rem;
}

#submit-btn:hover{
    /* style */
    background: #53DC71;

    /* text stlye */
    color: white;
}

#submit-btn:active {
    /* style */
    background: #67F085;

    /* text stlye */
    color: white;
}

.tiny-fa {
    /* text-area */
    font-weight: 400;

    /* dimension */
    width: 16px;
    height: 16px;
}

#submit-btn>p {
    /* dimension */
    width: 119px;
    height: 19px;

    /* font-style */
    font-weight: 500;
    line-height: 19px;
}

/* Overlay 2 */
#overlay2 {
    /* style */
    background: rgba(0, 0, 0, 0.283);

    /* position */
    margin: -29px auto 0;
    position: fixed;
    z-index: 1;

    /* dimension */
    width: 100%;
    height: 100%;

    /* visibility */
    visibility: hidden;

    /* grid layout */
    display: grid;
    grid-template-columns: auto 343px auto;
    grid-template-rows: 260px 319px auto;
}

#overlay2:target {
    visibility: visible;
}

#overlay2>a, 
#cancel-btn-id {
    display: block;
}

.item1_4-2 {
    grid-column-start: 1;
    grid-column-end: 4;
}

#overlay2-content {
    /* position of content */
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center;

    /* dimension */
    width: 343px;
    height: 319px;

    /* style */
    border: 0px solid black;
    border-radius: 10px;
    background: #ffffff;
    padding: 40px 16px;

    /* text style */
    color: #3C3C3C;
}

#overlay2-question {
    font-weight: 600;
    font-size: 22px;
    width: 311px;
    height: 54px;
}

#overlay2-warning {
    /* text style */
    font-weight: 400;
    font-size: 1rem;
    line-height: 19px;

    /* dimension */
    width: 311px;
    height: 19px;
}

#delete-entries-btn {
    /* arrangement of content */
    display: flex;
    justify-content: center;
    justify-content: center;
    align-items: center;
    padding: 16px 8px;
    gap: 8px;

    /* dimension */
    width: 311px;
    height: 51px;

    /* style */
    border: 1px solid #F04C4C;
    border-radius: 10px;
    background: white;
    color: #F04C4C;
    ;

    /* position */
    margin-bottom: 24px;
    margin-top: 8px;

    /* text style */
    font-size: 1rem;
}

#delete-entries-btn:hover{
    /* style */
    background: #F04C4C;

    /* text style */
    color: white;
}

#delete-entries-btn:active {
    /* style */
    background: #FF6060;

    /* text style */
    color: white;
}

#cancel-btn {
    /* arrangement of content */
    display: flex;
    justify-content: center;
    justify-content: center;
    align-items: center;
    padding: 16px 8px;
    gap: 8px;

    /* dimension */
    width: 311px;
    height: 51px;

    /* style */
    border: 1px solid;
    border-radius: 10px;
    background: white;

    /* text style */
    font-size: 1rem;
}

#cancel-btn:hover {
    /* style */
    background: #3C3C3C;

    /* text style */
    color: white;
}

#cancel-btn:active {
    /* style */
    background: #4F4F4F;

    /* text style */
    color: white;
}