body {
    text-align: center;
    line-height: 160%; 
    font-size: 16px;  
    margin: 0;  
    padding: 0;
    background-color: white;
    font-family: Georgia, arial, sans-serif;
}

a:link { color: #141DFF; text-decoration: none;}
a:visited{ color: #141DFF; }
a:hover {text-decoration: underline; background-color: #98ffff;}

/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: #0e005e;
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    z-index: 999;
    border-style: solid;
    border-width: 0px;
    border-bottom-width: 2px;
    border-bottom-color: #0e005e;
    /* position:fixed; */
}

/* Links inside the navbar */
.navbar a {
    display: block;
    color: white;
    text-align: center;
    padding: 7px;
    text-decoration: none;
    font-size: 26px;
    font-weight: bold;
    font-family: "Open Sans", Consolas, monaco, monospace; 
}
  
/* Change background on mouse-over */
.navbar a:hover {
    background: white;
    color: #0e005e;
}

sup {
    height: 0; 
    line-height: 1; 
    position: relative; 
    vertical-align: baseline; 
    bottom:1ex;
}

p { font-size: 20px;}
span { font-size: 20px;}
li { font-size: 20px; margin-bottom: 20px;}

h1 { font-size: 48px; margin: 40px 10px 30px 10px; font-weight: bold; line-height: 45px;}
h2 { font-size: 32px; margin: 10px 10px 30px 10px; font-weight: bold; }
h3 { font-size: 18px; margin: 10px 10px 15px 10px; font-weight: normal; }
h4 {font-size: 16px; margin: 5px 0px 0px 0px;}
article { text-align: left; width: 90%; margin: 0 auto;}

@media only screen and (min-width: 768px) {
  article { text-align: left; width: 50%; margin: 0 auto;}
  h1 { font-size: 52px; margin: 40px 10px 30px 10px; font-weight: bold; line-height: 45px;}
  h2 { font-size: 36px; margin: 10px 10px 30px 10px; font-weight: bold;}
  h3 { font-size: 22px; margin: 10px 10px 15px 10px; font-weight: normal;}
  h4 {font-size: 20px; margin: 5px 0px 0px 0px;}
}

a:link.bylineLink { color: #141DFF; text-decoration: none;}
a:visited.bylineLink { color: #141DFF; }
a:hover.bylineLink {color: #0e005e; text-decoration: underline;}

::-moz-selection { /* Code for Firefox */
    background: #98ffff;
    color: #0e005e;
}
::selection {
    background: #98ffff;
    color: #0e005e;
}

path{
    fill: none;
    stroke: #181818;
}
.axis { font: 16px sans-serif; fill: #181818;}
.axis text{
    fill: #181818;
}
.tick line{
    stroke: #181818;
    stroke-width: 2px;
}

/* layout CSS */

.container{
    margin: auto;
    width: 75vw;
    margin-top: 50px;
    /* height: 100vh; */
    /* font-size: 0px; */
}
.box{
    text-align: center;
    display:inline-block;
    vertical-align: top;
    width: 60vh;
    /* height: 51vh; */
}
.half_box{
    text-align: center;
    display:inline-block;
    vertical-align: top;
    width: 60vh;
    /* height: 30vh; */
}


/* ***************** */

/* Heatmap CSS */

.heatmap_axis { font: 16px sans-serif; stroke-width: 0;}
.heatmap_axis line {stroke-width: 0;}
.heatmap_axis text{ fill: #181818;}

.square{
    stroke: black;
    /* opacity: 0.5; */
}

.heatmapLabels {
    text-anchor: middle;
    alignment-baseline: central;
    pointer-events: none;
}

.colorText{    
    text-anchor: middle;
    alignment-baseline: central;
    pointer-events: none;
    visibility: hidden;
    font-weight: bold;
    text-shadow:
    -1px -1px 4px white,  
     1px -1px 4px white,
     -1px 1px 4px white,
      1px 1px 4px white;
}

.redText{
    fill: red;
    text-shadow:
    -1px -1px 4px black,  
     1px -1px 4px black,
     -1px 1px 4px black,
      1px 1px 4px black;
}
.blueText{
    fill: blue;
}
.yellowText{
    fill: yellow;
    text-shadow:
    -1px -1px 4px black,  
     1px -1px 4px black,
     -1px 1px 4px black,
      1px 1px 4px black;
}
.greenText{
    fill: green;
}

/* ************************** */

/* Points Timeplot and Pieces Scatterplot CSS */
.curtain{
    fill: white;
}

.redline {
    fill: none;
    stroke: rgb(191, 59, 67);
    stroke-width: 4px;
}
.blueline {
    fill: none;
    stroke: rgb(65, 133, 191);
    stroke-width: 4px;
}
.yellowline {
    fill: none;
    stroke: rgb(192, 149, 38);
    stroke-width: 4px;
}
.greenline {
    fill: none;
    stroke: rgb(78, 145, 97);
    stroke-width: 4px;
}
.yxline{
    fill: none;
    stroke: #181818;
    stroke-width: 1.5;
    stroke-dasharray: 10;
    opacity: 1;
}

.axis_label{
    fill: #181818;
    font-size: 20px;
    text-anchor: middle;
    font-weight: bold;
}


line{
    stroke-width: 4px;
}

/* ********************* */

/* replica game board and pieces css */

.gameboard{
    stroke: black;
    fill: gray;
}

/* ********************* */

/* collapsible */

.sidebar {
    width: 10%;
    position: sticky;
    z-index: 1;
    top: 5px;
    left: 5px;
    background-color: whitesmoke;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 20px;
    vertical-align: top;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 10px;
}
  
.content_holder {
    width: 100%;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.openbtn {
    left: 0;
    top: 43%;
    position: fixed;
    font-size: 20px;
    cursor: pointer;
    background-color: white;
    color: black;
    border: 1px solid black;
    border-left: 0px;
    padding: 5px;
}
.openbtn:hover {
    background-color: lightcyan;
    color: #0e005e;
}
.closebtn:hover{
    background-color: rgba(245, 245, 245, 0);
}

.replayButton{
    padding: 5px;
    margin-left: 5px;
    margin-right: 5px;
    color: black;
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
}

input{
    cursor: pointer;
}
select{
    cursor: pointer;
}

  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
  }


/* captured container graphic */

.capturedContainer{
    margin: auto;
    width: 75vw;
    margin-top: 75px;
    margin-bottom: 100px;
}

.capturedSection{
    top: 0;
    display: inline-block;
    border: 1px black solid;
    background-color: rgba(245, 245, 245, 0.5);
    width: 16vw;
    min-height: 100px;
}
.capturedSection h4 {
    font-weight: normal;
}

.captured_img{
    float: left;
}

/* css for annotations */
g.annotation-connector{
    stroke-width: 2px;
}
path.connector-end.connector-arrow{
    fill: lightcyan;
    stroke: 3px;
}
.show-bg{
    font-size: 18px;
    /* font-weight: bold; */
}
.annotationBackground{
    fill: lightcyan;
    rx: 5;
    ry: 5;
    stroke: black;
}

/* dynamic text stuff */
.sectionTitle{
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin: auto;
    margin-top: 50px;
}
.section{
    font-style: italic;
    font-size: 22px;
    margin-bottom: 5px;
}
.dynamicText{
    margin-top: 0;
}

.piecesMovedSpan{font-size: 18px;}


table {
    font-family: Georgia, Arial, sans-serif;
    border-collapse: collapse;
    width: 50%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 100px;
    background-color: white;
}
  
td, th {
    text-align: left;
    padding: 10px;
    border: 1px solid black;
    border-collapse: collapse;
}

tr:hover{
    background-color: lightcyan;
}

.scatterCircle{
    r: 12;
}

/* mobile css */
@media only screen and (max-width: 768px) {
    .container{
        width: 100%;
    }
    .box{
        width: 100vw;
    }
    .half_box{
        width: 100vw;
    }

    .annotations{
        display: none;
    }

    .sidebar{
        width: 65%;
    }

    .scatterCircle{
        r: 8;
    }

    .capturedContainer{
        margin: auto;
        width: 95vw;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    
    .capturedSection{
        top: 0;
        display: inline-block;
        border: 1px black solid;
        background-color: white;
        width: 90vw;
        min-height: 100px;
    }
}