* {
    margin:0;
    padding:0;
}

body {
    height:100%;
    width:100%;
}

#content {
    max-width: 900px;
    text-align:left;
    margin:0 auto;
}

.header {
    width:100%;
    height:25%;
    display:block;
    text-align:center;
    margin-top: 8%;
}

.pfp {
    width:100%;
    height:50%;
    display:block;
    text-align:center;
}

#logo {
    border-radius: 10%;
    width: 80%;
}

.txt-hldr {
    width:100%;
    margin-top: 3%;
}

.name {
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 150%;
    width:70%;
    margin: 2% auto;
}

.desc {
    color: #fff;
    font-family: 'Lato', sans-serif;
    width:70%;
    font-size:120%;
    margin: 3% auto;
}

.menu {
    width:100%;
    height:75%;
    text-align:center;
    display:block;
}

.menu-ul {
    width:100%;
    height:100%;
    list-style:none;
    text-align:center;
}

.btn {
    width:70%;
    height:5%;
    display:block;
    margin: 7% auto 0 auto;
    border-radius: 5px;
}

.btn-a {
    display:grid;
    grid-template-columns:18% 82%;
    padding: 3%;
    text-decoration: none;
}

.btn-img {
    width:100%;
    filter: invert(100%);
}

.btn-txt {
    color:#fff;
    text-align:center;
    font-family: 'Lato', sans-serif;
    font-weight:400;
    font-size:20px;
    margin:auto 0;
}

#ig {
    background-color: #d63d75;
}
#yt {
    background-color: #d32e2e;
}

#wp {
    background-color: #000000;
}

#wp-rs {
    filter: invert(0%);
    border-radius: 100%;
}

#spotimg{
    filter: invert(100%) drop-shadow(4px 2px #22723e)
}

#aaplimg{
    filter: invert(100%) drop-shadow(4px 2px #a8323a)
}

#sclimg{
    filter: invert(100%) drop-shadow(4px 2px #8b4507)
}

#fb {
    background-color: #235299;
}

#tw {
    background-color: #3599d3;
}

#mu {
    background-color: #dd9b21;
}

#spot {
    background-color: #1DB954;
}

#aapl {
    background-color: #f94c57;
}

#scl {
    background-color: #FF7700;
}

#ep {
    background-color: maroon;
}

#ep-img {
    width:100%;
}

#spottxt {
    text-shadow: 2px 2px #22723e;
}

#aapltxt{
    text-shadow: 2px 2px #a8323a;
}

#scltxt {
    text-shadow: 2px 2px #8b4507;
}

@media only screen and (min-width:700px){
    .btn-txt{
        font-size:25px;
    }
    .btn{
        border-radius: 10px;
    }
    .name {
        font-size:30px;
    }
    .desc {
        font-size:25px;
    }
}

@media only screen and (min-width:800px){
    .btn-txt{
        font-size:30px;
    }
}
@media only screen and (min-width:900px){
    .btn-txt{
        font-size:35px;
    }
    .name {
        font-size:40px;
    }
    .desc {
        font-size:32px;
    }
}