/**   DESKTOP VIEW IS DEFAULT  **/

/** BG **/

body{
  background-color:pink;
}

/** MAIN CONTAINERS **/

#mainbox{
  position:relative;
  width:60%;
  height:450px;
  left:17%;
  margin-top:5%;
  --r: 25px; /* radius of circles */
  padding:3%;
  background: white;
  text-align:center;
  mask: 
    linear-gradient(#000 0 0) no-repeat
     50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)), 
    radial-gradient(farthest-side,#000 97%,#0000) 
     0 0/calc(2*var(--r)) calc(2*var(--r)) round;
}

#sitenav{
  position:absolute;
  height:400px;
  width:70px;
  background:white;
  left:10%;
  margin-top:3.5%;
  padding:1%;
}

.nav{
  position:relative;
  margin-top:25px;
  margin-bottom:25px;
}

/** TEXT AND FONTS **/

h1{
  font-size:24px;
}

h2{
  font-size:17px;
}

/** IMAGES AND OTHER DECOR **/


/**    MOBILE VIEW ADJUSTMENTS  **/

/** MAIN CONTAINERS **/

/** TEXT AND FONTS **/

/** IMAGES AND OTHER DECOR **/