$dark-gray: #2D3E4E;
$light-blue: #00CCFF;
$pale-white: #F5F5F1;
$light-gray: #9A9A9A;
$dark-purple: #2E3144;
$purple-hover: #272938;
$dark-blue: #265778;

.rendered-article {
  border: none;
  border-right: 1px solid #ccc;
  background-color: #f6f6f6;
  font-size: 14px;
  padding: 20px;
  height: 775px;
  overflow: scroll;
  display: block;
  font: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  h1, h2, h3, h4, h5{
      font-weight: normal;
      font-family: 'Museo Slab','Helvetica','Arial',sans-serif;
      letter-spacing: -1px;
      line-height: 1.3;
      margin: 10px 0;
  }
  
  h1{
      font-size: 35px;
  }

  h2{
      font-size: 23px;
  }

  h3 {
      font-size: 20px;
      font-weight: normal;
  }

  h4{
      font-size: 18px;
      font-weight: normal;
  }

  h5 {
      font-size: 20px;
  }
  
  .info{
      margin-bottom: 20px;
      margin-top: 20px;
      color: $light-gray;
      
      p{
          margin: 0;
          padding: 0;
      }
      
  }
      
  pre {
      color: white;
          margin-top: 20px;
          margin-bottom: 20px;
          margin-left: -40px;
          margin-right: -40px;
          padding: 5px;
          background-color: #272822;
      }
    
   
    
    .tip{
        background-color: $pale-white;
        padding: 20px;
        text-align: center;
        .large{
            font-size: 24px;
            font-weight: 800;
            width: 100%;
        }
    }
    
    .post-body{
        background-color: white;
        padding: 40px;     

        .post-title{  

            .info{
                float: left;
                padding-top: 14px;
                text-align: center;
                min-width: 95px;
                float: left;
                display: block;
                font-size: 16px;
                color: rgb(186, 186, 186);
                padding: 0px 12px;
                
                span{
                    display: inline;
                    margin-left: 40px;
                    margin-right: 40px;
                }
            
            }

            h1{
                margin-top: 0;
                font-size: 38px;
                margin-bottom: 40px;
                padding-bottom: 40px;
                border-bottom: 1px solid #ECEFF2;
            }
        }
        h1{
            font-size: 30px;
        }

        ul{
            li{
                list-style-type: circle;
                margin-left: 40px;
            }
        }

        
        .recommended-articles{
            
            .article{
                width: 100%;
                padding: 20px;
                border: 1px solid $pale-white;
                margin-bottom: 20px;
                
                h2{
                    margin: 0;
                    padding: 0;
                    margin-bottom: 10px;
                    font-size: 22px;
                }
                
                p{
                    color: $light-gray;
                    text-overflow:ellipsis;
                    font-size: 17px;  
                }
                
                .url{
                    font-size: 14px;
                }
                
            }
            
            
        }
    }
    
    .result{
        margin-bottom: 40px;
        button{
            background-color: $light-blue;
        }
        
    }
}