/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2023/2024 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->								                                      6.00/02 - 26-11-23
/* layout	-> menu-items													                                  */
/* file 	-> design/notes.css										                                  */
/* more     -> design/fonts/fontlist.css                                          */
/* colors	-> http://www.color-hex.com | https://oklch.com		                      */
/* ------------------------------------------------------------------------------ */
/* script / handwriting */
@font-face {
    font-family:'Kalam-Light';
    src:url('fonts/Kalam-Light.ttf') format('truetype');
    font-style:cursive;font-stretch:normal;font-display:swap;unicode-range:U+000-5FF;
  }
/*
@import url('https://fonts.googleapis.com/css?family=The+Girl+Next+Door');
*/
/* ------------------------------------------------------------------------------ */
/* NOTES POST-IT                                                                  */
/* see  -> NAV                                                                    */
/* use  -> header-section with fixed position (right OR left)                     */
/* https://codepen.io/mingabire/pen/kXPeqx                                        */
/* 10-11-2013                                                                     */
/* ------------------------------------------------------------------------------ */




/* NOTES and POST-IT CONTAINER */
.notes-postit {
    display:flex;
    justify-content:space-between;
    flex-direction:column;
    align-items:flex-start;
    /*position:absolute;*/
    /*top:.8em;
    right:4em;*/
    /*left:3em;*/
  }

.notes-navi   {position:absolute;top:.8em;right:4em;}
.notes-aside  {position:sticky;top:24rem;left:2rem;border:0px solid orange;}
.notes-main   {position:fixed;border:1px solid green;}

.post-it    {display:table;margin:2em auto 0;} /* self 5em auto 0; */
.taped      {display:table-cell;text-align:center;vertical-align:middle;}

.note { 
    position:relative;
    /*transform:rotate(2deg);*/
    width:256px;
    max-width:256px;
    margin:1.5em auto;
    padding: .6em .1em; /* self .6em .4em; */
    /*box-shadow: 0px 1px 3px rgba(0,0,0,0.25);*/
    box-shadow: var(--nav-shadow);
    border-color:var(--note-bdr-def); /* see design.css -> #DEE184; */
    background:var(--note-bgr-def);   /* see design.css -> #f4f39e; - oklch(94.6% 0.106 107.69) - rgb(244, 243, 158) - hsl(59.31 80% 79%) */
}
.note-trans-left  {transform:rotate(2deg);}   /* notes-navi */
.note-trans-right {transform:rotate(-2deg);}  /* notes-aside */
.note-trans-none  {transform:rotate(0deg);}   /* notes-main */

.note:after {
    position:absolute; 
    top:-21px;
    left:30%;    
    display:block;
    content:'';
    width:110px;
    height:30px;
    border:1px solid #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.1); 
    background: rgba(254, 254, 254, .6);
}
/* FONT and SIZE */
.script {
    font-family:'Kalam-Light'; /* self 'The Girl Next Door', cursive; */
    font-size:1.4rem;
    text-align:center;
    line-height:1.2;
}
/* HINT - headline */
.notes-hint {
    display:inline-block;
    margin: .5em 0 -0.2em 0;
    font-size:1.4rem;
    text-transform:uppercase;
    border:1px solid rgb(0,0,0,.2);
    border-width: 0 0 1px 0;
}
/* TELLINK or E-MAIL */
.script a   {color: hsl(0 79% 55%);text-decoration:none;}
.script a:is(:hover, :focus-visible) {text-decoration:underline;text-underline-offset: 4px;}

@media (max-width: 1280px) {
    .notes-postit {
      display:none;
    }
  }

/* NOTES - COLORS -> see design.css */
/* https://codepen.io/bsteffl/pen/AvWpvR - 15-08-2013 */
/* https://codepen.io/erinesullivan/pen/gxdbzp - 25-08-2017 - book with highlighter and gradients */
/* BLU - blue */
.note.col-blu {
    /*background: #a8e0f9;*/
    background: linear-gradient(to bottom, rgba(73,179,255,1) 0%,rgba(107,193,255,0.5) 60%,rgba(107,193,255,1) 100%);
    border-top: 1px solid #c0e9fb;
    border-left: 1px solid #c0e9fb;
    border-right: 1px solid #90d8f7;
    border-bottom: 1px solid #90d8f7;
  }
.note.col-blu h1 {color: #0e8ec7;}
/* GRN - green */
.note.col-grn {
  background: #aef9a8;
  /*background: linear-gradient(to bottom, rgba(67,226,15,1) 0%,rgba(39,229,54,0.5) 60%,rgba(39,229,54,1) 100%);*/
  border-top: 1px solid #c4fbc0;
  border-left: 1px solid #c4fbc0;
  border-right: 1px solid #98f790;
  border-bottom: 1px solid #98f790;
}
.note.col-grn h1 {color: #1bc70e;}
/* PNK - pink */
.note.col-pnk {
  background: #f9a8d4;
  /*background: linear-gradient(to bottom, rgba(255,69,190,1) 0%,rgba(255,107,203,0.5) 60%,rgba(255,107,203,1) 100%);*/
  border-top: 1px solid #fbc0e0;
  border-left: 1px solid #fbc0e0;
  border-right: 1px solid #f790c8;
  border-bottom: 1px solid #f790c8;
}
.note.col-pnk h1 {color: #c70e73;}
/* YEL - yellow */
.note.col-yel {
  background: #f6f9a8;
  /*background: linear-gradient(to bottom, rgba(222,255,0,1) 0%,rgba(222,255,0,0.5) 60%,rgba(222,255,0,1) 100%);*/
  border-top: 1px solid #f8fbc0;
  border-left: 1px solid #f8fbc0;
  border-right: 1px solid #f4f790;
  border-bottom: 1px solid #f4f790;
}
.note.col-yel h1 {color: #c0c70e;}
/* ORG - orange */
.note.col-org {
  background: #ffcc66;
  /*background: linear-gradient(to bottom, rgba(255,134,9,1) 0%,rgba(255,177,34,0.5) 60%,rgba(255,177,34,1) 100%);*/
  border-top: 1px solid #f8fbc0;
  border-left: 1px solid #f8fbc0;
  border-right: 1px solid #f4f790;
  border-bottom: 1px solid #f4f790;
}
.note.col-org h1 {color: red;}
/* RED - red */
.note.col-red {
  background: red;
  border-top: 1px solid #f8fbc0;
  border-left: 1px solid #f8fbc0;
  border-right: 1px solid #f4f790;
  border-bottom: 1px solid #f4f790;
}
.note.col-red h1 {color: red;}

/*
Gelb:
Hex-Code: #FFFF00
RGB: 255, 255, 0
HSL: 60, 100%, 50%

Grün:
Hex-Code: #00FF00
RGB: 0, 255, 0
HSL: 120, 100%, 50%

Blau:
Hex-Code: #0000FF
RGB: 0, 0, 255
HSL: 240, 100%, 50%

Pink:
Hex-Code: #FF00FF
RGB: 255, 0, 255
HSL: 300, 100%, 50%

Orange:
Hex-Code: #FFA500
RGB: 255, 165, 0
HSL: 30, 100%, 50%

Rot:
Hex-Code: #FF0000
RGB: 255, 0, 0
HSL: 0, 100%, 50%
*/

/*
.sticky {
    background-color: #F4F39E;
    border-color: #DEE184;
    color: #47576B;
    text-align: center;
    margin: 2.5em 0px;
    padding: 1.5em 1em;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
    width: 256px;
    font-family: 'The Girl Next Door', cursive;
}
*/
/*
.sticky.taped:after {
    position: absolute; 
    display:block;
    content:'';
    width:110px;
    height:30px;
    top: -21px;
    left: 30%;    
    border: 1px solid #fff;
    background: rgba(254, 254, 254, .6);
    box-shadow: 0px 0 3px rgba(0,0,0,0.1);  
}
*/

/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */