:root{  --pagecolor: rgb(233, 230, 235);
        --dotscolor: rgba(168, 152, 223, 0.61);
        --pageedge: rgb(184, 174, 226);
        --textcolor: rgb(34, 32, 32);
        --linescolor: rgba(151, 141, 132, 0.158);
        --darklines: rgba(151, 141, 132, 0.63);}

/* Structure */

body {background-color: rgb(16, 16, 17);
  background-image: radial-gradient(rgb(41, 38, 63) 1px, transparent 0);
  background-size: 40px 40px;
  background-repeat: repeat;
  overflow-y: unset;
  overflow-x: hidden;
background-position: center;
}

.container{margin-top: 50px;
height: 620px;}

.layout {
display: grid;
margin: auto;
grid-template-columns: .4fr .12fr 2.5fr  .49fr;
grid-template-rows: .1fr auto .1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
max-height:720px;
width:720px;
position: relative;
}

/* Navigation */

.nav { grid-area:  1 / 4 / 4 / 5;
text-decoration: none;}

.buffer{height:2em;}

.links {background-color: rgba(217, 217, 230, 0.938);
margin-right: 40%;
border-right: 1px solid rgb(192, 190, 190);
border-top: 1px solid rgb(236, 235, 222);
border-bottom: 1px solid rgb(181, 185, 137);
padding: 5%;
margin-top: 20px;
text-shadow: -1px 2px 2px rgba(89, 69, 90, 0.11);
font-size: large;
border-radius: 4% 6%;
text-align: center;
color: rgb(30, 28, 31);
}

.nav a {text-decoration: none;
color: #070707ce;}

a {color:rgb(125, 82, 138);
text-decoration: underline 1px dashed rgba(190, 173, 233, 0.753);}

.links:hover {background-color: rgba(232, 239, 245, 0.938);
transform: translate(0px,1px); 
box-shadow: inset .1em 0em .2em rgba(83, 82, 82, 0.185);}

/* Page Top */

.pagetop { grid-area: 1 / 2 / 2 / 4; 
font-family: "Mynerve", cursive;
padding-left: 40px;
padding-top: 5px;
background-color: var(--pagecolor);
border-top: 1px solid var(--pageedge);
border-left: 1px solid var(--pageedge);
border-right: 1px solid var(--pageedge);
color: var(--textcolor);
background-image: url(files/clouds.png);
background-repeat: no-repeat;
background-position: top right;}

.pagetop p {
/* font-family: "Pangolin", cursive; */
font-size: large;
font-weight: 200;
border: 1px solid var(--darklines);
margin: 5px 5px;
width: 60%;
border-radius: 5px;
padding: 8px 5px;
height: 50px;
background-color: var(--pagecolor);}

.pagetop h2 {/*font-family: "Pangolin", cursive; */
border: 1px solid var(--darklines);
width: 25%;
border-radius: 5px;
padding: 3px 3px 3px 8px;
text-align: center;
margin: 10px 5px;
background-color: var(--pagecolor);
cursor:default;}

.pagetop hr {border-color: rgb(202, 202, 202);
width: 107.6%;
margin-left: -40px;
margin-bottom: 0px;}

/* Main Content */
br {margin-bottom:-5px;}

.main { 
  grid-area: 2 / 2 / 3 / 4; 
  background-color: var(--pagecolor);
  border-left: 1px solid var(--pageedge);
  border-right: 1px solid var(--pageedge);
  overflow-y: auto;
  padding-left: 40px;
  height: 400px;
  overflow-x: hidden;
  background-image:linear-gradient(var(--linescolor) .1em, transparent .1em);
  background-size: 100% 1em;
  height:560px;
  color: var(--textcolor);
}

.main h1 {
  margin:5px;
  font-size: 24;
}

.main ul {
  margin: -20px 20px 15px 20px;
  padding: 15px 40px 10px 30px;
  background-color: rgb(238, 232, 232);
  border: 1px solid rgb(221, 210, 221);
  box-shadow: 1px 2px 2px rgba(128, 128, 128, 0.589);
  font-family: "Pangolin", cursive;
  font-size: medium;
  font-weight: normal;
}

.scrap {
  margin: -20px 20px 15px 20px;
  padding: 15px 40px 10px 30px;
  background-color: rgb(238, 232, 232);
  border: 1px solid rgb(221, 210, 221);
  box-shadow: 1px 2px 2px rgba(128, 128, 128, 0.589);
  font-family: "Pangolin", cursive;
  font-size: 16;
  font-weight: normal;
}


.main li {margin-left: 20px;}

.label {
  border-right: 2px dotted rgb(189, 185, 185);
 border-left: 2px dotted rgb(189, 185, 185);
  box-shadow:0.5px 0.5px 1px rgb(0,0,0,0.2);
  border-top: 1px solid rgb(243, 237, 237);
  border-radius: 2%;
  width:20%;
  color: rgb(60, 70, 71);
  text-align: center;
  margin:10px;
  cursor: default;
}


.left {transform: rotate(-5deg);}
.right {transform: rotate(3deg);}

.blue {background-color: #c2d1ecbb;}
.red {background-color: #f3d9d9bb;}
.yellow {background-color: #ecf1d07e;}
.purple {background-color: #cec2ecbb;}
.green {background-color: #d2e7c4bb;}

.mediazone{display: flex;
flex-flow:wrap;
align-content: flex-start;
margin: auto;
column-gap: 8px;
row-gap: 8px;
justify-content: space-evenly;
padding-left: 2%;
padding-top: 8px;
width: 85%;
}

.mediastart{justify-content:start;
}

.media a {font-size: 0;}
.square a {font-size: 0;}

/* Page End */

.pageend { grid-area: 3 / 2 / 4 / 4; 
background-color: var(--pagecolor);
border-bottom: 1px solid var(--pageedge);
border-left: 1px solid var(--pageedge);
border-right: 1px solid var(--pageedge);
/* background-image: radial-gradient(var(--dotscolor) 1px, transparent 0);
  background-size: 20px 20px;*/
  color: var(--textcolor);
}
.pageend p {padding-left: 40px;
opacity: 90%;
text-decoration: none;}

.pageend span {font-family: "Pangolin", cursive;
font-size: smaller;
font-weight: 200;}

.pageend hr {border-color: rgb(202, 202, 202);
width: 95.5%;
margin-left: 22px;
margin-top: 0px;}

/* Medias */

.stamp{  --radius: 2px;
  background-image: 
    radial-gradient(
      var(--radius),
      transparent 98%,
      white
    ),
    linear-gradient(white 0 0);
  background-repeat: 
    round, 
    no-repeat;
  background-position:
    calc(var(--radius) * -1.5) calc(var(--radius) * -1.5),
    50%;
  background-size:
    calc(var(--radius) * 3) calc(var(--radius) * 3),
    calc(100% - var(--radius) * 3) calc(100% - var(--radius) * 3);
    box-shadow: rgba(0, 0, 0, 0.05) 1.95px 1.95px 2.6px;
position: relative;}

.media,.square {min-width:50px;
min-height:60px;
margin:6px;
}

.media img {max-width:80px;
max-height:105px;
z-index:1;
filter:contrast(80%) brightness(105%) saturate(80%);}

.square img {max-width:85px;
max-height:85px;
z-index:1;
filter:contrast(80%) brightness(105%) saturate(80%);}

.media img:hover {filter:contrast(100%);}
.square img:hover {filter:contrast(100%);}

.main p {    color: #252525;
    z-index: 5;
    font-family: "Pangolin", cursive;
    font-size: 16;
    font-weight: initial;
  padding: 6px 8px 0px 0px;
margin-bottom: -2px;}

.icon {position: absolute;
top:-4px;
left:-4px;
width:10px;
height:10px;
z-index: 5;
cursor: default;
filter: saturate(40%) drop-shadow(2px 2px rgba(0, 0, 0, 0.473)) contrast(120%);
font-size: smaller;}

/* BOOK CONSTRUCTION */

.sidebar { grid-area: 1 / 1 / 4 / 3; 
background-image: url(files/rings8.png);
/* filter: drop-shadow(1px 4px 4px #00000075); */
background-position: 16px 1px; 
background-repeat: repeat-y;
z-index: 1;}

.wholepage { grid-area: 1 / 2 / 4 / 4; 
background-color: rgb(87, 77, 97);
position: absolute;
height: 101.7%;
width: 103%;
top: -5;
left: -8;
z-index: -1;
box-shadow:  inset 0 -3em 3em rgba(221, 223, 220, 0.021);
border-radius: 1%;}

.wholepage2 { grid-area: 1 / 2 / 4 / 4; 
background-color: rgb(53, 47, 59);
position: absolute;
height: 100%;
width: 100%;
left: -15;
z-index: -1;
box-shadow:  inset 0 -3em 3em rgba(29, 36, 26, 0.021), rgba(5, 2, 20, 0.575) 1em 1em 3em;
border-radius: 1%;}

.midpage { grid-area: 1 / 2 / 4 / 4; 
background-color: rgb(206, 204, 196);
position: absolute;
height: 100%;
width: 100.8%;
top: 2.5;
left: -2;
z-index: -1;
box-shadow:  inset 0 -3em 3em rgba(221, 223, 220, 0.021);}

/* OTHER DECORATION */

.tornpaper {display: none;}

.underpage {background-color: rgb(160, 158, 154);
transform: rotate(-5deg);
width: 75%;
height: 105%;
z-index: -4;
position: absolute;
left: 10%;
top: -3%;
box-shadow:  inset 0 -3em 3em rgba(42, 38, 65, 0.3),
0.3em 0.3em 1em rgba(3, 0, 8, 0.568);
}
.underpage2 {background-color: rgb(218, 215, 211);
transform: rotate(-9deg);
width: 75%;
height: 100%;
z-index: -2;
position: absolute;
left: 10%;
box-shadow:  inset 0 -3em 3em rgba(147, 160, 179, 0.3),
0.3em 0.3em 1em rgba(30, 29, 90, 0.37);
}


/* POP UP STUFF I blantantly grabbed from another website and repurposed badly.... sorry */

.window {
	position: absolute;
    background-image: url(files/paper2.png);
    background-color: #dcdcdf;
    filter: drop-shadow(2px 5px 5px #38383659);
    box-shadow: inset -2px -2px 8px rgb(230, 224, 224), inset 2px 2px 8px rgb(230, 224, 224);
    background-position: center;
    max-height:450px;
    border-width: 2px;
    border-color: rgba(166, 149, 173, 0.493);
    border-top: 2px solid rgba(238, 235, 235, 0.541);
    border-style:solid;
    border-bottom: 2px solid rgba(150, 140, 140, 0.664);
    width: 460px;
}

.window span,.main span {opacity: 80%;
  font-size: smaller;}

article {
	  inset: calc(50% + 10px) auto auto 50%;
	  transform: translate(-51%, -65%);
    padding: 15px;
    color: #292929;
    z-index: 5;
    font-family: "Pangolin", cursive;
    font-size: initial;
    font-weight: initial;
}

article h3 {margin-top:5px;
    margin-left:10px;
    margin-bottom:0px;
    margin-right: 20px;
padding-left: 5px;
font-family: "Patrick Hand SC", cursive;}

.articlecontent {
	max-height: calc(350px - 53px);
	display: grid;
	align-items: center;
    overflow-y: auto;
}

.articlecontent .notes {
	grid-area: notes;
	min-height: 10em;
	max-height: 20em;
	margin: 1em 1ch;
}

.notes img {
	grid-area: image;
    float: left;
	max-width: 150px;
  max-height: 150px;
	margin-right: 15px;
    margin-left: 10px;
    margin-top: -9px;
    border: 2px solid white;
    box-shadow: 2px 2px 5px rgb(99, 99, 99);
    transform: rotate(-2deg);
}

article:not(:target) {
	display: none;
}

article:target:not([hidden=true]) {
	display: unset;
}

.redline {
  width: 100%;
  background-color: rgba(45, 33, 53, 0.356);
  height: 2px;
}

.button {
	color: rgb(36, 36, 36);
	text-decoration: none;
    float: right;
    margin-top:-4px;
    text-decoration-line: line-through;
}

.button:where(:hover, :focus) {
	color: rgb(0, 0, 0);
}

/* Scrollbar Zone */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(151, 147, 147, 0.425); 
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #d8cedf; 
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background:  rgb(139, 139, 139); 
}


/* FONT ZONE */

.hi-melody-regular {
  font-family: "Hi Melody", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 20;
}

.pangolin-regular {
  font-family: "Pangolin", cursive;
  font-weight: 400;
  font-style: normal;
}

.mynerve-regular {
  font-family: "Mynerve", cursive;
  font-weight: 400;
  font-style: normal;
}

/* ------------------ MOBILE ---------------------- */

@media only screen and (max-width: 695px) {

body {
  background-repeat: repeat;
  overflow-x: hidden;}

.container{margin-top: 20px;
margin-bottom: 50px;
max-height:400px;
min-height: 80%;}

.layout{max-width:90%; 
margin-bottom: 50px;
grid-template-columns:auto;
grid-template-rows: auto;
position: relative;
height: auto;
margin-bottom: 20px;
box-shadow: #2f2f31 0px 2px 0px;
}


.pagetop { grid-area:  4 / 1 / 5 / 2;
padding: 1px 15px;
background-image: url(files/clouds.png);
/* background-size: 130px; */
background-repeat: no-repeat;
background-position: 100% -22%;
position: relative;
z-index: 4;}

.pagetop h2 {padding-top: 8px;
background-color: var(--pagecolor);
border: 1px solid var(--darklines);
border-radius: 5px;
margin: 25px 10px 10px 10px;
padding: 5px;
width: 100px;
text-align: center;
z-index: 5;
}

.pagetop p {background-color: var(--pagecolor);
border: 1px solid var(--darklines);
border-radius: 5px;
padding: 5px 15px;
margin: 10px;
width: 60%;
height: 50px;
}

.label {
  width:100px;
}

.pagetop hr {border-color: rgb(202, 202, 202);
width: 105%;
margin-left: -15px;
margin-bottom: -2px;
z-index: 5;}

.tornpaper{background-image: url(files/torn-paper-edge.png);
-webkit-filter: drop-shadow( 0px 2px 2px #d3cccc );
filter: drop-shadow( 0px 2px 2px #d3cccc );
height: 20px;
min-width: 100%;
position: absolute;
left: 0px; 
display: unset;}

.pageend { grid-area: 6 / 1 / 7 / 2;} 

.pageend hr {
border-color: rgb(202, 202, 202);
width: 100%;
margin-left: -1px;
margin-top: 1px;
}


.wholepage { grid-area: 2 / 1 / 7 / 2;
border: 1px solid rgb(87, 79, 87);
box-shadow: inset rgba(32, 25, 73, 0.308) -1px -2px 2px,inset rgba(32, 25, 73, 0.308) 1px 2px 2px;}
/*.wholepage2 { grid-area: 2 / 1 / 7 / 2;
left:0px;
top:15px;
width: 101%} */

.sidebar {grid-area: 1 / 1 / 3 / 2; width:100%;
height: 45px;
background-image: none;
border-bottom: 2px solid rgba(0, 0, 0, 0.555);}

.nav { grid-area: 3 / 1 / 4 / 2;
z-index: 2;
background-color: rgb(183, 180, 187);
border-top: 3px solid rgba(92, 87, 72, 0.452);
padding-left:10px;
box-shadow: 0px -7px 8px rgba(46, 26, 59, 0.308), 0px 7px 8px rgba(110, 98, 106, 0.075);}

.links {display: inline-block;
margin: 2px;
padding: 2px 5px;
border-right: 2px dotted rgb(189, 185, 185);
 border-left: 2px dotted rgb(189, 185, 185);
box-shadow:0.5px 0.5px 1px rgb(0,0,0,0.2);
border-radius: 2%;
text-shadow: none;}

.links:hover {filter: brightness(90%);
border-color: rgb(239, 220, 241);
transform: unset;}

.main { grid-area: 5 / 1 / 6 / 2; 
height: 445px;
min-height:unset;
padding-left: 15px;
padding-right:15px;
background-size: 100% 1em;}

.articlecontent {
	max-height: 80%;
}

.articlecontent .notes {
	min-height: 10em;
	max-height: 25em;
}

.date {padding-left: 5px;}

.mediazone{justify-content:start;
    column-gap: 2%;
    padding-left: 4%;
    width: 95%;
}

.notes {min-height:415px;}
.notes img {
    max-width: 50%;
    margin-left: 6px;
    margin-top: -9px;
    }

.square img {width:80px;
z-index:1;}

    .window {max-width:92%;
    min-width: 60%;
    max-height:460px;
  z-index:7;}

    .underpage2 {display:none;}
    .underpage {display:none;}
    article {
    transform: translate(-50%, -55%);
    padding: 8px;}
    
    .buffer{display: none;}

    .desktoponly {display:none;}

}