* {margin: 0; padding: 0; box-sizing: border-box;}
page, section, menu, workspace, screen, name, canvas, item, title, admin, navmob, content {display: block;}
body {font-size: 12px;}
body, * {font-family: "Monda", sans-serif;}
body {
  --bg: #DBC669;
  --dark: #000;
  --light: #fff;
  --main: #015A9C;
  --alt1: #F09C7A;
  --alt2: #EC5E50;
  --alt3: #9B9B99;

  --pad: 4px;
}

img {width: 100px;}

*[ref] {display:none;}

/* de {color: var(--main)}
fr {color: var(--alt2)} */

/* *[edit] {border: 1px solid black;} */

content {position: relative;}

page {padding: 0 25px; display: block;}

header {position: relative; height: 90px; margin-left: 25px; display: flex;}
header h1 {display: none;}
header::after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -2;
  background: var(--bg); clip-path: polygon(1% 20%, 93% 1%, 100% 21%, 100% 100%, 2% 71%);}


navmob {z-index: 100; position: absolute; width: calc( 0% + 40px); height: calc(0% + 40px); right: 20px; top: 20px; overflow:hidden;
  transition: all 0.1s steps(5);
  filter: drop-shadow(0px 0px 0px rgba(50, 50, 0, 0.5));
}
navmob:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;
background: var(--alt2); clip-path: polygon(3% 7%, 16% 0, 100% 0%, 100% 85%, 95% 94%, 0 100%);}
navmob.open {
  width:calc( 100% - 40px); height: calc(0% + 300px);
  filter: drop-shadow(1px 3px 3px rgba(50, 50, 0, 0.5));
}
navmob.open:after {clip-path: polygon(0% 6%, 2% 0, 99% 5%, 100% 85%, 10% 97%, 2% 88%)}

navmob ul { display: flex;flex-direction: column;justify-content: center;align-items: center;}
navmob ul li {width: min-content;
  display: block;color: white;font-size: 20px; cursor: pointer;margin: 5px 0;}



burger {position: relative; display: block; margin: 5px; width: 30px; height: 30px;
}
burger:after {
  background: white;
  content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;
  transition: all 0.14s steps(3) 0.14s;
  clip-path: polygon(90% 5%, 90% 20%, 67% 20%, 67% 40%, 100% 40%, 100% 55%, 34% 55%, 34% 75%, 81% 75%, 81% 90%, 0% 90%, 0% 75%, 34% 75%, 34% 55%, 15% 55%, 15% 40%, 67% 40%, 67% 20%, 5% 20%, 4% 5%);
}

navmob.open burger:after {
  clip-path: polygon(82% 8%, 93% 17%, 93% 17%, 59% 48%, 89% 78%, 89% 78%, 77% 92%, 77% 92%, 47% 61%, 18% 91%, 18% 91%, 6% 81%, 6% 81%, 38% 47%, 10% 17%, 10% 17%, 21% 4%, 21% 4%, 49% 39%, 82% 8%);
}
section {position: relative; min-height: 150px; max-width: 500px;}
section::after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;
  background: blue; clip-path: polygon(3% 7%, 16% 0, 93% 5%, 100% 85%, 95% 94%, 0 100%);}
section:nth-child(2n)::after {clip-path: polygon(0 17%, 5% 0, 90% 2%, 100% 11%, 95% 94%, 7% 99%);}
section[name="program"]::after {background: var(--alt2);}
section[name="vision"]::after {background: var(--alt3);}
section[name="us"]::after {background: var(--bg);}
section[name="h_story"]::after {background: var(--alt2);}

admin {display: flex; padding: 0px; justify-content: flex-end; position: fixed; width: 100%; left: 0; top: 0; z-index: 1000;
  box-shadow: #373737e6 1px -6px 6px 7px; position: sticky;
  background: repeating-linear-gradient(45deg, #4e4e4e, #4e4e4e 1px, #000000 1px, #000000 7px);
}
admin button {margin: 10px; font-size: 10px; font-weight: 900; border: none; background: white; padding: 1px 6px;
  border-radius: 100px; box-shadow: inset #46617a66 -3px -1px 5px 1px;}

list li {border: solid 5px #35e2a3;
  margin: 10px;}