html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body,html{
	overflow-x:hidden;
	overflow-y:hidden;
}

.unhide{
	display:block !important;
}

.cards{
	width:100px !important;
}

body{
	background-image:url(images/table.png);
	background-size:cover;
	color:white;
	font-family: "Nunito", sans-serif;
	user-select:none;
}

input,button{
	font-family: "Nunito", sans-serif;
}

header{
	position:absolute;
	top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Take up entire screen height */
    background-color: #333;
    color: #fff;
    text-align: center;
    transition: height 1.5s ease, border-bottom-right-radius .5s linear 1.1s, border-bottom-left-radius .5s linear 1.1s;
    z-index: 999;
}

header.minimized {
	height:100px;
	border-bottom-right-radius:100px;
	border-bottom-left-radius:100px
}

#flexAlign{
	height:100vh;
	width:100vw;
	display:table-cell;
	vertical-align:middle;
	transition:1s;
}

#flexAlign.minimized{
	height:100px;
}

#minimize{
	margin-top:40px !important;
}

#minimize.minimized{
	border:transparent;
	background-color:transparent;
	color:transparent;
	cursor:default;
}

#minimize.none{
	display:none;
}

#options{
	transition:.5s;
}

#options.minimized{
	border:transparent;
	background-color:transparent;
	color:transparent;
	cursor:default;
}

#options.none{
	display:none;
}

#exit{
	margin-bottom:30px !important;
	transition:.5s;
}

#exit.minimized{
	border:transparent;
	background-color:transparent;
	color:transparent;
	cursor:default;
}

#exit.none{
	display:none;
}

#flexAlign button {
	margin-top:10px;
	margin-bottom:4px;
	padding:7px 0px;
	font-size:28px;
	font-weight:bold;
	border-radius:15px;
	border:solid black 5px;
	transition:.5s;
	width:17%;
}

.hover:hover{
	background-color:rgb(131, 129, 129);
	cursor:pointer;
}

#homeText{
	font-size:70px;
	transition:2.5s;
}

#homeText.smaller{
	margin-top:20px;
	font-size:50px;
}

#center,#dealerContainer{
	text-align:center;
	margin:auto;
	opacity: 0;
	max-height:0;
	width:100%;
	transition:.5s;
	z-index:999;
}

#center.reveal{
	opacity:1;
	max-height:100000px;
}

#dealerContainer.reveal{
	opacity:1;
	max-height:100000px;
}

#youHave, #dealerHas{
	font-size:30px;
	margin-top:30px;
	font-weight:bold;
}

#left{
	font-weight:bold;
	margin-top:30px;
	font-size:30px;
	width:100%;
	margin:auto;
	transition:2s;
}

#bet{
	font-size:18px;
	border:solid black 3px;
	padding:10px 0px 10px 3px;
	border-radius:10px;
	width:30%;
	margin-top:30px;
}

#makeBet{
	margin:15px 0px;
	text-align:center;
	padding:5px 0px;
	width:32%;
	border-radius:10px;
	border:solid black 3px;
	transition:.5s;
}

#makeBet.cursor{
	pointer-events:none;
}

#makeBet:hover{
	cursor:pointer;
	background-color:rgb(194, 194, 194);
}

#centerAnim{
	text-align:center;
	width:30%;
	padding-left:35%;
	padding-right:35%;
	transition: opacity 1s, padding 1.5s;
	position:absolute;
	z-index:998;
}

#centerAnim.move{
    padding:0;
	opacity:0;
}

#startGame{
	padding:5px 0px;
	width:32%;
	border-radius:10px;
	border:solid black 3px;
	transition:.5s;
	pointer-events: none;
}

#startGame.cursor{
	pointer-events:all;
}

#startGame:hover{
	cursor:pointer;
	background-color:rgb(194, 194, 194);
}

#option,#hitStand,#option2{
	font-size:30px;
	font-weight:bold;
	margin:15px 0px;
	transition:1.5s;
}

#buttonsContainer{
	display:none;
}

#buttonsContainer.show{
	display:block;
}

#hit,#stand{
	margin:15px 0px;
	text-align:center;
	padding:5px 0px;
	width:5%;
	border-radius:10px;
	border:solid black 3px;
	transition:.5s;
	pointer-events:none;
}

#doubleDown{
	margin-bottom:15px;
	text-align:center;
	padding:5px 0px;
	width:10%;
	border-radius:10px;
	border:solid black 3px;
	transition:.5s;
	pointer-events:none;
}

#hit:hover,#stand:hover,#doubleDown:hover{
	cursor:pointer;
	background-color:rgb(194, 194, 194);
}

#hit.cursor{
	pointer-events:all;
}

#stand.cursor{
	pointer-events:all;
}

#doubleDown.cursor{
	pointer-events:all;
}

#card1{
	opacity:0;
	transition:.3s;
}

#card1.appear{
	opacity:1;
}

#card2{
	opacity:0;
	transition:.3s;
}

#card2.appear{
	opacity:1;
}

#card3{
	opacity:0;
	transition:.3s;
}

#card3.appear{
	opacity:1;
}

#card4{
	opacity:0;
	transition:.3s;
}

#card4.appear{
	opacity:1;
}

#card5{
	opacity:0;
	transition:.3s;
}

#card5.appear{
	opacity:1;
}

#card6{
	opacity:0;
	transition:.3s;
}

#card6.appear{
	opacity:1;
}

#card7{
	opacity:0;
	transition:.3s;
}

#card7.appear{
	opacity:1;
}

#card8{
	opacity:0;
	transition:.3s;
}

#card8.appear{
	opacity:1;
}

#card9{
	opacity:0;
	transition:.3s;
}

#card9.appear{
	opacity:1;
}

#card10{
	opacity:0;
	transition:.3s;
}

#card10.appear{
	opacity:1;
}

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#footerIdent{
    bottom:0;
	padding-top:2%;
	padding-bottom:2%;
	background-color:rgb(202, 202, 202);
	border-top-right-radius:100px;
	border-top-left-radius:100px;
	outline:solid black 8px;
	width:60%;
	text-align:center;
	margin-left:20%;
	margin-right:20%;
	transition:.5s;
	user-select:none;
	position:absolute;
}

.chips{
	width:18%;
	margin:0px 2% 30px 2%;
	cursor:pointer;
	transition:.3s;
	position:relative;
	user-select:none;
	max-height:200px;
}

.hide{
	max-height:0;
	opacity:0;
	transition:.5s;
}

.chips:hover{
	filter:brightness(.9);
	scale:115%;
}

.disable{
	pointer-events:none;
}

.click{
	transition:.3s;
	transform:translateY(-300px);
	opacity:0;
}

.notransition{
	transition:0s transform, .3s opacity;
}

#chooseBet{
	color:black;
	font-size:45px;
	max-height:100px;
	transition:.5s;
}

#orType{
	margin-top:-10px;
	color:black;
	font-weight:700;
	max-height:100px;
	transition:.5s;
}

#orType.hide{
	opacity:0;
	max-height:0;
}

#chooseBet.hide{
	opacity:0;
	max-height:0;
}

#hr1.hide{
	opacity:0;
}

#footerIdent.change{
	padding:0;
	opacity:0;
}

#hr1{
	width:40%;
	border:none;
	background-color:black;
	height:3px;
	margin-bottom:20px;
	transition:.3s;
}

#adding{
	background-color:rgb(82, 82, 211);
	color:white;
	border-radius:3px;
	padding:0px 20px;
	transition:.3s;
	max-height:100px;
}

#subtracting{
	background-color:white;
	color:black;
	border-radius:3px;
	padding:0px 20px;
	transition:.3s;
	max-height:100px;
}

#adding:hover,#subtracting:hover{
	filter:brightness(.85);
	cursor:pointer;
}

#adding.switch{
	background-color:white;
	color:black;
}

#subtracting.switch{
	background-color:rgb(82, 82, 211);
	color:white;
}

#adding.hide,#subtracting.hide{
	max-height:0;
	margin:0;
	opacity:0;
}

#youLose{
	position:absolute;
	background-color: #4f4f4f;
	border-radius:10px;
	outline:solid rgb(0, 0, 0) 8px;
	height:40%;
	width:40%;
	margin-left:30%;
	margin-right:30%;
	text-align:center;
	z-index:999;
	transition:1.5s;
	top:200%;
}

#youLose.display{
	top:25%
}

#youLose h3{
	margin-top:40px;
	margin-bottom:30px;
	color:rgb(255, 255, 255);
	font-size:50px;
}

#loseRestart,#loseQuit{
	background-color:rgb(255, 255, 255);
	color:rgb(0, 0, 0);
	border:solid rgb(0, 0, 0) 4px;
	border-radius:8px;
	padding:12px 60px;
	transition:.3s;
	margin-top:10px;
	margin-bottom:10px;
	font-weight:bold;
}

#loseRestart:hover,#loseQuit:hover{
	background-color:rgb(139, 139, 139);
	cursor:pointer;
}