@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');


.notice-board {
  /*width: 150%;*/
  width: 130%;
  height: 100px;
  /*margin-left: -15%;*/
  margin-left: -5%;
  margin-top: -5%;
}

.notice-board h2, .notice-board p {
  font-size:40%;
  font-weight:normal;
}

.notice-board ul, .notice-board li {
  list-style:none;
  /*border: solid 2px #41403E;
  border-radius: 0 0 225px 0/0 0 15px 0;*/
}

.notice-board ul {
  overflow:hidden;
  /*padding:3em;*/
  padding: 0.5em;
}

.notice-board ul li a {
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  /*height:10em;
  width:10em;*/
  height:5em;
  width:5em;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}

.notice-board ul li {
  margin:1em;
  float:left;
}

.notice-board ul li h2 {
  font-size:90%;
  font-weight:bold;
  padding-bottom:10px;
  color:#41403E;
  font-family: 'Indie Flower', arial,sans-serif;
  /*font-family:"Reenie Beanie",arial,sans-serif;*/  
}

.notice-board ul li p {
  color:#41403E;
  font-family: 'Indie Flower', arial,sans-serif;
  /*font-family:"Reenie Beanie",arial,sans-serif;*/
  font-size:90%;
}

.notice-board ul li a {
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}

.notice-board ul li:nth-child(even) a {
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}

.notice-board ul li:nth-child(3n) a {
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}

.notice-board ul li:nth-child(5n) a {
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}

.notice-board ul li a:hover,ul li a:focus {
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
  color:#000;
}

.notice-board ol {
  text-align:center;
}

.notice-board ol li {
  display:inline;
  padding-right:1em;
}

.notice-board ol li a {
  color:#fff;
}

.note-container {
  margin: -14px;
  padding: 7px;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  border:solid 7px #41403E;
  border-color: transparent;
}