/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}


/* GENERAL STYLING FOR THE BODY SECTION */
body {
	font-family: 'Montserrat', sans-serif;
	background-color: #fcf2d2;
	background-image: url(images/honeycomb2-34984.jpg);
	background-repeat: repeat;
	margin: auto;
}
 

 /* NAVBAR - All pages */
nav {
	margin-bottom: 1em;
}

h1, h2, h3 {
	display: block;
	margin-left: auto;
	margin-right: auto;
	font-weight: 900;
	color: #4285F4;
	size: 50%;
}

.btn {
	min-width: 150px;
}


/* HOME Screen (index.html) */
#rpg_dice {				/* Image of a pile of dice on home page */
	padding-top: .5rem;
	max-width: 20%;
}

/* ROLL DICE Screen */

input::placeholder {
	font-size: .7rem;
}

label {
	font-size: .7rem;
	padding-left: .2rem
}

#dice_combos {
	margin-top: 0;
	max-width: 90%
}

.dice_input {
	margin-left: 10%;
}

.dice_group {
	width: 65%;
	padding: .1rem;
}

.comboResults{
	min-width: 85%;
}

#Result_1, #Result_2, #Result_3 {
	font-size: .8rem;
	padding: 0;
}

.buttons, .dice_images {
	text-align: center;
	align-content: center;
	margin: auto;
	width: 45%;
	height: 15%;
}

.dice_images  {
	background-color: white;
	border: 1px solid black;
	text-align: center;
	align-content: center;
	margin: auto;
}

.dice_images {				/* This is the box containing all the dice images */
	margin-top: 1%;
	padding: 1%;
	min-width: 75%;
	max-height: 30vh;
}

/* styling of the individual dice images */
input.btTxt.submit.diceImg {
	max-height: 10vh;
}

#customSides {  /* The "custom-sided die" */
	display: none;
	max-width: 5rem;
	margin-top: 1rem;
}

#noSides {
	display: none;
	max-width: 5rem;
	margin-top: .25rem;
	margin-bottom: 0;
}
#addCustom {		   /* This is supposed to be a button but the sizing wouldn't cooperate. */
	display: none;
	max-width: 10rem;
	padding: 0;
	margin: 0;
	background: aquamarine;
}
.comboResults {
	display:  inline-block;
	background: #B3E5FC;
	margin: 2%;
	border: 1px solid black;
	padding: .25rem;
	max-width: 60%;
}

label {
	min-width: 5rem;
	text-align: left;
	padding-left: .25rem;
}

.active {
  background-color: #81D4FA;
  color: black;
}

#dieRoll_button, #reRoll_button {
	margin-top: 1rem;
}

#reRoll_button {
	display: none;
}

/* ENHANCED FEATURE LIST */
.ulist {
	background-color: lightyellow;
	font-weight: 400;
	font-size: 1em;
	padding-left: 2%;
	margin: 1% 10% 2.5% 10%;
}

/* GET IT NOW TEXT */
.get-it {
	font-weight: 900;
	font-size: 1.5rem;
	color: #4285F4;
}

#googleplay {
	max-width: 50%;
}

/* CONGRATULATIONS SCREEN */
.congratulations {
	background-color: lightyellow;
	background-image: none;
}


.congratulations h2 {
	text-align: center;
	color: white;
	background-color: blue;
	padding-top: 1%;
	padding-bottom: 1%;
}

.card-header{
	background-color: blue;
	color: white;
	text-align: center;
}

.card-body {
	background-color: lightgray;
	text-align: center;
	padding-top: 5%;
}

.card-body btn {
	width: 30%;
}

.check_circle {
	text-align: center;
}
.fa-check-circle {
	size: 9x;
	color: blue;
	padding-bottom: 10%;
}

.go_home {
	text-align: center;
	background-color: blue;
	padding-top: 1%;
	padding-bottom: 1%;
}

/* BUTTONS */

/* Styling for button group links */

.btn-group-vertical {
	text-align: center;
	align-content: center;
	font-size: .4rem;
	max-width: 50%;
	max-height: 2rem;
	margin: auto;
	width: inherit;
	display: block;
}


.btn-group-vertical > a {
	margin-top: 1rem;
    margin-bottom:10px;
    border-radius:10px !important;
    padding: 2% 4%;
	font-size: .8rem;
}

#tutorial_button {
	background-color: orange;
	border-color: orange;
}

#tutorial_button:focus, #tutorial_button:hover, #tutorial_button:active {
	background-color: darkorange;
}

/* Styling for the "Roll Some Dice!" button */
#rolldice {
	padding: .5rem;
}

/*
TESTING TESTING*/
#Result_1, #Result_2 {
  resize: none;
  width: 400px;
  min-height: 2rem;
  padding: 5px;
  overflow: hidden;
  box-sizing: border-box;
}

#testbuttons {
	display: block;
}