styles.css

/* referenced FunFacts Chrome extension https://chrome.google.com/webstore/detail/funfacts/mblmhpinekmkfpnhjaaelgkhloeglnkk */
body {
    color: black;
}

form {
    padding: 5% 15% 3% 10%;
}


#searchBar{
    background-color:rgb(230, 230, 230);
    color: black;
    font-size: 1rem;

    border-color:rgba(128, 128, 128, 0.685);
    border-radius: 3rem;
    padding: 1.25rem;
}

input#searchBar{
    color: black;
}

#searchBar:focus{
    outline: 1px;
}

#searchButton{
    background-color: white;
    font-size: 1rem;

    margin-left: .5rem;

    border-radius: 2rem;
    
    border: none;
    
    display: none;
}

#searchButton:hover{
    border-color: black;
}

.round {
    border-radius: 10px;
}

#dinoThumbnail {
    /* filter: invert(100%); */
    position: absolute;
    bottom: 5px;
    right: 10px;
}

a {
    color:rgb(81, 120, 187);
}

/* https://www.w3schools.com/howto/howto_js_popup.asp */
/* Popup container */
.popup {
    position: relative;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    padding:2% 0 1% 0;
}

.popup:hover {
    color:rgb(81, 120, 187);
    text-decoration: underline;
}
  
/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 300px;
    background-color: black;
    color: rgb(230, 230, 230);
    font-size: smaller;
    border-radius: 6px;
    padding: 8px 8px 0 8px;
    position: absolute;
    z-index: 1;
    bottom: 75%;
    right: 0%;
    margin-left: -30px;
}
  
/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 5%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
  
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}
  
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}