body {
    /*global font*/
    font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial", sans-serif;
    font-size: 16px;
    color: #2a2a2a;
    line-height: 1.5;
    letter-spacing: 0.05em;
    background-color: #f2efee;
}

#site-container {
    width: 90%;
    max-width: 960px;
    min-width: 800px;
    display: flex;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 40px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

#header-block{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

header {
    width: 100%;
	  background-color: #403f3f;
	  color: white;
	  text-align: center;
    line-height: 1;
    display: inline-block;
}

#title-writing{
    width: 100%;
    display: block;
    margin: 20px 0;
}

#beach-banner{
    width: 100%;
}

/*---------------------------------------------------*/

/* MEAT OF THE SANDWICH*/
#main-body{
    display: flex;
    gap: 10px;
}

/*SIDE COLUMN*/
.sidecol {
    /*min-width: 200px;
    max-width: 240px;
    /*old value max-width: 270px;*/
    min-width: 240px;
    max-width: 240px;
    display: inline-block;
}
nav {
    background-color: white;
    padding: 10px;
}
#navtitle {
    padding: 0 0 0 10%;
    font-size: 20px;
}
.nav-divider {width: 80%;}

#cheebs{
    width: 100%;
    margin: 10px 0px 0px 0px;
}

#topicon{
    max-width: 100%;
    margin: 0px;
}
#sidecol-webname{
    font-size: 20px;
    text-align: center;
    width: 100%;
    letter-spacing: clamp(5px, 100%, 10px);
    padding: 0px;
}

/*MAIN COLUMN*/
#maincol { /*main-column*/
    /*width: 75%;*/
    width: 70%;
    max-width: auto;
    background-color: white;
    padding: 0px 20px;
}
#webmasterbox{
    width: 20%;
    display: flex;
    overflow: hidden;
    align-items: stretch;
    justify-content: center;
    height: auto;
}
#webmaster{
    height: 800px;
}
/*---------------------------------------------------*/

/*FOOTER*/
#footer{
    width: 100%;
    padding: 0;
  	background-color: none;
  	color: #2a2a2a;
  	text-align: center;
    line-height: 0.4;
    display: inline-block;
}

#ripples{
    padding: 0;
    width: 100%;
}


/*TEXT-RELATED*/

a {color: #3baeb0;}

.navlist {
    list-style-type: square;
    padding: 0% 0% 0% 20%;
}

.linklist {
    list-style-type: square;
}

li.star::marker{
  content: "★ ";
  color: #dcaf4e;
  font-size: 1em;
}

li#nav1::marker {color: #df8f33;}
li#nav2::marker {color: #f6d464;}
li#nav3::marker {color: #efedbe;}
li#nav4::marker {color: #aee56a;}
li#nav5::marker {color: #a4ecd6;}
li#nav6::marker {color: #54a6d9;}
li#nav7::marker {color: #3f6ca1;}

/*JOURNAL CSS*/

blockquote {
  border-left: 3px solid #ccc;
  padding-left: 15px;
  margin: 10px 0;
  color: #555;
}
#wavelength-math{
    width: 100%;
    display: block;
    margin: 20px 0;
}

.treasure-row {
    display: flex;
    max-width: 100%;
}
.treasure-col {
  flex: 33.33%;
  padding: 5px;
}
.single-row {
    height: 325px;
}
.double-row {
    width: 100%;
}

/*SHRINES CSS*/
#shrinescol {
    width: 100%;
    max-width: auto;
    background-color: none; /*none for v1, white for v2*/
    padding: 0px 0px 10px 0px;
}
#shrineslist {
    width: 100%;
    display: grid;
    gap: 10px;
}
.shrinebanner {
    /*for v1, width 90%. for v2, width 100%*/
    width: 100%;
    display: block;
}

.shrinerow {
    padding: 0;
    margin: 0;
    display: block;
}