/*global*/

#about {
    background-image:url(images/seamless.gif);
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
    margin:0;
    min-height:100vh;
    overflow:hidden;
}

/*dropdown navbar*/

.dropdown {
    position:absolute;
    width:100%;
    height:80px;
    top:-40px;
    transition:0.3s;
    z-index:1;
}

#pulltab {
    position:absolute;
    width:80px;
    height:40px;
    bottom:0px;
    left:2%;
    border-bottom-left-radius:50px;
    border-bottom-right-radius:50px;
    background-color:black;
    opacity:0;
    transition:0.3s;
}

#pulltab:hover {
    opacity:0.3;
    transition:0.3s;
    cursor: pointer;
}

#arrow {
    position:absolute;
    opacity:1;
    bottom:0px;
    left:2%;
    pointer-events:none;
    z-index: 10;
    transition:0.3s;
    opacity:1;
}

#scrollbar {
    position:absolute;
    width:100%;
    height:5px;
    bottom:40px;
    color:white;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    opacity:1;
}

.navbar {
    position:absolute;
    width:100%;
    height:40px;
    background-color:black;
    opacity:0.3;
}

/*links*/

.navtext {
    position:absolute;
    width:25%;
    max-height:40px;
    z-index:2;
    color:white;
    font-family:"a";
    font-size:2em;
    text-align:center;
    vertical-align:middle;
    line-height:40px;
    transition:0.2s;
}

.navtext:hover {
    background-color:white;
    transition:0.2s;
    color:black;
}

#toAbout {
    left:0%;
}

#toMusic {
    left:25%;
}

#toNow {
    left:50%;
}

#toFun {
    left:75%;
}

/* page content */

#content {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    max-width:700px;
    max-height:800px;
    width:100%;
    height:100%;
}

.scrollpad {
    position:absolute;
    max-width:0px;
    max-height:0px;
    width:100%;
    height:100%;
}

#title {
    position:absolute;
    max-width:300px;
    max-height:250px;
    background-color:black;
    opacity:0.5;
    width:100%;
    height:100%;
}

#titleimg {
    position:absolute;
    max-width:225px;
    max-height:187.5px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    height:100%;
}

#gallery {
    position:absolute;
    max-width:300px;
    max-height:525px;
    bottom:0px;
    background-color:black;
    opacity:100%;
    width:100%;
    height:100%;
}

#galImage {
    position:absolute;
    max-width:300px;
    max-height:525px;
    width:100%;
    height:100%;
}

#textContainer {
    position:absolute;
    max-width:375px;
    max-height:460px;
    right:0px;
    background-color:black;
    opacity:50%;
    width:100%;
    height:100%;
}

#text {
    position:absolute;
    max-width:335px;
    width:100%;
    padding:20px;
    color:white;
    font-family:"b";
    text-align:justify;
    font-size:13pt;
    width:100%;
    height:100%;
}

#links {
    position:absolute;
    max-width:375px;
    max-height:315px;
    bottom:0px;
    right:0px;
    width:100%;
    height:100%;
}

.centered {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:70pt;
}

.link {
    position:absolute;
    max-width:175px;
    max-height:145px;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.5;
    color:white;
    transition:0.2s;
}

.link:hover {
    background-color:white;
    color:black;
    transition:0.2s;
}

#soundcloud {
    right:0px;
}

#youtube {
    bottom: 0px;
}

#instagram {
    right:0px;
    bottom:0px;
}

/* FOR MOBILE USERS */

@media only screen and (max-width: 600px) {
    #content {
        max-width:300px;
        height:100vh;
        overflow-y:auto;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    #content::-webkit-scrollbar {
        display:none;
    }

    .scrollpad {
        max-width:300px;
        max-height:100px;
    }

    #downscrollpad {
        top:1552px;
    }

    #title {
        max-width:300px;
        max-height:250px;
        top:100px;
    }

    #titleimg {
        max-width:225px;
        max-height:187.5px;
    }

    #gallery {
        max-width:300px;
        max-height:525px;
        top:1032px;
    }

    #textContainer {
        max-width:300px;
        max-height:370px;
        top:370px;
    }

    #text {
        max-width:268px;
        font-size:10.4pt;
        padding:12.5px;
    }

    #links {
        max-width:300px;
        max-height:252px;
        top:760px;
    }

    .centered {
        font-size:56pt;
    }

    .link {
        max-width:140px;
        max-height:116px;
    }

    .navtext {
        font-size:1.5em;
    }
}