/*----- base formatting -----*/

html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
p,
pre,
del,
em,
img,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
form,
table,
tbody,
tr,
th,
td,
article,
aside,
footer,
header,
nav,
section {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box
}

:root {
  /*-- page background --*/
	--unit: 80px;
  --page-background:white;
	--grid-color: #ddd;
	--scan-color: #eee;

  /*-- sizing stuff --*/
  --p: 2;
  --pixel: calc(var(--p) * 1px);
  --s: calc(var(--pixel) * 3); /* size of the cut */
  --wrapper-width: 90%;
  --wrapper-max-width: 500px;

  /*-- colors --*/
  --date-text: rgb(95, 59, 255);
  --date-background: rgba(95, 59, 255, 0.2);
  --box-text: black;
  --box-background: white;
  --box-border: black;
  --link-hover:rgb(59, 255, 108);

  /*-- dark mode --*/
  --page-background-dark:rgb(19, 19, 19);
	--grid-color-dark: #161616;
	--scan-color-dark: #3b3b3b;

  --box-text-dark: #ddd;
  --box-background-dark: rgb(34, 34, 34);
  --box-border-dark: #ddd;

  --date-text-dark: rgb(147, 122, 255);
  --date-background-dark: rgba(160, 138, 255, 0.2);

  --link-hover-dark:rgb(122, 255, 133);
}

@font-face {
  font-family: 'NDS bios';
  src: url('/fonts/NDStruebios.woff2') format('woff2'),
      url('/fonts/NDStruebios.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
	text-align: left;
	background-size: 
		var(--unit) var(--unit),
		var(--unit) var(--unit),
		var(--unit) var(--unit),
		var(--unit) calc(var(--unit) / 24);
  background-color: var(--page-background);
	background-image: 
		linear-gradient(to right, var(--grid-color) calc(var(--unit)/48), transparent 1px), 
		linear-gradient(to bottom, var(--grid-color) calc(var(--unit)/48), transparent 1px),
		radial-gradient(var(--grid-color) calc(var(--unit)/24), transparent 0),
		linear-gradient(to bottom, var(--scan-color) 50%, transparent 1px);
	background-position:
		calc(50% - var(--unit)/2 - 1px) calc(var(--unit)/2),
		calc(50% - var(--unit)/2 - 1px) calc(var(--unit)/2),
		calc(50% - var(--unit) * (1 - 1/48) - 1px) calc(var(--unit) * (1 + 1/48)),
		calc(50% - var(--unit)/2 - 1px) calc(var(--unit)/2);
  background-attachment: fixed;
}

/*----- wrapper for the messages -----*/

#wrapper {
  width: var(--wrapper-width);
  max-width: var(--wrapper-max-width);
  margin: 0 auto;
  position: relative;
}

/*----- styling for each box -----*/

  .box {
    box-sizing: border-box;
    font-family: "NDS BIOS", Arial, sans-serif;
    font-size: calc(var(--pixel) * 16);
    position:relative;
    width: 100%;
    margin: calc(var(--pixel) * 16) 0;
    background-color:var(--box-background);
    color: var(--box-text);
    clip-path: polygon(
        var(--s) 0%, 
        calc(100% - var(--s)) 0%, 
        100% var(--s), 100% calc(100% - var(--s)), 
        calc(100% - var(--s)) 100%, 
        var(--s) 100%, 
        0% calc(100% - var(--s)), 
        0% var(--s));
  }
  
  .box:before {
    content:"";
    position:absolute;
    inset:0;
    z-index: -1;
    background: linear-gradient(45deg,var(--box-border),var(--box-border));
    --g1:#000 var(--pixel),#0000 0 calc(100% - var(--pixel)),#000 0;
    --g2:#0000   calc(0.707*var(--s)), 
         #000  0 calc(0.707*var(--s) + var(--pixel)),
         #0000 0 calc(100% - 0.707*var(--s) - var(--pixel)),
         #000  0 calc(100% - 0.707*var(--s)),
         #0000 0;
    -webkit-mask:
      linear-gradient(45deg ,var(--g2)),
      linear-gradient(-45deg,var(--g2)),
      linear-gradient(90deg ,var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
      linear-gradient(180deg,var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
      mask:
        linear-gradient(45deg ,var(--g2)),
        linear-gradient(-45deg,var(--g2)),
        linear-gradient(90deg ,var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
        linear-gradient(180deg,var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
  }
  
  .date {
    float: left;
    position: relative;
    z-index: -2;
    padding: calc(var(--pixel) * 0) calc(var(--pixel) * 4);
    color: var(--date-text);
    background: var(--date-background);
    clip-path: polygon(var(--s) 0, 100% 0, 100% calc(100% - var(--s)), calc(100% - var(--s)) 100%, 0 100%, 0 var(--s));
    margin-right: calc(var(--pixel) * 3);
    line-height: calc(var(--pixel) * 19);
    margin-top: calc(var(--pixel) * -1);
  }

  .date:before {
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(45deg,var(--box-border),var(--box-border));
    --g3:#0000 0 calc(100% - var(--pixel)),#000 0;
    --g4:#0000   calc(0.707*var(--s)), 
         #000  0 calc(0.707*var(--s) + var(--pixel)),
         #0000 0 calc(100% - 0.707*var(--s) - var(--pixel)),
         #0000 0;
    -webkit-mask:
      linear-gradient(-45deg,var(--g4)),
      linear-gradient(90deg ,var(--g3)) 100% calc(100% - var(--s)) no-repeat,
      linear-gradient(180deg,var(--g3)) calc(100% - var(--s)) 100% no-repeat;
      mask:
        linear-gradient(-45deg,var(--g4)),
        linear-gradient(90deg ,var(--g3)) 100% calc(100% - var(--s)) no-repeat,
        linear-gradient(180deg,var(--g3)) calc(100% - var(--s)) 100% no-repeat;
      
  }
  
  .message {
    padding: calc(var(--pixel) * 0) calc(var(--pixel) * 4) calc(var(--pixel) * 0) calc(var(--pixel) * 4);
    line-height: calc(var(--pixel) * 18);
  }

  a {
    text-decoration: none;
    color: var(--date-text);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
  }
  
  a:hover{
    color: var(--link-hover);
  }

  @media (prefers-color-scheme: dark) {
    body{
      background-color: var(--page-background-dark);
      background-image: 
        linear-gradient(to right, var(--grid-color-dark) calc(var(--unit)/48), transparent 1px), 
        linear-gradient(to bottom, var(--grid-color-dark) calc(var(--unit)/48), transparent 1px),
        radial-gradient(var(--grid-color-dark) calc(var(--unit)/24), transparent 0),
        linear-gradient(to bottom, var(--scan-color-dark) 50%, transparent 1px);
      }

    .box{
      background-color:var(--box-background-dark);
      color: var(--box-text-dark);
    }
  
    .box:before, .date:before {
      background: linear-gradient(45deg,var(--box-border-dark),var(--box-border-dark));
    }

    .date{
      color: var(--date-text-dark);
      background: var(--date-background-dark);}

    a {
      color: var(--date-text-dark);
    }
    
    a:hover{
      color: var(--link-hover-dark);
    }
  }