.vertical {
    border-left: 6px solid black;
    height:100%;
    position:absolute;
    left: 20%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

body {
    background-color: #333333;
}

.column {
    float: left;
    width: 8%;
}

.articleColumn {
    float:left;
    width:50%;
}

.topnav {
    text-align: center;
    overflow: hidden;
    background-color: #6d2f96;
    position:relative;
    border-radius: 10px;
    height:80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4)
}

.topnav #myLinks {
    display:none;
}

.topnav a {
    color: #d19fbf;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display:block;

}

.topnav a.icon {
    background-color: #6d2f96;
    color:#d19fbf;
    position:absolute;
    top:-2px;
    right:0;

}

.topnav a:hover {
    background-color: #6d2f96;
    color: #d19fbf;
}

.articleWelcome {
    color:#D8D8D8;
    margin-left:2%;
    font-size:20px;
}

.title {
    font-weight: 700;
    background-image: linear-gradient(to left, #f5f5f5, #6d2f96);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    margin-left:2%;
}

.articleText { 
    color:#D8D8D8;
    text-align:left;
    margin-left:2%;
    text-shadow: 1px 1px 0 #555555;
}

.article {
    border-left:5px solid rgba(209, 159, 191, 0.75);
    margin-top:1%;
    margin-right:20%;
}

.articleImg {
    margin-top:10%;
    margin-left:70%;
    width:400px;
    height:300px;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.4);
}