/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: rgba(255, 255, 255, 0.822);
  border: .05rem solid #fff;
}


/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #333;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.822);
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

.cover-container {
  max-width: 42em;
  background-size: 100% 100%;
}

img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}

/*
 * Header
 */
.masthead {
  margin-bottom: 2rem;
}

.masthead-brand {
  margin-bottom: 0;
}

.inner{
  position: relative;
  background-color: transparent;
    padding-top: 1rem;
}

.nav-masthead .nav-link {
  position: relative;
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}

/*
* Sudoku
*/
#content {
  width:"500";
  height:"500";
  margin:10px;
  font-size:1.25em;
  margin-left: 10%;
}

#gameupdate {
  width:"100";
  height:"50";
  margin:10px;
  font-size:1.25em;
  margin-left: 10%;
  color: white;
}

.sudoku-board {
  border-collapse:collapse;
	min-height: 22.75rem;
  margin-bottom: 1em;
}
/*cell (wrapper) contains both cell input and candidates div*/
.sudoku-board-cell {
	display: inline-block;
	position: relative;
	border: 1px solid #ddd;
	background: rgba(255, 255, 255, 0.822);
  max-width: 11.11111%;
  width:50px;
  height:50px;
  text-align:center;
}

/*.sudoku-board {
  border-collapse:collapse;
  border:1px solid #7f7f7f;
  background-color: white;
  color: black;
}
.sudoku-board-cell {
  border:1px solid #7f7f7f;width:50px;height:50px;text-align:center;
}*/

/*Buttons for Sudoku game*/

#gobutton {
  height: 40px;
  margin: 0.3rem;
  margin-left: 4%; 
  width:20%;
  padding: .5rem 1.25rem;
  font-weight: 700;
  height: 7%;
  border-radius: 10%;
}

#checkbutton {
  height: 40px;
  margin: 0.3rem; 
  margin-left: 3%;
  width:22%;
  padding: .2rem 1rem;
  font-weight: 700;
  height: 7%;
  border-radius: 10%;
}

#selector{
  margin: 0.2rem; 
  margin-left: 9.5%;
  width:20%;
  height: 40px;
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.822);
}

.btn-default{
  background-color: rgba(255, 255, 255, 0.822);
  color: black;
}

.btn-default:hover
{
  background-color: #7f7f7f;
  color: black;
}

/*rules for drawing the black lines dividing houses
			-- specific for board size 9! need diff rules for diff board sizes
	*/
	.sudoku-board .sudoku-board-cell:nth-of-type(9n+1){
		border-left-width: 2px;
		border-left-color: #808080;
	}
	/*.sudoku-board .sudoku-board-cell:nth-of-type(n):nth-of-type(-n+19){
		border-top-width: 2px;
		border-top-color: black;
  }*/
  
  .sudoku-board #sudoku-board-cell-bottom{
    /*.sudoku-board-cell-bottom{*/
    /* Original values*/
    border-top-width: 2px;
		border-top-color: black;
  }

	.sudoku-board .sudoku-board-cell:nth-of-type(3n){
		border-right-width: 2px;
		border-right-color: black;
  }

	.sudoku-board .sudoku-board-cell:nth-of-type(n+19):nth-of-type(-n+27),
	.sudoku-board .sudoku-board-cell:nth-of-type(n+46):nth-of-type(-n+54),
	.sudoku-board .sudoku-board-cell:nth-of-type(n+73):nth-of-type(-n+81){
		border-bottom-width: 2px;
		border-bottom-color: #808080;
	}

/*
* History
*/
.textBody{
  background-color: white;
  color: black;
  opacity: 0.9;
  border: 1rem solid #fff;
  border-radius: 5%;
}

/*Note*/
#note{
  margin-left: 10%;
}


/*
 * Cover
 */
.cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  position: relative;
  padding: .75rem 1.25rem;
  font-weight: 700;
}


/*
 * Footer
 */
.mastfoot {
  color: rgba(255, 255, 255, .5);
}

/* CSS For Mobile */
@media only screen and (max-width: 768px) {
    
    .cover-container {
    max-width: 42em;
    background: url("assets/img/vector/pattern.png") no-repeat fixed top;
    background-size: 100% 100%;
    overflow: auto;
    }
    
    
    /*cell (wrapper) contains both cell input and candidates div*/
    .sudoku-board-cell {
	    display: inline-block;
	    position: relative;
	    border: 1px solid #ddd;
	    background: rgba(255, 255, 255, 0.822);
        max-width: 11.11111%;
        width:50px;
        height:50px;
        text-align:center;
        font-size: 1rem;
    }
    
    #content {
      width:"500";
      height:"500";
      margin:10px;
      font-size:1rem;
      margin-left: 5%;
    }
    
    #gobutton {
      height: 45px;
      margin: 0.3rem;
      margin-left: 2%; 
      width:20%;
      padding: 0.2rem 0.2rem;
      font-weight: 700;
      border-radius: 10%;
      font-size: 0.8rem;
      text-align: center;
    }
    
    #checkbutton {
      height: 45px;
      margin: 0.3rem; 
      margin-left: 2%;
      width:22%;
      padding: 0.2rem 0.2rem;
      font-weight: 700;
      border-radius: 10%;
      font-size: 0.8rem;
      text-align: center;
    }
    
    #selector{
    margin: 0.2rem; 
    margin-left: 0%;
    width:35%;
    height: 45px;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.822);
    font-size: 1rem;
    }

    .btn-default{
    background-color: rgba(255, 255, 255, 0.822);
    color: black;
    }

    .btn-default:hover
    {
    background-color: #7f7f7f;
    color: black;
    }

    /*rules for drawing the black lines dividing houses
			-- specific for board size 9! need diff rules for diff board sizes*/
	.sudoku-board .sudoku-board-cell:nth-of-type(9n+1){
		border-left-width: 2px;
		border-left-color: #808080;
	}
  
  .sudoku-board #sudoku-board-cell-bottom{
    /*.sudoku-board-cell-bottom{*/
    /* Original values*/
    border-top-width: 2px;
		border-top-color: black;
  }

	.sudoku-board .sudoku-board-cell:nth-of-type(3n){
		border-right-width: 2px;
		border-right-color: black;
  }

	.sudoku-board .sudoku-board-cell:nth-of-type(n+19):nth-of-type(-n+27),
	.sudoku-board .sudoku-board-cell:nth-of-type(n+46):nth-of-type(-n+54),
	.sudoku-board .sudoku-board-cell:nth-of-type(n+73):nth-of-type(-n+81){
		border-bottom-width: 2px;
		border-bottom-color: #808080;
	}
	
	/*Note*/
    #note{
        margin-left: 5%;
    }

}

/* CSS For Tablet */
@media only screen and (max-width: 992px) and (min-width: 769px) {
    .cover-container {
    max-width: 42em;
    background: url("assets/img/vector/pattern.png") no-repeat fixed top;
    background-size: 100% 100%;
    overflow: auto;
    }
}