/* -- reset --- */ ul,ol,li,h1,h2,span,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,option { margin:0; padding:0;} ul,ol { list-style:none; } h1,h2,span,h3,h4,h5,h6,pre,code { font-size:1em; } input { background-color: #fff; } a img,:link img,:visited img, fieldset { border:none; } :link,:visited { text-decoration:none; } a:hover { text-decoration: underline; }
.clear { clear: both; font-size: 0; height: 0; line-height: 0; overflow: hidden; }
/* --------------------------------------- */


:root
{
	--blue:#6abde0;
	--yellow:#e7c754;
	--red:#ec6c5f;
	--lightgray:#e4e4e4;
}

body { padding:1%; font-family: "Merriweather", serif; font-weight: 400; }
#home_main { background-color: var(--lightgray); width:700px; height:300px; margin:auto; }
#sq1
{
	background-color: var(--yellow);
	position: absolute;
	width:100px;
	height:100px;
	margin-left:115px;
	margin-top:-35px;
}
#sq2
{
	background-color: var(--red);
	position: absolute;
	z-index: -1;
	width:75px;
	height:75px;
	margin-left:185px;
	margin-top:-65px;
}
#sq3
{
	background-color: var(--blue);
	position: absolute;
	width:100px;
	height:100px;
	margin-left:320px;
	margin-top:-55px;
}
#sq4
{
	background-color: var(--yellow);
	position: absolute;
	width:132px;
	height:132px;
	margin-left:620px;
	margin-top:25px;
}
#home_contact_sq
{
	background-color: var(--blue);
	position: absolute;
	z-index: -1;
	width:150px;
	height:150px;
	margin-left:-45px;
	margin-top:-115px;
}

a { text-decoration: underline; color: #75c2e1; }
p { margin-bottom:20px; }
#secondary_main { width:90%; margin:auto; display: flex; margin-top:30px;}
#links { list-style: none; padding-left: 0; }
#links li { display:inline; }
#links li a { text-decoration: none; color: #7b7676; padding-right:30px; font-size: 170%; }

#home_text { margin-top:100px; padding:40px; }
#home_contact_link
{
	margin-top:120px;
	margin-right:20px;
	text-align: right;
	font-size:16px;
	font-weight: bold;
}
#home_contact_sq a {  text-decoration: none; color: #fff; }
h1 { font-family: "Special Elite", system-ui; font-weight: 400; font-style: normal; color: #7b7676; }
h2 { font-family: "Special Elite", system-ui; font-weight: 400; font-style: normal; color: #7b7676; font-size: 180%; }
.home_ttl { font-size: 300%; margin-bottom:50px; margin-top:60px;}

.secondary_ttl { font-size: 300%; margin-bottom:20px; }
#sidebar { padding-right:80px; }
#sidebar a { text-decoration: none; }
#box1, #box2, #box3, #box4, #box5, #box6 { width:100px; height:100px; margin-bottom: 30px; }
#box1,#box4 { background-color: var(--yellow); }
#box2,#box5 { background-color: var(--red); }
#box3,#box6 { background-color: var(--blue); }
#box4, #box5, #box6 { visibility: hidden; }
#link_home { padding:10px; color: #fff; font-family: "Merriweather", serif; font-weight: bold; font-size: 80%; }
#menu {margin-top:40px; margin-bottom: 20px;}
#camp_main {padding-top:20px; }
#camp_main ul { list-style-type: circle; padding-left:20px; margin-bottom:20px; }
#class_logistics {font-size:300%; width:30%; border:3px dashed #e4a112; padding:20px; }

@media screen and (max-width: 900px)
{
	/*
	div { background-color: red; }
	*/
	#home_contact_link { font-size: 25px; }
	#home_main { width:600px; }
	#sq4
	{ margin-left:520px; }
}
@media screen and (max-width: 750px)
{
	/* div { background-color: blue; border:1px solid red;} */
	#box1, #box2, #box3, #box4, #box5, #box6 { width:60px; height:60px; margin-bottom:20px; }
	#box4, #box5, #box6 { visibility: visible; }
	#secondary_main { display: block; }
	#sidebar { display: flex; justify-content: space-between; }
	#sq4 { visibility: hidden; }
	#home_main { width:90%; height: auto; }
	#links li { display: block; }
	#home_contact_sq { margin-left: 20px; }
}

@media screen and (max-width: 600px)
{
	#box6 { display: none; }
}

@media screen and (max-width: 500px)
{
	/* div { background-color: blue; border:1px solid red;} */
	#box5 { display: none; }
}