@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --primary-white: rgb(246, 244, 227);
    --primary-green: rgb(73, 177, 73);
    --primary-violet: rgb(82, 84, 206);
    --primary-lightblue: #9eeaff;
    --primary-dark: rgb(12, 12, 11);
    font-family: 'Inter';
    background: #245d8c;
    background-image: linear-gradient(110deg, var(--primary-violet) 0%, var(--primary-lightblue) 100%);
    min-height: 100%;
}

body {
    width: 100%;
    text-align: center;
    font-size: xx-large;
    margin: 5% auto;
}

input {
    font-size: xx-large;
    border: 0;
    border-radius: 5px;
}

button {
    font-size: xx-large;
    border: 0;
    border-radius: 5px;
}

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

#header {
    margin: 15px;
}

#room-list-container {
    background-color: var(--primary-white);
    margin: auto;
    border-radius: 15px;
    padding: 5%;
    min-height: 60vh;
    width: 80%;
}

#newEntryBtn {
    margin: 15px;
    padding: 10px;
    color: var(--primary-white);
    background-color: var(--primary-violet);
}

#list-item {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: var(--primary-dark);
    border: solid 3px var(--primary-dark);
    border-radius: 10px;
    margin: 5%;
}

#room-name {
    padding: 0 10%;
    margin: 10px 15px;
}

.hours-open {
    margin: 10px 15px;
}