/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*body {*/
/*  background-color: white;*/
/*  color: black;*/
/*  font-family: Verdana;*/
/*}*/

/* @import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap'); */
* { /* https://malekai.co.uk/posts/CSS/how_to_change_the_default_font_in_bootstrap */
    /* font-family: "Yusei Magic"; */
    font-family: "Tahoma", sans-serif !important; /* Tahoma with sans-serif as a fallback */
}

body {
    margin: 0;
    background-color: #dbe1e6; /* very light warm blue */

    /* Ensures body takes up at least the viewport height: needed to make footer be at bottom */
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; /* make the content in the main tag fill up the space of its parent - the body */
}

.btn-primary {
    background-color: #ffd900; /* yellow */
}

.btn-secondary {
    background-color: #fff8b0; /* pale yellow */
}

.btn-success {
    background-color: #4dd42b /* bright green */
}

.btn {
    color: black;
    display: inline-block;
    border-radius: 50%;
    box-shadow: 0 8px #666;
}

/* 3D click effect: https://www.w3schools.com/css/css3_buttons.asp */
.btn:active {
  box-shadow: 0 0px #333;
  transform: translateY(8px);
}

.form-group {
    background-color: white;
    padding: 2rem;
    border-radius: 2rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

/* make form input placeholder text italic: https://stackoverflow.com/questions/27644314/how-to-make-only-placeholder-italics-in-input */
::-webkit-input-placeholder {
    font-style: italic;
 }
 :-moz-placeholder {
    font-style: italic;  
 }
 ::-moz-placeholder {
    font-style: italic;  
 }
 :-ms-input-placeholder {  
    font-style: italic; 
 }

.popover-button {
    background-color: transparent;
    border: none;
}

.popover-header {
    background-color: #fff8b0; /* pale yellow */
}

.popover-body {
    background-color: #fff8b0; /* pale yellow */
}