/* Core Styling ===== */
/* To remove the random annoying whitespace at the top of the
htlml documet you need to set the background position to absolute AND set top:0% left:0% */
/* The negative z-index is needed to allow the HoverDisplayDivs to function properly */

body {
    margin: 0px;
    font-size: 14px;
}

h1, h2 {
    color: #020291;
}

/* Backrround default formatting ===== */

.backdrop {
    position: absolute;
    margin: auto;
    /* height: 135%; */
    height: 225%;
    width: 100%;
    background-image: url("nhe-new-haven-green-1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* opacity: 0.4;  This is absolutely neccessary for after the animation ===== */
    z-index: -20;
}

.backdropRipple {
    position: absolute;
    margin: auto;
    height: 135%;
    width: 100%;
    background-color: rgba(42, 87, 170, 0.849);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* opacity: 0.4;  This is absolutely neccessary for after the animation ===== */
    z-index: -10;
    animation: bgRipple 5s 3 ease-in-out;
    transition: background 5s;
}

@keyframes bgRipple {
    0% {background: #47a7f5 radial-gradient(circle, transparent 1%, #0f1cd8 1%) center/15000% }
    50% {background: #0f1cd8 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000% }
    100% { background: #47a7f5 radial-gradient(circle, transparent 1%, #0f1cd8 1%) center/15000%  }
}

/* Ripple effect */
.ripple {
  background-position: center;
  transition: background 1s;
}
.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
.ripple:active {
  background-color: #0f1cd8;
  background-size: 100%;
  transition: background 0s;
}

.main {
    position: relative;
    margin: auto;
    max-width: 500px;
    padding: 20px;
    text-align: center;
    font-weight: bold;
    opacity: 1;
    z-index: -10;
}

.main p {
    display: none;
    padding: 5px;
    font-size: 115%;
    color: #ffffff;
    background-color: rgb(0, 0, 0);
}

/* Hover section formating ===== */

.hoverSection {
    margin: 20px auto;
    width: 100%;
    text-align: center;
    z-index: 0;
}

.clsHoverSections {
    margin: auto;
    width: 50%;
    border-radius: 5px;
    z-index: 20;
    line-height: 30px;
    padding: 0px;
    font-size: 125%;
    font-weight: bold;
}

.clsHoverContent {
    display: none;
    height: 200px;
    width: 50%;
    background-color: plum;
    padding: 0px;
    margin: auto;
    z-index: 20;  
}

.clsClickable {
    text-decoration: underline;
}
.clsClickable:hover {
    text-decoration-color: blue;
    color: blue;
}

.space {
    margin: 2em;
}

.clsAnnouncementBanner {
    margin: 0em;
    padding: 5px;
    background-color: rgb(0, 0, 0);
    color: white;
    text-align: center;
    font-weight: bold;
}


/* Table formatting ===== */

/*table {
    border-collapse: collapse;
    border: #000000
}*/

th {
    Display: none;
    background-color: #0a127c;
    color: #FFFFFF;
}

tr:nth-child(even) {
    background-color: #aaa9d4;
}

tr:hover {
    background-color: #2036b4;
    color: #FFFFFF;
}

table, th, td {
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border: #000000;
    border-radius: 5px;
    background-color: #ffffff2c;
    /* border: 1px solid black; */
    /* border-collapse: collapse; */
    padding: 5px;
    font-weight: bold;
}

    /* background-color: #14c4ff; */
    /* background-color:  #0202911f; */
    /* background-color:  #0000002c; light shade of black */
    /* background-color:  #65829b; */