*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
    background: #eee;
}

body {
  color: #333;
  font-family: Verdana;
  
  margin: 50px auto;
  display: flex;
  width: 80ch;
  max-width: 100%;
  box-shadow: 0 1mm 4mm #23415b1c;
  border-radius: 4px;
  position: relative;
}
body::after {
	content: "";
	position: absolute;
	height: 2mm;
	width: 96%;
	bottom: 0;
	left: 2%;
	background: #000;
	filter: blur(4mm);
	text-align: center;
	z-index: -1;
	border-radius: 50%;
}

.bwborders::after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    
    border-width: 2px 0 2px 0;
    border-bottom-color: #0000001a;
    border-top-color: #ffffffb5;
    border-style: solid;
    -box-sizing: border-box;
    -border-radius: 4px;
    -z-index: 11;
}

nav{
  display: inline-block;
  width: 20ch;
  background: #7be5f7;
  -background: linear-gradient(90deg, aqua 85%, #3fb1b1  100%);
  border-radius: 4px 0 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-variant: petite-caps;
  padding: 2ex;
  position: relative;
}
nav::after {
    content: "";
    position: absolute;
    width: 4mm;
    top: 1mm;
    right: -1.5mm;
    background: #00000036;
    filter: blur(1mm);
    border-radius: 50%;
    height: 97%;
}

ul {
  padding-left: 3.5ex;
  list-style: cambodian;
  overflow: hidden;
}
li {
    padding: 2px;
}

article {
  background: cornsilk;
  display: inline-block;
  width: inherit;
  border-radius: 4px;
  margin-left: -4px;
  padding: 2ex;
  z-index: 10;
}


@media all and (max-width: 100ch) {
  body{
    width: 100%;
  }
  nav {
    width: 13ch;
    font-size: xx-small;
  }
  ul {
    padding-left: 2ch;
  }
}