@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');

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

header .range {
    height: 20vh;
    background: #151F39;
}

.container {
    width: 50%;
    background: rgb(250, 244, 244);
    height: 600px;
    /* height: 90vh; */
    margin-top: -5rem;
    padding-top: .8em;
    box-shadow: 0 2px 5px black;
    overflow-y: scroll;
}

.container h1 {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 2.5rem;
    color: #c4c4c5;
    margin-top: .5em;
}

.container h5 {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 1.5em;
    margin-top: .5em;
}

.grade {
    display: flex;
    flex-wrap: wrap;
    gap: 3em; 
    width: 80%;
    margin-top: 2em;

}

.grade-item {
    background: #151F39;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    color: #fff;
    padding: 10px;
}

.grade-item-one {
    height: 2.5rem;
    width: 5rem;
}

.grade-content {
    display: flex;
}

.grade-content input::placeholder {
    font-size: 1.3em;
}

.btn-container {
    display: flex;
    flex-direction: column;
}

.btn-operations {
    display: flex;
    align-items: center;
    gap: 2em;
}
button {
    height: 2.5rem;
    width: 10rem;
    margin-top: 2rem;
    background-color: #151F39;
    color: #fff;
    text-align: center;
    align-items: center;
    justify-content: center; 
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    border: none;
    box-shadow: 0 2px 6px #343435;
}

button:hover {
    opacity: 0.7;
}

#create-Grade, #remove-Grade {
    height: 2.5rem;
    width: 3rem;
    border-radius: 100%;
}

#clear {
    width: 8rem;
    opacity: 0.7;
}

#clear:hover {
    opacity: 1;
}

span {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    padding: 0px;
}

ul {
    margin-top: 1em;
}

li {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    list-style: none;
}

#result {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin-top: 1rem;
}

#phrases {
    font-family: 'Roboto', sans-serif;
    color: grey;
    margin-top: 1em;
}