.topnav {
    text-align: center;
    overflow: hidden;
    background-color: #663399;
    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: #663399;
    color:#d19fbf;
    position:absolute;
    top:-2px;
    right:0;

}

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

body {
    background-color: #333333;
}

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


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

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

.article {

    margin-left:75px; margin-top:15px;
}

.articleHeader {
    margin-top:60px;

}

h3{
    text-align: center;
    font-weight: 700;
    background-image: linear-gradient(to left, #663399, #d19fbf);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: 1px 1px 0 #572678;

  }

h1 {
    text-align: center;
    background-image: linear-gradient(to left, #663399, #d19fbf);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: 1px 1px 0 #572678;

}

p {
    text-indent:30px;
    margin-left:10%;
    width:75%;
    text-align:center;
    color:#777777;

}

.articleText {
    color:#663399;
    text-align: center;
}

img {
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.4)
}


@media screen and (max-width: 768px) { 
    .topnav {
        text-align: center;
        overflow: hidden;
        background-color: #663399;
        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: #663399;
        color:#d19fbf;
        position:absolute;
        top:-2px;
        right:0;
    
    }
    
    .topnav a:hover {
        background-color: #663399;
        color: #d19fbf;
    }
    
    
    
    body {
        background-color: #333333;
    }
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    
    
    .column {
        float: left;
        width: 8%;
    }
    
    .articleColumn {
        float:left;
        width:33%;
    }
    
    .article {
        width:80%; height:90%;
        padding-left:75px; padding-top:150px;
    }
    
    h3{
        text-align: center;
        font-weight: 700;
        background-image: linear-gradient(to left, #663399, #d19fbf);
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
      }
    
    h1 {
        text-align: center;
        background-image: linear-gradient(to left, #663399, #d19fbf);
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
    }
    
    p {
        text-indent:30px;
        margin-left:10%;
        width:75%;
        text-align:center;
        color:#777777;
    
    }
    
    .articleText {
        color:#663399;
        text-align: center;
    }
    
}