* {
    padding: 0;
    margin: 0;
}

html {
  padding: 1vh 1vw;
  font-size: max(1.5vw,15px);
  color: #1d1d1d;
  font-family: sans-serif;
  margin: auto;
  background-color:aliceblue;
}

header,main {
  width: 90vw;
  margin: auto;
}

input,h1,h2 {
  vertical-align: middle;
}

h1,h2 {
  margin: 0 0 1vw;
}

input {
  font-size: max(1.5vw,15px);
  padding: 0 max(0.5vw,5px)
}
h1 {
  font-size: max(2vw,20px);
  color: #2a2a93;
}
h2 { 
  font-size: max(1.5vw,15px);
  position: absolute;
  top: max(1vw,10px);
  left: min(-1vw,-10px);
  height: max(3vw,30px);
  line-height: max(3vw,30px);
  background-color: #5fff5f;
  font-weight: bold;
  text-align: center;
  padding-right: max(2vw,20px);
  padding-left: max(0.5vw,5px);
}
h2::before {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 0px;
  height: 0px;
  border: none;
  border-top: max(0.5vw,5px) solid transparent;
  border-right: max(1vw,10px) solid #333;
  content: '';
}
h2::after {
  position: absolute;
  top: 0px;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: max(1.5vw,15px) max(1vw,10px) max(1.5vw,15px) 0px;
  border-color: transparent #fff;
  border-style: solid;
  content: '';
}

.exercise, .PEE, .index {
  position: relative;
  background-color: #fff;
  padding: max(4vw,40px) max(1vw,10px) max(1vw,10px);
  margin: max(2vw,20px) max(1vw,10px) max(1vw,10px);
}

.index ul{
  list-style:none;
}
.index li {
  position: relative;
  padding-left: 3vw;
  box-sizing:border-box;
}
.index li:before {
  content: "▶";
  position: absolute;
  left : 1vw;
  color: #5fff5f;
}
li a {
  display: block; 
  width: 100%;
}
li a:hover { font-weight: bold; }

.AA {
  background-color: #f6f6f6;
}

p,ul,ol {
  padding: 1vw;
  margin: 1vw;
}

.title a{
  background-color: #2a2a93;
  color: #ffffff;
  font-weight:bold;
  padding: 0 1vw;
  margin-right: 0.5vw;
}
.title a:hover {
  background-color: #44f6ff;
  color: #ffffff;
}

a,a:hover {
    text-decoration: none;
    color: #000;			
}