body {
	overflow: hidden;
}


/* ANNOUNCEMENT */
.announcement-container, .announcement-title, .announcement-message{
	transition: opacity 0.2s linear;
	/*opacity: 0;*/
}

.announcement-container{
	display: none;
	opacity: 0;

	position: absolute;
	top: 20%;
	left: 30%;

	z-index: 6;

	width: 40%;
	max-height: 40%;
	background-color: white;
	border: 3px solid black;
}

.announcement-title{
	font-size: 2em;
	text-align: center;
	font-weight: bold;
	margin: 20px;
}

.announcement-message{
	margin: 20px;
	height: autp;
	overflow: auto;
}

.announcement-close{
	position: relative;
	top: 10px;
	right: 10px;
	float: right;
	width: auto;
	text-align: right;
	font-weight: bold;

	cursor: pointer;
}

.announcement-link, .announcement-location, .announcement-date{
	float: right;
	width: 33%;
	margin-top: 10px;

	font-weight: bold;
	text-align: center;
}


/*SKETCH*/

.sketch-container{
	z-index: -1;
	position: absolute;
	top: 5%;
	left: 0;
	height: 100%;

	min-height: 200px;

	display: flex;
	justify-content: center;
	align-items: center;

	padding: 0;

	background-color: var(--main-colour);
}

#canvas-container{
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
}

canvas{
	width: 100%;
}

/* DESCRIPTIONS */

.description-center{
	z-index: 4;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	top: 0;
	left: 0;
	background-color: white;
	opacity: 0;
	transition: opacity 0.9s linear;
}

.description-left, .description-right{
	position: absolute;
	z-index: 3;

	height: auto;
	top: 125px;
	width: 40%;

	font-size: 1.25em;
	background-color: none;
	line-height: 1.35em;
	text-align: justify;

	background-color: white;
	border: 3px solid black;
	padding: 30px;

	transition: all 0.6s, ease-in-out;
}

.description-left{
	left: -50%;
}

.description-right{
	right: -45%;
}


@media (max-width: 500px) and (orientation: portrait){ /* essentially mobile */
	body {
	}

	.announcement-container{
		width: 90%;
		left: 5%;
		max-height: 70%;
		overflow-y: scroll;
	}

	.button-container {
		top: 75%;
	}

	.action-button {
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		font-size: 1.2em;
	}

	.description-left, .description-right {
		font-size: 1.1em;
		line-height: 1.15em;
		top: 70px;
		width: 80%;
		padding: 10px;
	}

	.description-left {
		left: -80%;
	}

	.description-right {
		right: -80%;
	}
}


@media (max-height: 876px) {

	.description-left, .description-right {
		font-size: 1em;
	}
 }

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

	/*SKETCH*/

}

@media  (min-width: 992px) { ... }

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { ... }