.header {
    background-image: linear-gradient(to right, #282828 , #171717);
 
 }
 
 .header1 {
 background-image: url('https://www.123freevectors.com/ezoimgfmt/i2.wp.com/files.123freevectors.com/wp-content/original/131382-abstract-grey-and-white-polygon-pattern-background-illustration.jpg?ezimgfmt=rs%3Adevice%2Frscb3-1&q=95&w=800')
 }
 
 h1 {
  font-size: 45px;
 }
 
 
 body{
                    font-family: Arial, Helvetica, sans-serif;
 color:white;
 width:1500px;
  
 }
 
 button:active{
 background-color: #353839;
 }
 
 button {
  
   
                    box-shadow: 1px 1px 2px 1px rgba(154, 154, 35, 0.8);
 
 
 }
 h1.serif {
   font-family: Arial, Helvetica, sans-serif;
 }
          
 html {
 margin-right: 60px;
 margin-left: 60px;
  color: white;
  margin-top: -8px;
 
 /*  border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;*/
 }
 
 
 
 
 
 .button {
 background-color: rgb(74, 174, 25); 
 border: none;
 color: white;
 padding: 10px 26px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 2px;
 
  
 }
 .buttonclick {
 background-color: rgb(80, 151, 29); 
 border: none;
 color: white;
 padding: 10px 26px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 2px;
 width:300px;
 height:100px;
 box-shadow: 1px 1px 2px 1px rgba(81, 135, 15, 0.8);
 }
 .buttonclick:active {
 background-color: rgb(80, 151, 29); 
 border: none;
 color: white;
 padding: 10px 26px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 2px;
 width:300px;
 height:100px;
 box-shadow: 1px 1px 2px 1px rgba(81, 135, 15, 0.8);
 
 }
 
 .button4 {
 background-color: DimGray; 
 border: none;
 color: white;
 padding: 10px 26px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 2px;
 }
 
 .buttonsde {
 background-color: #A9A9A9; 
 border: none;
 color: white;
 padding: 10px 26px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 2px;
 }
 
 .button1 {
 background-color: white; 
 border: none;
 color: black;
 padding: 10px 10px;
 text-align: center;
 text-decoration: none;
 display: inline-block;    
 font-size: 16px;
      margin: 2px;
 
 }
 
 .buttonrdd {
 background-color: grey; 
 border: none;
 color: white;
 padding: 10px 10px;
 text-align: center;
 text-decoration: none;
 display: inline-block;    
 font-size: 16px;
  width: 80px;
  border-radius: 0px;
  
  
  
 }
 
 
 .title {
 font-family: "Times New Roman", Times, serif;
 }
 
 .r3 {
 background-color: blue; 
 border: none;
 color: black;
 padding: 10px 19.5px;
 text-align: center;
 text-decoration: none;
 display: inline-block;    
 font-size: 16px;
      margin: 2px;
 }
 
 .r4 {
 background-color: blue; 
 border: none;
 color: black;
 padding: 10px 18.3px;
 text-align: center;
 text-decoration: none;
 display: inline-block;    
 font-size: 16px;
      margin: 2px;
 }
 
 
 a {
 font-size: 18px;
 color: navy;
 
 }
 a:hover {
  
  
  text-decoration: underline;
 }
 
 .footlnk {
      background: cornflowerblue;
  padding: 20px;
  text-decoration: none;
  
 }
 
 ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
  background-color: #333;
  width: 1500px;
 }
 
 li {
 float: left;
 }
 
 li a {
 display: block;
 color: white;
 text-align: center;
 padding: 18px;
 text-decoration: none;
 }
 
 li a:hover:not(.active) {
 background-color: #111;
 }
 
 .activated {
 background-color: green;
 }
 
 dropbtn {
 color: white;
 padding: 16px;
 font-size: 16px;
 border: none;
 }
 
 .dropdown {
 position: relative;
 display: inline-block;
 }
 
 .dropdown-content {
 display: none;
 position: absolute;
 min-width: 	60px;
 min-height: 38px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
 }
 
 .dropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 }
 
 
 
 
 
 .dropdown:hover .dropdown-content {display: block;}
 
 
 
 
 html {
 zoom:100%;
 }
 .memory {
 justify-content: space-between;
 display: inline;
     top:-20px;
  
 }
 
 p {
  font-size: 18px;
 }
 
 
 
 .blockquote {
  
  
  background: cornflowerblue;
  padding: 30px;
  width: 180px;
 }
 
 .socialicon {
  clip-path: circle();
 
  
  
 }
 
 
 
 .navname {
 font-size: 24px;
 
 }
 
 
 
 
 .buttonnav {
   background-color: grey; 
 border: none;
 color: white;
 padding: 15px 30px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 18px;
 margin: 2px;
  width: 128px;
  
 }
 
 .seperator {
  background: cornflowerblue;
  width: 200px;
  height: 6px;
  margin: 15px;
 }
 
 
 
 
 .toolbar {
  padding: 8px;
  width: 600px;
  background: grey;
  
 }
 
 .banner {
  padding: 8px;
  background: dimgray;
  height: 60px;
 }
 
 .container {
 background: rgb(43, 223, 157);
  color: black;
  width: 1100px;
  height:900px;
  text-align:center;
  margin-left:200px;
  border-radius: 7px;
  padding:7px;
  box-shadow: 0px 8px 15px 0px rgb(66, 132, 64);
 }
 input[type="number"] {
 font-size: 20px; 
  width: 90px;
  height: 35px;
 }
 

 
 #output {
 width: 300px;
 height: 140px;
 resize: none;
 font-size: 20px;
 color: blue;
 }
 
 #results {
 background:rgb(50, 186, 66);
 width:300px;
 border-radius:8px;
 height:110px;
 box-shadow: 0x 6px 8px 0px rgb(66, 132, 64);
 margin:0px;
 padding:7px;
 
 }
 
 #inputs {
 width:250px;
 height:100px;
 resize:none;
 }
 
 .in {
 width:230px;
 height:30px;
 }

 
 .bord {
 background:#292929;
 width:110px;
 height:3px;
 }
 .bord1 {
 background:#292929;
 height:106px;
 width:3px;
 }
 
 .filled {
 background:rgb(203, 213, 228);
 }
 
 .hidden {
 display:none;
 }
 
 
 .S2 {
 margin-right:-230px;
 margin-top:-322.5px;
 }
 .S3 {
 margin-right:230px;
 margin-top:-322.5px;
 }
 .B1 {
 margin-right:-116px;
 margin-top:-322px;
 }
 .B2 {
 margin-right:116px;
 margin-top:-322px;
 }
 

 
 
 select {
 background:rgb(230, 230, 251);
 border:none;
 box-shadow:0px 1px 2px 1px rgb(139, 111, 111)
 }
 

 
 .tab2{
 width:350px;
 background:rgb(170, 243, 202);
 font-size:20px;
 box-shadow:2px 3px 4px 2px rgba(136, 254, 140, 0.789)
 }
 
 .numpad {
 width:50px;
 height:50px;
 }
 
 .titlem {
 font-size:45px;
 } 
 
 #board {
 width:400px;
 }
 
 .grid0 {
  width:40px;
  height:40px;
 
  background: rgb(41, 177, 41);
  
  
 }
 
 
 
 
 

 
 
 
 
 
 .boxed2 {
    background:#07ac0f;
    width:300px;
    height:100px;
 }


 .bar {
     background:#07ac0f;
     width:560px;
     height:70px;

 }


 .red_peice {

 }

 .blue_peice {

 }


 .blue_peice_filled {

 }

 .red_peice_filled {

 }

 .selectDisable {
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -o-user-select: none;
     user-select: none;
 }
 
.exit_button {
  float:left;
  font-size:29px;
  background:none;
  border:none;
  box-shadow:none;
}




 .popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.exit_button {
  float:left;
  font-size:29px;
  background:none;
  border:none;
  box-shadow:none;
}

/* The actual popup */
 #popup {
  width: 360px;
  height:400px;
  background-color: rgb(10, 255, 190);
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -130px;
  margin-bottom:-1000px;
}

#popup1 {
  width: 360px;
  height:400px;
  background-color: rgb(1, 175, 194);
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -130px;
  margin-bottom:-800px;
}
 
.fall {
  animation-name: fall-animation;
  animation-duration: 500ms;
}

@keyframes fall-animation {
  from {
      transform: translateY(0px);
  }
  to {
      transform: translateY(480px);
  }
}

.button {
  background-color: rgb(74, 174, 25); 
  border: none;
  color: white;
  padding: 10px 26px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px;
  
   
  }

  .box {
    background-color:aqua;
    margin:0px;
    width:100px;
    height:100px;
    border-style:groove;
    border-width:3px;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    font-size:50px;
    cursor:pointer;
    user-select: none;
    -moz-user-select: none;
  }

 
  td{
    border: 2px solid #333;
    height: 160px;
    width: 160px;
    background-color: aqua;
    text-align: center;
    vertical-align: middle;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 70px;
    cursor: pointer;    
}

table{
    border-collapse: collapse;
    display:inline-block;
}