html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(241, 228, 248);
}
nav {
    margin-bottom: 10px;
}
.navbar-customclass {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    background-color: rgb(241, 228, 248);
}
table {
    font-size: larger;
}
.particularFact {
    width: 100%;
    align-items: center;
}
form {
    width: 100%;
    height: 100%;
    text-align: center;
}
.wrapper {
    height: 100%;
    margin-bottom: 10px;
}
input {
    margin: 0px;
    height: 38px;
    padding: 0;
}
.btn {
    margin: -5px;
    margin-top: -10px;
}
td {
    color: rgb(226, 15, 198);
    font-family: "Shadows Into Light", cursive;
}
th {
    text-align: center;
    color: green;
    font-family: "Shadows Into Light", cursive;
}
td:hover {
    color: rgb(255, 0, 0);
    background-color: rgb(103, 235, 245);
}
img:hover {
    background-color: rgb(38, 0, 255);
    color: rgb(255, 217, 0);
}
.addFacts {
    text-align: center;
    font-family: "Shadows Into Light", cursive;
}
.error {
    text-align: center;
    color: red;
    font-family: "Shadows Into Light", cursive;
}
.container-fluid {
    align-items: center;
}
h4 {
    color: rgb(0, 60, 255);
    font-family: "Shadows Into Light", cursive;
}
label {
    font-weight: bolder;
    font-size: larger;
    margin-right: 10px;
    font-family: "Shadows Into Light", cursive;
}
input {
    width: 300px;
    background-color: transparent;
    border: solid blue;
    border-radius: 5px;
}
input:focus {
    background-color: white;
    border: 2px blue;
}

@media only screen and (min-width: 500px) and (max-width: 600px) {
    label {
        display: block;
    }
}
@media only screen and (max-width: 383px) {
    input {
        width: 75%;
    }
}