.App {
align-items: center;
background-color: #282c34;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
text-align: center;
}
form {
display: flex;
color: lightgrey;
flex-direction: column;
font-size: 1rem;
gap: 1rem;
}
form > div {
align-items: flex-start;
display: flex;
flex-direction: column;
}
form > div:last-of-type {
margin-bottom: 0.5rem;
}
form input {
padding: 0.25rem;
}
form + hr + a {
font-size: 0.85rem;
}
form.new-note {
margin: 2rem;
}
button {
background-color: teal;
border: none;
border-radius: 0.15rem;
cursor: pointer;
color: white;
font-weight: bold;
font-size: 1rem;
outline: none;
padding: 0.5rem;
}
button:hover, button:active, button:focus {
background-color: #04adad;
}
button:disabled {
opacity: 0.5;
}
button.danger {
background-color: tomato;
}
button.danger:hover, button.danger:active, button.danger:focus {
background-color: #b13822;
}
.buttons button {
margin: 0 1rem;
}
h1 {
font-size: 2.5rem;
margin: 1rem;
}
a {
color: #908f8f;
}
hr {
border: none;
background-color: #ffffff38;
margin: 2rem 0 1rem 0rem;
width: 15rem;
height: 0.05rem;
}
a:hover, a:active, a:focus {
outline: none;
color: white;
}
.ReactTable {
border: solid 1px #908f8f;
border-radius: 0.25rem;
margin: 2rem 0;
width: 50%;
}
.ReactTable .buttons button {
font-size: 0.75rem;
padding: 0.25rem;
width: 3rem;
}