/* Flashing text animation */
@keyframes flashing {
	0% {
		opacity: 1;
	}
	
	50% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

/* Custom fonts */
@font-face {
	font-family: Lucida Calligraphy;
	src: url("Fonts/LucidaCalligraphyRegular.otf");
}

@font-face {
	font-family: Caveat;
	src: url("Fonts/Caveat-VariableFont_wght.ttf");
}

@font-face {
	font-family: Indie Flower;
	src: url("Fonts/IndieFlower-Regular.ttf")
}

@font-face {
	font-family: Permanent Marker;
	src: url("Fonts/PermanentMarker-Regular.ttf")
}

/* Under construction text */
.underconstruction {
	font-size: 20pt;
	animation: flashing 1s infinite;
}

/* Background wall */
body {
	background-image: url(https://i.ibb.co/qTCnm07/Seaside-Living-Striped-Roll.jpg);
}

/* Corkboard and its contents */
main {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background-image: url(https://i.ibb.co/99PhSVfN/96113.jpg);
	padding: 40px 20px 40px 20px;
	margin: 50px auto 50px auto;
	color: white;
	border: solid 10px transparent;
	font-family: "Caveat";
	font-size: 14pt;
}

/* General base font */
p {
	font-family: "Indie Flower";
}

/* Smaller navigation bar */
.subnav {
	width: 60%;
	background-color: rgb(222, 244, 237);
	background-image: linear-gradient(to bottom, rgb(222, 244, 237), rgb(209, 227, 221));
	text-align: center;
	font-family: "Permanent Marker";
	margin: 0 auto;
	padding: 20px;
	rotate: -1deg;
}

.subnav a {
	text-decoration: none;
	color: rgb(28, 139, 84);
}

/* Big title at the beginning of each page */
.pagetitle {
    background-image: url(https://i.ibb.co/hF1tHG3L/Colorful-Lined-Paper-Background-For-Free.jpg);
    color: rgb(114, 45, 30);
    font-weight: bold;
    font-family: "Permanent Marker";
    padding: 15px;
    margin: 0 auto;
    margin-bottom: 10px;
    text-align: center;
    width: 60%;
}

/* Large blurbs... duh */
.largeblurb {
	background: url(https://i.ibb.co/ZR7p6K2Q/paper-line-vector-background-detailed-lined-paper-texture.jpg);
	background-size: 100%;
	color: black;
	padding: 100px 30px 60px 30px;
}

/* Smaller blurbs */
.smallblurb {
	margin: 0 auto;
	padding: 15px;
	height: 300px;
	width: 80%;
	color: white;
	font-family: "Caveat";
	font-size: 20px;
	background-color: black;
	background-image: linear-gradient(to bottom, rgb(59, 60, 64), rgb(35, 36, 41));
	border-width: 20px 10px 50px 10px;
	border-color: white;
	border-style: solid;
	overflow: auto;
	rotate: -2deg;
}

.smallblurb a {
	color: rgb(161, 203, 232);
}

/* Warning for mature topics */
.contentwarning {
	width: 80%;
	color: rgb(244, 215, 213);
	background-color: rgba(177, 82, 53, 0.8);
	font-weight: normal;
	font-family: "Lucida Calligraphy";
	border-width: 3px;
	border-style: dashed;
	border-color: rgb(76, 28, 13);
	font-size: 20px;
	text-align: center;
	margin: 0 auto;
}

/* Exclamation sign before warning */
.contentwarning::before {
	content: "⚠ ";
}

/* Exclamation sign after warning */
.contentwarning::after {
	content: " ⚠";
}

/* Sequence of post-it notes - <table> */
.postittable {
	margin: 0 auto;
	text-align: center;
	vertical-align: center;
}

/* Table rows in .postittable */
.postittable tr {
	height: 50px;
}

/* Table cells in .postittable */
.postittable td {
	width: 250px;
	border: 0 solid transparent;
	vertical-align: top;
	overflow: auto;
}

/* Sequence of post-it notes - <ul> */
.postitul {
	list-style-type: none;
	list-style-position: inside;
	text-align: center;
	width: 80%;
	margin: 0 auto;
}

/* List items in .postitul */
.postitul li {
	display: inline-grid;
	text-align: left;
	overflow: auto;
}

/* Post-it note colours */
.yellow1, .yellow2, .pink1, .pink2, .green1, .green2, .blue1, .blue2 {
	font-family: "Indie Flower";
	font-size: 18pt;
	z-index: 2;
	width: 280px;
	height: 280px;
	padding: 35px;
}

.yellow1 {
	color: rgba(189, 45, 15, 0.8);
	background-color: rgb(246, 223, 105);
	background-image: linear-gradient(to bottom, rgb(255, 240, 164), rgb(246, 223, 105), rgb(185, 159, 21));
	rotate: -2deg;
}

.yellow2 {
	color: rgba(189, 45, 15, 0.8);
	background-color: rgb(246, 223, 105);
	background-image: linear-gradient(to bottom, rgb(255, 240, 164), rgb(246, 223, 105), rgb(185, 159, 21));
	rotate: 4deg;
}

.pink1 {
	color: rgba(18, 56, 164, 0.8);
	background-color: rgb(249, 139, 168);
	background-image: linear-gradient(to bottom, rgb(255, 196, 212), rgb(249, 139, 168), rgb(198, 91, 120));
	rotate: 3deg;
}

.pink2 {
	color: rgba(18, 56, 164, 0.8);
	background-color: rgb(249, 139, 168);
	background-image: linear-gradient(to bottom, rgb(255, 196, 212), rgb(249, 139, 168), rgb(198, 91, 120));
	rotate: -2deg;
}

.green1 {
	color: rgba(27, 34, 127, 0.8);
	background-color: rgb(136, 232, 136);
	background-image: linear-gradient(to bottom, rgb(191, 255, 196), rgb(136, 232, 136), rgb(112, 196, 118));
	rotate: -4deg;
}

.green2 {
	color: rgba(27, 34, 127, 0.8);
	background-color: rgb(136, 232, 136);
	background-image: linear-gradient(to bottom, rgb(191, 255, 196), rgb(136, 232, 136), rgb(112, 196, 118));
	rotate: -3deg;
}

.blue1 {
	color: rgba(128, 31, 17, 0.8);
	background-color: rgb(126, 178, 232);
	background-image: linear-gradient(to bottom, rgb(164, 209, 255), rgb(126, 178, 232), rgb(95, 142, 191));
	rotate: 4deg;
}

.blue2 {
	color: rgba(128, 31, 17, 0.8);
	background-color: rgb(126, 178, 232);
	background-image: linear-gradient(to bottom, rgb(164, 209, 255), rgb(126, 178, 232), rgb(95, 142, 191));
	rotate: 3deg;
}

/* Green pin on the .largeblurb sections */
.tablepin {
    z-index: 2;
    width: 8%;
    position: absolute;
    right: 60%;
    -webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

/* Navigation bar */
.links {
	list-style: none;
}

/* Individual post-it notes in the navigation bar */
.links tr {
	margin: 0 0 5px 5px;
}

/* Leftmost column in the GSIctionary, also image section of individual OC pages */
.col1, .col1 p {
	font-size: 10px;
	font-style: italic;
	font-family: "Lucida Calligraphy";
	text-align: center;
}


/* Middle column in the GSIctionary */
.word {
	font-style: bold;
	font-size: 20pt;
	border-top: 2px solid black;
}

/* For the Fabulous Secret Powers iframe on index.html */
.deletethisclass {
	margin: 0 auto;
	display: block;
	border: 15pt inset rgb(226, 221, 143);
}