html{
      height: 100%;
    }
    body{
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      background-color: #CCE7D3;
    }
    header{
      width: 100%;
      background-image: url(clowd.png);
      background-size: 85% 100%;
      background-repeat: no-repeat;
    }
    h1{
      margin-left: 20%;
      text-align: center;
      font-size: 3em;
    }
    h2{
      text-align: center;
    }
    footer{
      width: 100%;
    }
    .left{
      width: 70%;
    	float: left;
    }
    .right{
      width: 25%;
      float: right;
      text-align: right;
    }
    .top{
      position: top;
    }
    .bottom{
      position: bottom;
    }
    .big{
      font-size: 3em;
    }
    .small{
      font-size: 0.7em;
    }
    .flex{
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .box{
      flex: auto;
      margin: 5px;
      width: 25%;
      border: solid 2px;
      border-radius: 20px;
      background-color: white;
    }
    .in_box{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .side{
      flex: auto;
      margin: 2px;
    }
    img.side{
      width: 20%;
      height: 20%;
    }
    p.side{
      text-align: right;
    }
    .comment{
      border: dashed 2px;
      border-radius: 15px;
      margin: 5px;
      padding: 5px;
    }