/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 20-11-2022
/* colors   -> #EE741D | rgba(238,116,29) | hsla(25,86%,53%) */
/* ------------------------------------------------------------------------------ */
/* link     -> https://codepen.io/dragontheory/pen/zYarXGq */
/* info     -> graph2paper */
/* ------------------------------------------------------------------------------ */
/* ROOT and VARIABLES */

@font-face {
  font-family: 'Oxanium';
  src: url('fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Anodina-Light';
  src: url('fonts/Anodina-Light.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 20-11-22 */
/* RESET COUNTER -> SEE design.css */
/* GRAPH2PAPER */

/* https://stackoverflow.com/questions/3540194/how-to-make-a-grid-like-graph-paper-grid-with-just-css */

body {
  background:
      linear-gradient(-90deg, rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), 
      linear-gradient(-90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(transparent 3px, #2c303a 3px, #2c303a 78px, transparent 78px),
      linear-gradient(-90deg, #aaa 1px, transparent 1px),
      linear-gradient(-90deg, transparent 3px, #2c303a 3px, #2c303a 78px, transparent 78px),
      linear-gradient(#aaa 1px, transparent 1px),
      #2c303a;
  background-size:
      10px 10px,
      10px 10px,
      80px 80px,
      80px 80px,
      80px 80px,
      80px 80px,
      80px 80px,
      80px 80px;

      background-attachment:fixed;
      display: grid;
      justify-items: center;
      align-items: center;
}

main
{ 
  display: grid;
  margin-top: 6rem;
  width:50vw;
  min-height: 25vh;
  place-content: center;
  background: rgb(255,255,255,.1);
  border: 1px solid rgb(255,255,255,.3);
}

h2,p {
  padding: 1rem;
  font-family: 'Anodina-Light';
  font-size: 1.2rem;
  color: #fff;
  margin: 1rem;
  max-width: 60ch;
}

footer {
  margin: 2rem;
  padding: 1rem;
  font-size: 1.2rem;
  font-family: 'Anodina-Light';
  color: orange;
  border: 1px solid rgb(255,255,255.2);
}


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