* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body {
   background: #fafafa;
   font-size: 17px;
   color: #434343;
}

body, button {
   font-family: 'Roboto', sans-serif;
}

#flatten_ring:before {
   content: "";
   position: absolute;
   top: 50%;
   transform: translateY(-50%);

   width: 100%;
   height: 1px;
   background: #000;
   z-index: 1;
}

#flatten_ring {
   margin: 0 auto;
   margin-bottom: 5rem;
   position: relative;
   width: 1024px;
   max-width: 100%;
   display: flex;
   justify-content: space-around;
}

#flatten_ring .node,
#destination .node {
   padding: 10px;
   color: #757594;
   border-radius: 5px;
   border: 5px solid #d5d5ec;
   display: flex;
   flex-direction: column;
   background: #fff;
   text-align: center;
   user-select: none;
   font-weight: bold;
   z-index: 9;
   transition: all .3s ease;
}

#flatten_ring .node.is-active {
   border-color: #6ebd71;
   box-shadow: 0px 0px 14px #6ebd71;
}

#destination.hide {
   opacity: 0;
}

#destination .node {
   width: 240px;
   margin: 0 auto;
}

#controls {
   text-align: center;
   margin-bottom: 3rem;
}

.button {
   text-transform: uppercase;
   padding: 10px 15px;
   font-weight: bold;
   border-radius: 5px;
   border: none;
   cursor: pointer;
   margin: 0 5px;
   color: white;
   font-size: 15px;
   transition: all .2s ease;
   opacity: 0.8;
}

.button:hover,
.button:active {
   opacity: 1;
}

#add_node {
   background: #2196f3;
}

#remove_node {
   background: #f44336;
}

#send_request {
   background: #4caf50;
}

#description {
   font-family: 'Caveat', cursive;
   text-align: center;
   display: block;
   margin-top: 2em;
   margin-bottom: 2em;
   font-weight: lighter;
   font-size: 3rem;
}

#destination {
   margin-top: 2rem;
   font-size: 2rem;
   display: block;
   font-weight: bold;
   font-family: 'Caveat';
}