#app_vdr {
  text-align:center;
    padding : 20px;
  }

  #app_vdr h2 {
    font-weight: bold;
    font-size: 1.1rem;
  }
  #app_vdr p {
    font-size: 1rem;
  }
  #app_vdr ul,li{
    list-style:none;
  }
  #app_vdr ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #app_vdr ul li a{
    text-decoration:none;
    color:white;
    display:block;
    height:14em;
    width:14em;
    padding:1em;
    box-shadow: 5px 5px 7px rgba(33,33,33,0);
    transform: rotate(-4deg);
    transition: transform .15s linear;
  }

  #app_vdr ul li:nth-child(even) a{
    transform:rotate(2deg);
    position:relative;
    top:5px;
  }
  #app_vdr ul li:nth-child(3n) a{
    transform:rotate(-2deg);
    position:relative;
    top:-5px;
  }
  #app_vdr ul li:nth-child(5n) a{
    transform:rotate(3deg);
    position:relative;
    top:-10px;
  }

  #app_vdr ul li a:hover,ul li a:focus{
    text-decoration:none;
    color:white;
    cursor:pointer;
    box-shadow:8px 8px 7px rgba(0,0,0,0);
    transform: scale(1.1);
    position:relative;
    z-index:5;
  }

  #app_vdr ul li{
    margin:1em;
  }






#app_vdr_items{
  border-right: 1px dashed #333;
}





@import url("https://rsms.me/inter/inter.css");
#app_vdr_items_detail_comment {
  font-family: "Inter", sans-serif;
  display: flex;
  justify-content: center;
  margin: 30px 0 30px 0;
}

.comments {
  width: 100%;
  background: #fff;
  padding: 20px 30px;
  border-radius: 10px;
}
.comments h2 {
  font-size: 1.2em;
  margin-bottom: 0;
}

.comments-form {
  border-bottom: 1px solid #ccc;
}
.comments-form ul {
  list-style: none;
  margin-left: -40px;
}
.comments-form ul li {
  margin-bottom: 15px;
}
.comments-form ul li input[type=submit] {
  border: 0;
  border-radius: 30px;
  padding: 7px 16px;
  background: #448ef6;
  color: #fff;
  font-family: "Rubik", sans-serif;
  font-weight: bold;
  font-size: 0.9em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.comments-form ul li input[type=text], .comments-form ul li textarea {
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: #f7f7f7;
}
.comments-form ul li input[type=text]::-moz-placeholder, .comments-form ul li textarea::-moz-placeholder {
  font-family: "Rubik", sans-serif;
}
.comments-form ul li input[type=text]:-ms-input-placeholder, .comments-form ul li textarea:-ms-input-placeholder {
  font-family: "Rubik", sans-serif;
}
.comments-form ul li input[type=text]::placeholder, .comments-form ul li textarea::placeholder {
  font-family: "Rubik", sans-serif;
}
.comments-form ul li input[type=text]:focus, .comments-form ul li textarea:focus {
  background: #fff;
}
.comments-form ul li textarea {
  width: 100%;
  height: 120px;
  resize: none;
}

.comments-list {
  margin-top: 20px;
}

.comment {
  position: relative;
  padding: 10px 20px;
  background: #efefef;
  border-radius: 10px;
  margin-bottom: 15px;
}

.comment img {
  margin-bottom: 10px;
  border-radius: 50%;
}
.comment .timestamp {
  color: #777;
  position: absolute;
  right: 20px;
  top: 10px;
}
.comment h4, .comment p {
  margin: 10px;
}