@import url('https://fonts.googleapis.com/css2?family=Castoro&display=swap');

body {
    background-color: #0d1a26;
    width:100%;
    overflow:auto;
    margin:0px;
    font-family: 'Castoro', serif;
}

h1 {
    text-align: center;
}

#update {
    text-align: center;
}

.headbar {
    background-color: #6d131c;
    position:absolute;
    height:50px;
    top:25px;
    width: 100%;
    padding: 0px;
    border: solid black;
    border-width: 1px;
    overflow:hidden;
    text-align:center;
    max-width:1200px;
    font-family: 'Castoro', serif;
}

.footbar {
    
    background-color: #6d131c;
    color: #dee2e8;
    width: 100%;
    position:absolute;
    padding: 0px;
    height:50px;
    line-height:50px;
    border: solid black;
    border-width: 1px;
    text-align:center;
    max-width:1200px;
}

.footbar a:link {
    text-decoration: none;
    color:white;
}

.footbar a:visited {
    text-decoration: none;
    color:white;
}

.footbar a:hover {
    text-decoration: underline;
    color:#dedede;
}

.frontmain {
    top:50px;
    padding: 20px;
    margin-top: 75px;
    overflow:auto;
}

.content {
    background-color: #dee2e8;
    width:100%;
    padding: 0px;
    margin: auto;
    border: solid black;
    border-width: 1px;
    font-family: 'Castoro', serif;
}


.frame {
    max-width:1200px;
    width:100%;
    margin:auto;
    left:50%;
    
}

.dropbar{
    z-index: -1;
    background-color: #54131c;
    position:absolute;
    height:50px;
    top:35px;
    width:99.9%;
    padding: 0px;
    border: solid black;
    border-width: 1px;
    text-align:center;    
    
}

.dropbar-2{
    z-index: -1;
    background-color: #54131c;
    position:absolute;
    height:50px;
    width:99.9%;
    padding: 0px;
    margin-top:-10px;
    border: solid black;
    border-width: 1px;
    text-align:center;    
    
}

.button {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100px;
    height:50px;
    float:left;
    color:"#000000";
}

.button:hover {
    
    opacity: .8;
}

.button a:link {
    color:white; 
    font-size: 25px;
    text-decoration:none;
}

.button a:visited {
    color:white; 
    text-decoration:none;
}

.star {
    display:flex;
    align-items:center;
    width:30px;
    height:50px;
    float:left;
    
}


.main {
    top:80px;
    padding: 20px;
    margin-top: 75px;

    overflow:hidden;
}

#article {
    float:left;
    background-color: #fefefa;
    width: 65%;
    border-radius: 5px;
    padding: 20px;
    font-family: 'Castoro', serif;
}


#title {

    margin-top:155px;
    font-weight:bold;
    font-size: 25px;
    
}

#update {
    text-align: center;
}


#subtitle {
    margin-left:10px;
    
}

#topimg {
    width: 200px;
    height: 200px;
    float: left;
    margin-top:20px;
    margin-right:20px;
    margin-left:20px;
    margin-bottom: 20px;
    filter:drop-shadow(-10px 10px 2px #bebebe)
}

.midimg {
    display: block;
    margin: 0 auto;
}


.break {
    margin: 20px;
    text-align:center;
    letter-spacing:15px; 
}

.quote {
    margin-top:20px;
    width:60%;
    margin-left:20%;
    text-justify:left;
    font-style:italic;
}

.caption {
    text-align:center;
    font-size:10px;
    margin-top:5px;
}

.para {
    text-indent: 50px;
    margin-top: 20px;
    margin-left:50px;
    margin-right:50px;
    font-size:15px
}


#sidetitle {
    font-size: 22px;
    font-weight:bold;
    margin-top:20px;
    margin-left:15px;
}



.sidepick {
    display:flex;
    align-items:center;
    height:50px;
    width:100%;
    text-indent:25px;
    background-color:#E8E8E8;
}

.sidepick:hover {
    background-color:#FFFFFF;
    
}

.sidepick2 {
    display:flex;
    align-items:center;
    height:50px;
    width:100%;
    text-indent:25px;
    background-color:#F0F0F0;
}

.sidepick2:hover {
    background-color:#FFFFFF;

    
}

.sidelink {
    font-size: 18px;
    color:black;

}

#end {
    margin-top:20px;
    font-size:10px;
    float:right;
    color:black;
}

.pageimg {
    width: 200px;
    height: 200px;
    float: left;
    margin:15px;
    filter:drop-shadow(-10px 10px 2px #a4a4a4)
}

.pageblock {
    padding:10px;
    overflow:hidden;
    background-color:#E8E8E8;
}

.pageblock2 {
    padding:10px;
    overflow:hidden;
    background-color:#F0F0F0;
}

.pagehead {
    font-family: 'Castoro', serif;
    float: left;
    margin-top:40px;
    margin-left:15px;
    font-size:22px;
    font-weight:bold;
}

.pagedesc {
    margin-top:65px;
    font-size:14px;
}

#sidebar {
    width:28%;
    border-radius: 5px;
    float:right;
    font-family: 'Castoro', serif;
    background-color:white;
    
}

.section {
    font-size: 20px;
    font-weight: bold;
    margin-top:20px;
    
}

#menu {
    width:100%;
    
}


html {
  font-family: 'Castoro', serif;
  font-size: 14px;
}

#howto {
    border:solid black;
    border-width: 1px;
    padding:20px;
    background-color:#fefefa;
    padding-bottom:30px;
    
}

#game {
    float:right;
    
}

#panel {
    float:left;
    width:30%;
    
}

.bingo-board {
  display: grid;
  grid-template-columns: repeat(5, 120px);
  grid-template-rows: repeat(5, 120px);
  font-weight: 400;
}

.bingo-box {
  padding: 0.5em;
  border: 1px solid black;
    background-color: #fefefa;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bingo-box:hover {
  cursor: pointer;
    background-color:#dedede;
}

.bingo-box.checked {
    width:104px;
    height:104px;
    background-image:url('judy-head.png');
    background-repeat:no-repeat;
    background-size: 76px 100px;
    background-position: center;
    color:transparent;
}

/* For Edge <16 */
.bingo-board {
    display: -ms-grid;
    -ms-grid-columns: 120px 120px 120px 120px 120px;
    -ms-grid-rows: 120px 120px 120px 120px 120px;
}
.bingo-box:nth-child(2) {
  -ms-grid-column: 2;
}
.bingo-box:nth-child(3) {
  -ms-grid-column: 3;
}
.bingo-box:nth-child(4) {
  -ms-grid-column: 4;
}
.bingo-box:nth-child(5) {
  -ms-grid-column: 5;
}
.bingo-box:nth-child(6) {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}
.bingo-box:nth-child(7) {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}
.bingo-box:nth-child(8) {
  -ms-grid-column: 3;
  -ms-grid-row: 2;
}
.bingo-box:nth-child(9) {
  -ms-grid-column: 4;
  -ms-grid-row: 2;
}
.bingo-box:nth-child(10) {
  -ms-grid-column: 5;
  -ms-grid-row: 2;
}
.bingo-box:nth-child(11) {
  -ms-grid-column: 1;
  -ms-grid-row: 3;
}
.bingo-box:nth-child(12) {
  -ms-grid-column: 2;
  -ms-grid-row: 3;
}
.bingo-box:nth-child(13) {
  -ms-grid-column: 3;
  -ms-grid-row: 3;
}
.bingo-box:nth-child(14) {
  -ms-grid-column: 4;
  -ms-grid-row: 3;
}
.bingo-box:nth-child(15) {
  -ms-grid-column: 5;
  -ms-grid-row: 3;
}
.bingo-box:nth-child(16) {
  -ms-grid-column: 1;
  -ms-grid-row: 4;
}
.bingo-box:nth-child(17) {
  -ms-grid-column: 2;
  -ms-grid-row: 4;
}
.bingo-box:nth-child(18) {
  -ms-grid-column: 3;
  -ms-grid-row: 4;
}
.bingo-box:nth-child(19) {
  -ms-grid-column: 4;
  -ms-grid-row: 4;
}
.bingo-box:nth-child(20) {
  -ms-grid-column: 5;
  -ms-grid-row: 4;
}
.bingo-box:nth-child(21) {
  -ms-grid-column: 1;
  -ms-grid-row: 5;
}
.bingo-box:nth-child(22) {
  -ms-grid-column: 2;
  -ms-grid-row: 5;
}
.bingo-box:nth-child(23) {
  -ms-grid-column: 3;
  -ms-grid-row: 5;
}
.bingo-box:nth-child(24) {
  -ms-grid-column: 4;
  -ms-grid-row: 5;
}
.bingo-box:nth-child(25) {
  -ms-grid-column: 5;
  -ms-grid-row: 5;
}