html {
	background-color: whitesmoke;
	background-image: url('./images/background.webp');
	background-size: 100vw 100vh;
	background-repeat: no-repeat;
	font-family: Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif;
	color: whitesmoke;
	overflow: hidden;
    user-select: none;
}

.center {
	display: flex;
	width: 100vw;
	height: 100vh;
	margin: auto;
	justify-content: center;
	align-items: center;
}

.position {
    position: absolute;
}

.inventory {
	height: 15vh;
	width: 100%;
	top: -10vh;
	left: 0;
	display: flex;
	justify-content: center;
	align-content: center;
	gap: 5vw;
	z-index: 10;
	background-color: transparent;
      background-image: url(/images/inventoryBackground.webp);
      background-size: 100% 100%;
	opacity: 50%;
}


.pause {
      height: 70px;
      width: 70px;
      border-radius: 50%;
	background-color: transparent;
      background-image: url(/images/pause.webp);
      background-size: 100% 100%;
      top: calc(50% - 35px);
      right: calc(7.5vh - 35px);
      display: flex;
      justify-content: center;
      align-content: center;
      font-size: 40px;
      color: black;
}


.unpauseButt {
      bottom: 30%;
}

.saveButton {
      top: 30px;
      right: 50px;
      font-size: 40px !important;
}

.unpauseButton {
      border: none;
      background-color: transparent;
      font-size: 60px;
      color: rgb(255, 255, 255, 0.8);
      font-family: 'Passion One';
}

.unpauseButton:hover {
      color: rgb(255, 255, 255, 0.5);
}

.unpauseButton:active {
      color: rgb(255, 255, 255, 0.2);
}

.pauseOverlay {
      height: 100vh;
      width: 100vw;
      top: 0;
      left: 0;
      pointer-events: all;
      z-index: 100;
      background-color: rgba(0, 0, 0, 0.2);
      box-shadow: inset 0px 0px 500px 100px black;
      backdrop-filter: blur(20px);
      display: none;
}

.unpause {
      font-family: 'Passion One';
      font-size: 160px;
      color: rgb(255, 255, 255, 0.8);
      width: 1000px;
      height: 400px;
      top: calc(50% - 200px);
      left: calc(50% - 500px);
      z-index: 101;
      display: flex;
      justify-content: center;
      align-content: center;
}

@font-face {
      font-family: 'Passion One';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/passionone/v18/Pby6FmL8HhTPqbjUzux3JEMq007vyJc.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.inventoryItem {
	height: 80%;
	display: flex;
	justify-content: center;
	margin-top: 1vh;
	margin-bottom: auto;
      filter: drop-shadow(-1px 1px 1px rgba(50, 50, 0, 0.5));
}

.dragItem {
	position: absolute !important;
	z-index: 20;
}

.imgcontainer {
	/* position: absolute; */
/*    filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));*/
}

.imgcontainer img {
	max-height: 100%;
	max-width: 100%;
	pointer-events: none;
	object-fit: contain;
}

/* PAGE SPECIFIC DATA */

.calendarData {
	background-color: white;
	box-sizing: border-box;
	display: grid;
	padding: 10px;
	filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
	grid-template-areas: 
    "header header header header header header header header header"
	"weekLabeler . . . . . . . ."
    "week1 calendar calendar calendar calendar calendar calendar calendar rules"
    "week2 calendar calendar calendar calendar calendar calendar calendar rules"
	"week3 calendar calendar calendar calendar calendar calendar calendar rules"
	"week4 calendar calendar calendar calendar calendar calendar calendar rules"
	"week5 calendar calendar calendar calendar calendar calendar calendar rules"
	"week6 calendar calendar calendar calendar calendar calendar calendar rules";
}

.rules {
	font-family: "Palatino";
	width: 150px;
	color: black;
	font-size: 20px;
	justify-self: center;
	align-self: start;
	text-align: center;
	margin: 10px;
	grid-area: rules;
}

.weekLabel {
	font-family: "Palatino";
	color: black;
	font-size: 30px;
	justify-self: end;
	align-self: center;
	margin: 10px;
}

.xImage {
	justify-self: end;
	align-self: center;
}

.x1 {
	width: 70px;
	height: 20px;	
}

.x2 {
	width: 100px;
	height: 20px;
}

.x3 {
	width: 80px;
	height: 20px;
}

#weekLabeler {
	grid-area: weekLabeler;
	justify-self: center !important;
	text-decoration: underline solid 3px;
}

.week1 {
	grid-area: week1;
}

.week2 {
	grid-area: week2;
}

.week3 {
	grid-area: week3;
}

.week4 {
	grid-area: week4;
}

.week5 {
	grid-area: week5;
}

.week6 {
	grid-area: week6;
}

.title {
	font-family: 'GavinScript';
	color: black;
	font-size: 40px;
	text-align: center;
	margin-top: 5px;
	grid-area: header;
}

.board {
	background-color: black;
	display: grid;
	gap: 0px;
	box-sizing: border-box;
	border: 1px solid black;
	grid-area: calendar;
}

.filledSpace {
	background-color: white;
	height: 100px;
	width: 100px;
	box-sizing: border-box;
	border: 1px solid black;
}

.number {
	height: 80%;
}

.cake {
	height: 80%;
	place-self: center center;
}

.piecePart {
	height: 100px;
	width: 100px;
	box-sizing: border-box;
	border: 1px solid black;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
}

.slip {
	top: 80%;
	left: 50%;
	background-color: rgba(255, 255, 255, 1);
	opacity: 0.8;
	box-sizing: border-box;
	display: grid;
	padding: 10px;
	filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
	z-index: 20;
	grid-template-areas: 
	"week3 calendar calendar calendar calendar calendar calendar calendar";
}

.slipCalendar {
	background-color: transparent;
	display: grid;
	gap: 0px;
	box-sizing: border-box;
	border: 1px solid black;
	grid-area: calendar;
}

.slipSpot {
	position: relative;
	background-color: transparent;
	height: 100px;
	width: 100px;
	box-sizing: border-box;
	border: 1px solid black;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* .piece {

} */

/* #pieceA div {
	background-color: purple;
}

#pieceB div {
	background-color: pink;
}

#pieceC div {
	background-color: green;
}

#pieceD div {
	background-color: orange;
}

#pieceE div {
	background-color: red;
}

#pieceF div {
	background-color: blue;
} */

@font-face {
    font-family: 'GavinScript'; /*a name to be used later*/
    src: url('./fonts/GavinScript2-Regular.ttf'); /*URL to font*/
}