@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
/* Font is Barlow */
/*
    #eeffff
    #cceeff
    #99eeff
    #66ddff
    #00aaee
    #0066dd
    #0022aa
*/
body {
	background-color: #99eeff;
	border: 2px solid Black;
	border-radius: 16px;
	font-family: Barlow;
	padding: 24px;
	padding-top: 8px;
	color: Black;
    cursor: url('cursor.png'),auto;}
html{background-image: linear-gradient(#eeffff, LightCyan);}

/* Navbar */
nav ul{
	list-style-type: none;
	background-color: #66ddff;
	border: 4px solid #0022aa;
	border-radius: 10px;
	font-weight: bold;
	padding: 16px;}
nav ul li{
	display: inline;
	border-right: 2px solid #0022aa;
	padding: 8px;}
nav ul li:last-child {border-right: none;}
nav ul li a {text-decoration: none; color: #001155}
nav li a:hover {text-decoration: underline;}
nav li.select {color: #225577;}

.warning{
	border: 4px solid #ff0055;
	border-radius: 10px;
	padding: 16px;
	background-color: #cceeff;
    color: Black;}
.warning::before{
	color: #001155;
	content: "WARNING: ";
	font-weight: bold;}

ul li a{text-decoration: none; color: #001155}
li a:hover{text-decoration: underline;}

li.spook::after{
	color: Orange;
	font-weight: bold;
	content: " Halloween";}

.box{
	border: 4px solid #00aaee;
	border-radius: 10px;
	padding: 16px;
	padding-left: 40px;
	background-color: #cceeff;}

p.click {
	border: 2px solid White;
	border-radius: 4px;
	background-color: #cceeff;
	padding: 4px;
	width: 4em;}
p.click:hover {
	color: White;
	border: 2px solid #00aaee;
	border-radius: 4px;
	background-color: #0066dd;}

/* Tables */
table {width: 510px; border-collapse: collapse;}
th,td {border: 2px solid #001155; padding: 8px;}
th {background-color: #00aaee;}
td {background-color: #cceeff;}

iframe.scratch {
	background-color: #121212;
	border: 4px solid Black;
	border-radius: 10px;}

iframe.youtube {
    border: 4px solid Black;
	border-radius: 10px;}