:root{
    --bg-color: rgb(240, 208, 240);
    --bg-color-secondary: rgb(212, 57, 212);
}

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

body {
    display: flex;
    position: relative;
    flex-direction: column;
    max-width: 100vw;
    min-height: 100vh;
    align-items: center;
    font-family: 'poppins', sans-serif;
    /* padding: 1rem 0; */ 
}

/* width */
::-webkit-scrollbar {
    width: 12px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    padding: 0.25rem;
    background: rgb(238, 228, 228);
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(212, 57, 212);
    border-radius: 1rem;
    width: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: rgb(236, 44, 236);
  }
  

#logo {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5rem 0.5rem;
    margin-bottom: 1.5rem;
}

#logo h1{
    color: var(--bg-color-secondary)
}

.intro {
    display: flex;
    flex-direction: column;
    width: 85%;
    height: 15rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    background-color: var(--bg-color);
    margin: 2rem 0;
}

.intro #title {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 1rem 0;
    color: black;
}

.intro #content {
    font-size: 1.25rem;
    font-weight: 500;
    color: black;
}

.name {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    font-size: 2rem;
    margin: 2rem 0;
    padding: 0 1rem;
}

.name p {
    margin: 0 0.25rem;
}

.name button {
    font-size: 1.5rem;
    margin: 0 0.25rem;
    color: purple;
    border: none;
}

.name button i{
    background-color: white;
}

.enter-cont {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 999;
    backdrop-filter: blur(100px);
}

.enter-cont .enter {
    display: flex;
    flex-direction: column;
    width: 75%;
    justify-content: center;
    align-items: center;
} 

.enter-cont .enter label {
    display: flex;
    font-size: 2rem;
    margin: 0.5rem 0;
    max-width: 90%;
}

.enter-cont .enter input {
    display: flex;
    font-size: 2rem;
    margin: 0.5rem 0;
    max-width: 90%;
}

.enter-cont .enter button {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 1.25rem;
    color: white;
    border: none;
    margin: 0.5rem 0;
    background-color: var(--bg-color-secondary);
}

.enter-cont .enter button:hover {
    cursor: pointer;
    background-color: var(--bg-color-secondary);
}

#today-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 75%;
    padding: 1.5rem 1.25rem;
    border-radius: 1.5rem;
    margin-bottom: 1rem;
    max-width: 40rem;
    background-color: var(--bg-color);
}

#today-card #day {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color-secondary);
    color: aliceblue;
    height: 3rem;
    width: 3rem;
    position: absolute;
    left: 50%;
    top: -1.5rem;
    transform: translateX(-50%);
    border-radius: 100%;
}

#today-card #today-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#today-card #today-data .num {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin: 0.5rem 0;
}

#today-card #today-data .num label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    font-size: 1.25rem;
}

#today-card #today-data .num input {
    width: 50%;
    border: none;
    border-radius: 0.25rem;
    padding: 0.25rem;
}

#today-card #today-data .workouts {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0.5rem 0;
}

#today-card #today-data .workouts .workout-input-con {
    display: flex;
    width: 100%;
    margin: 0.5rem 0.25rem;
}

#today-card #today-data .workouts .workout-input-con .workout-input{
    display: flex;
    width: 25%;
    border: none;
    height: 1.5rem;
    border-radius: 0.5rem;
    padding: 0.25rem;
    margin: 0 0.25rem;
}

#today-card #today-data .add {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 0 0.5rem;
}

#today-card #today-data .add button {
    background-color: var(--bg-color-secondary);
    color: aliceblue;
    border-radius: 1rem;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
}

#today-card #done {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#today-card #done button {
    background-color: var(--bg-color-secondary);
    color: aliceblue;
    border-radius: 0.72rem;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
}

#today-card #done button:hover {
    cursor: pointer;
}

.reset {
    display: flex;
    width: 100%;
    margin: 1rem 0;
    padding: 0 1rem;
    justify-content: flex-start;
    align-items: center;
}

.reset button {
    color: white;
    background-color: tomato;
    border: none;
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.emptydiv {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 75%;
}

.emptydiv p {
    font-size: 1.75rem;
}

#rec-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
}

#rec-title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    font-size: 2rem;
    margin: 2rem 0;
    padding: 0 1rem;
}

#record-container {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    width: 100%;
    min-height: 5rem;
}

.record {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70%; 
    padding: 1rem;
    position: relative;
    border-radius: 1rem;
    margin: 0.75rem 0.25rem; 
    background-color: var(--bg-color);
}

.record .rec-day {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -1rem;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-color-secondary);
}

.record .rec-day p {
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

.record .details {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.record .details .weight, .height {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.5rem 0;
}

.record .details .rec-workouts-con {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    padding: 0.5rem 0;
}

.record .details .rec-workouts-con .rec-workout {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.record .details .rec-workouts-con .rec-workout p {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 0;
    word-break: normal;
}

#wrknm {
    font-size: 1rem;
    max-width: 3.5rem;
}

.record .details .rec-workouts-con .rec-workout p span {
    font-size: 1rem;
    font-weight: 500;
}


.record .createdAt {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    padding: 0.25rem 0;
}

.record .createdAt p {
    font-size: 1rem;
    color: black;
    font-weight: 550;
    padding: 0 0.25rem;
}


@media (min-width: 600px) and (max-width: 768px) {
    
    #record-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 1rem; 
        width: 100%;
        min-height: 5rem;
    }
    
    .record {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 45%;
        min-width: 18rem;
        max-width: 23rem;
        padding: 1rem;
        position: relative;
        border-radius: 1rem;
        background-color: rgb(243, 226, 243);
    }
    
}

@media (min-width:769px) and (max-width: 992px) {

    .intro {
        display: flex;
        flex-direction: column;
        width: 75%;
        height: 15rem;
        padding: 1rem;
        justify-content: center;
        align-items: center;
        border-radius: 1.5rem;
        background-color: rgb(240, 208, 240);
        margin: 2rem 0;
    }

    #record-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
        padding: 1rem; 
        width: 100%;
        max-width: 55rem;
        min-height: 5rem;
    }
    
    .record {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 45%;
        max-width: 23rem;
        padding: 1rem;
        position: relative;
        border-radius: 1rem;
        background-color: rgb(243, 226, 243);
    }
}

@media (min-width: 993px) and (max-width: 1400px) {

    .intro {
        height: 20rem;
        max-width: 45rem;
    }

    .intro #title {
        font-size: 2.25rem;
    }
    
    .intro #content {
        font-size: 1.75rem;
    }

    #today-card {
        justify-content: space-around;
        min-height: 17rem;
    }

    #record-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
        padding: 1rem; 
        width: 100%;
        max-width: 55rem;
        min-height: 5rem;
    }

    .record {
        width: 32%;
    }

}