/* WIZARDING WORLD */

html {
  --s: 16px; /* control the size*/
  --c1: #594826;
  --c2: #3f2c11;
  
  --t: calc(var(--s)/10);  /* control the thickness */
  --_c: #0000 calc(98% - var(--t)),var(--c1) calc(100% - var(--t)) 98%,#0000;
  --_s: calc(2*var(--s)) calc(5*var(--s)/2);
  --_r0: /var(--_s) radial-gradient(calc(var(--s)/2) at 0    20%,var(--_c));
  --_r1: /var(--_s) radial-gradient(calc(var(--s)/2) at 100% 20%,var(--_c));
  background:
    0 0 var(--_r0),calc(-1*var(--s)) calc(5*var(--s)/4) var(--_r0),
    var(--s) 0 var(--_r1),0 calc(5*var(--s)/4) var(--_r1),
    conic-gradient(at var(--t) calc(20% + 2*var(--t)),#0000 75%,var(--c1) 0)
    calc(var(--t)/-2) calc(var(--s) - var(--t))/var(--s) calc(5*var(--s)/4),
    repeating-conic-gradient(var(--c2) 0 25%,#0000 0 50%)
    var(--s) calc(var(--s)/-8)/var(--_s),
    conic-gradient(from 90deg at var(--t) var(--t),var(--c2) 25%,var(--c1) 0) 
    calc((var(--s) - var(--t))/2) calc((var(--s) - var(--t))/2)/var(--s) calc(5*var(--s)/4);
}

#header {
	background: url(../wizardingworld/wizardingworld-header.png);
	width: 1000px;
	height: 300px;
	background-size: cover !important;
}