body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}*{overflow:hidden;font-family:"Source Sans Pro",sans-serif}body{background-color:#f5f5f5}#title_screen{display:block;z-index:1}#checkers_canvas{width:3840px;height:300px;position:absolute;bottom:0}#title{grid-area:title;text-align:center;margin:1em 0 .5em;font-size:4em;color:#c26969;font-family:"Source Sans Pro",sans-serif;font-weight:200;letter-spacing:.05em}#title:first-letter{color:#686565}#button{display:grid;width:170px;height:10vh;min-height:50px;margin-left:auto;margin-right:auto;margin-top:2em;align-self:center;color:#fff;align-content:center;font-size:1.5em;transition:color .6s;background:#434343;text-align:center}#exitButton{width:50px;height:50px;position:absolute;top:0;right:0;cursor:pointer}#button:hover{color:#c26969;cursor:pointer}#modalscreen{display:none;position:absolute;top:0;left:0;bottom:0;right:0;height:100vh;width:100vw;background-color:rgba(0,0,0,.5);z-index:15;align-items:center;justify-content:center}#modal{width:80vw;min-height:240px;background:#f2f2f2;border-radius:0 0 10px 10px;border-bottom:20px solid #c26969;z-index:20}#modal,#modalForm{display:flex;flex-direction:column}#onlineButtons{display:none;flex-direction:row;justify-content:space-around}#nameLabel{color:#686565;font-size:2.4em;margin:.5em .7em;overflow:visible}input[type=text]{width:80%;height:50px;margin-left:.9em;font-size:2em;border:none;transition:border .1s}input[type=text]:focus{border-top:3px solid #c26969;outline-width:0}.submit{width:40%;align-self:center;margin-top:1em;margin-bottom:1em;height:60px;background:#434343;border:none;color:#fff;text-transform:uppercase;font-size:1.5em;letter-spacing:1px;transition:color .2s}.submit:hover{cursor:pointer;color:#c26969}#enter{font-size:1em;display:none;margin-top:5em}#checkers_game{display:none;height:100vh;grid-template-columns:3fr 1fr;grid-template-rows:1fr 3fr 1fr;grid-template-areas:"score score" "board board" "menu menu"}#score{grid-area:score;display:flex;width:100vw;flex-direction:row;justify-content:space-between;text-align:center;margin:auto;color:#515151}.players{margin-top:1em;font-weight:200;font-family:"Source Sans Pro"}.players h2{font-size:3em;margin:0 1em}.players h3{font-size:1.5em;margin:0}#board_section{grid-area:board;justify-content:center;align-content:center}#board_section,.board{display:flex;flex-direction:row}.board{width:85vw;height:85vw;position:absolute;flex-flow:row wrap}.space{height:12.5%;width:12.5%}.space1{background-color:#bca377}.space2{background-color:#fff}.highlight{background-color:#d0d6e0}.piece{height:12.5%;width:12.5%;z-index:2;position:relative;border-radius:100%;background-color:#434343;position:absolute;left:0;top:0;transition:left .5s,top .5s;justify-content:center}.player1{background-color:#c26969}.player2{background-color:#434343}.player1active{background-color:#7a3939}.player2active{background-color:#2b2b2b}.king1{background:#c26969}.king2{background:#434343}#footer{display:flex;flex-direction:row;grid-area:menu}.gam_buttons{width:60px;height:60px;border-radius:.5em;background:#fff;margin:2em 1.5em;cursor:pointer;text-align:center}#end_screen{display:flex;flex-direction:column;justify-content:space-between;background:#fff;width:100vw;height:25vh;position:absolute;top:0;min-height:200px;transition:top 1s;padding:0 0 10px 10px;z-index:20;margin-left:auto;margin-right:auto;left:0;right:0}#text_container{width:100%;margin:2em 0 0}#text_container>h1{margin:0;font-size:3.5em;font-weight:200;line-height:90%;letter-spacing:3px}#text_container>h3{margin:0 0 0 .2em;font-weight:200;line-height:90%}#buttons{display:flex;width:100%;justify-content:flex-start}#buttons>#button{min-height:20px;height:30px;width:20vw;font-size:.75em;padding:auto;margin:10px}.circle{right:0;position:absolute;height:100%;box-shadow:-10px 0 14.886px .114px rgba(0,0,0,.35)}#circle1{background-color:#c26969;width:20vw}#circle2{background-color:#434343;width:10vw}@media (min-width:500px){#title{font-size:6em}#buttons>#button{width:18vw;height:50px;font-size:.95em}#end_screen{height:20vh;padding:0 0 10px 10px}#text_container>h1{font-size:5.5em}#checkers_game{grid-template-columns:3fr 1fr;grid-template-areas:"board score" "board score" "menu menu"}#score{width:100%}#board_section,#score{flex-direction:column}.board{height:70vw;width:70vw;align-self:center;max-width:500px;max-height:500px}}@media (min-width:1000px){#title{font-size:7em;letter-spacing:.1em}#end_screen{height:35vh;width:70vw;padding:0 0 15px 15px}#text_container>h1{font-size:7em}#text_container>h3{font-size:2em}#buttons>#button{width:12vw}#modal{width:40vw}.board{height:60vw;width:60vw;align-self:center}.players h2{font-size:5em}.players h3{font-size:3em}#score{justify-content:space-between;height:60vw;max-height:500px}}@media (min-width:1300px){.board{height:50vw;width:50vw;max-width:500px;max-height:500px}.players h2{font-size:5em}.players h3{font-size:3em}}@media (min-width:1500px){#title{font-size:8em}#modal{width:30vw}}@media (min-width:1920px){#title{font-size:9em}#button{width:250px;font-size:2em}#buttons>#button{width:210px;height:70px;font-size:2em}#end_screen{height:35vh;width:70vw}#modal{width:20vw}#text_container>h1{font-size:11em}.board{max-width:700px;max-height:700px}}@media (min-width:2560px){#title{font-size:15em;margin-top:5%}#button{font-size:2.5em;width:400px}}@media (min-width:3840px){#title{font-size:20em;margin-top:10%}#button{width:500px;font-size:4em}}