*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}

:root{
    /* vars */
    --base-colour: #4B4A67;
    --darker-base: #3d3d55;
}

html{
    scroll-behavior: smooth;
}

body{
    background-color: #000000;
    color: #ffffff;
    overflow-x: hidden;
}

.dark-mode{
    background-color: white;
    color: #000;
}

p{
    font-size: 15px;
}

.header{
    background-size: cover;
    background-position: center;
    height: 700px;
    color: white;
}

.home-page .header{
    background-image: url('./img/home-banner.jpg');
}

.aboutme-page .header{
    background-image: url('./img/banner-aboutme.jpg');
    background-position: left !important;
}

.feed-page .header{
    background-image: url('./img/banner-feed.jpg');
}

.photography-page .header{
    background-image: url('./img/banner-photography.jpg');
}

.programming-page .header{
    background-image: url('./img/banner-programming.jpg');
}

.music-page .header{
    background-image: url('./img/banner-music.jpg');
}

.shop-page .header{
    background-image: url('./img/banner-shop.jpg');
}

.contact-page .header{
    background-image: url('./img/banner-contact.jpg');
}

.header-overlay{
    height: 100%;
    background-color: rgba(0,0,0,0.2);
}

.on-header{
    width:60vw;
    margin:auto;
    /* border: 1px solid black; */
    height: 100%;
    padding:15px 0px;
    transition: .3s;
}

.on-header .top-row a{
    text-decoration: none;
    color: white;
    cursor: pointer;
}

.on-header .top-row .top-row-item{
    float:right;
    padding:15px;
    background-color: black;
    margin:5px;
    transition: .2s;
}

.top-row-item img{
    vertical-align: middle;
    width:30px;
    height:30px;
    margin-right: 5px;
}

.top-row-item img.inv{
    filter: invert(1);
}



.top-row .top-row-item:hover{
    background-color: rgba(0, 0, 0, 0.6);
}

.on-header .top-row{
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
}

.on-header .text{
    padding:100px 0px 25px 0px;
}

.on-header h1, h3{
    padding:5px 0px;
}

.on-header p{
    padding:10px 0px;
}

.on-header .links a{
    text-decoration: none;
}

.on-header .links{
    padding:0px 0px 25px 0px;
}

.on-header .links img{
    width:60px;
    margin-right: 10px;
    transition: .2s;
}

.on-header .links img:hover{
    opacity: .60;
}

.on-header .rm a{
    text-decoration: none;
}

.on-header .rm p{
    background-color: white;
    color: black;
    padding:20px 25px;
    border-radius: 50px;
    display: inline-block;
    transition: .2s;
}

.on-header .rm p:hover{
    background-color: rgba(255, 255, 255, 0.6);
}

/* SHARE MODAL */

.sharemenu{
    display:none;
    position: fixed;
    z-index: 2;
    width:100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.smcontent{
    background-color: white;
    color: #000;
    width:60vw;
    margin: auto;
    margin-top:15vh;
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
}

.sml{
    float:left;
    width:90%;
}

.sml h3{
    padding:30px;
}

.smr{
    float:left;
    width:10%;
    text-align: center;
    font-size: 45px;
    font-weight: bold;
    color: #7c7c7c;
}

.smr .close{
    padding:20px;
    cursor: pointer;
}

.smr .close:hover{
    color:#000000;
}

.share-boxes-wrapper{
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    padding:15px;
}

.sharebox{
    width:33%;
    width: calc(100%/3);
    float: left;
    padding:15px;
    margin:15px;
}

@media screen and (max-width:1000px){
    .sharebox{
        width:100%;
        margin:15px 0;
    }
}

.share-boxes-wrapper a{
    color:white;
    text-decoration: none;
    cursor: pointer;
}


.wa{
    background-color: #075e54;
}

.wa:hover{
    background-color: #064e46;
}

.fb{
    background-color: #3b5998;
}

.fb:hover{
    background-color: #31497e;
}

.tw{
    background-color: #1da1f2;
}

.tw:hover{
    background-color: #178bd3;
}

.lin{
    background-color: #0077b5;
}

.lin:hover{
    background-color: #0068a0;
}

.cl{
    background-color: #222222;
}

.cl:hover{
    background-color: #070707;
}

.sharebox img{
    vertical-align: middle;
    width:30px;
    height:30px;
    margin-right: 5px;
    border:1px solid white;
    border-radius: 50%;
}

/* NAVIGATION */

nav{
    position: sticky;
    top:0;
    z-index: 1;
    transition: .3s;
}

.percentage{
    height: 4px;
    background-color: #ffffff;
    width:0%;
}

nav .wrapper{
    width:60vw;
    margin: auto;
    transition: .3s; 
}

nav a{
    display: inline-block;
    margin: 0;
    text-decoration: none;
}

nav a.right-nav{
    float: right;
}

nav a p{
    padding:25px;
    color: white;
    transition: .1s;
}

nav a:hover p{
    text-decoration: underline;
}

.nav{
    background-color: var(--base-colour);
}

.nav .wrapper{
    background-color: var(--darker-base);
}

/* .home-page .nav{
    background-color: #674750;
}

.home-page .nav .wrapper{
    background-color: #875452;
}

.aboutme-page .nav{
    background-color: #7b4eca;
}

.aboutme-page .nav .wrapper{
    background-color: #9b42b9;
}

.feed-page .nav{
    background-color: #2a4e7b;
}

.feed-page .nav .wrapper{
    background-color: #3c6696;
}

.programming-page .nav{
    background-color: #191b20;
}

.programming-page .nav .wrapper{
    background-color: #0d2126;
}

.photography-page .nav{
    background-color: #313932;
}

.photography-page .nav .wrapper{
    background-color: #43443f;
}

.music-page .nav{
    background-color: #644b58;
}

.music-page .nav .wrapper{
    background-color: #a3655e;
} */

/* MAIN PART  */

.main{
    width:60vw;
    margin: auto;
    padding:35px 0px;
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: .3s;
}

.webpage-wrap{
    background-color: #9e9e9e;
    padding:25px;
}



/* HOME PAGE BOXES */



/* FOOTER */

footer{
    bottom:0;
    max-width: 100vw;
    background-color: var(--base-colour);
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
}

.fcopy{
    text-align: center;
    padding:20px 0px;
}

.fcwrap{
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
}

.fwrapper{
    width:60vw;
    margin:auto;
    transition: .3s;
}

.fcolumn h4{
    padding:15px 0px;
}

.fcolumn p{
    padding:5px 0px;
}

.fcolumn a{
    color:white;
    text-decoration: underline;
}

footer .fcolumn{
    padding:20px 0px;
    float:left;
    width:33%;
    width: calc(100%/3);
}

/* RESPONSIVE */

@media screen and (max-width:1200px) {
    .on-header{
        width:80vw;
        padding:15px 25px;
    }
    nav .wrapper{
        width:80vw;
    }
    .main{
        width:80vw;
        padding:35px 25px;
    }
    .fwrapper{
        width:80vw;
    }
}


@media screen and (max-width:800px) {
    .on-header{
        width:100vw;
        padding:15px 25px;
    }
    .on-header .links img{
        width:50px;
    }
    nav .wrapper{
        width:100vw;
    }
    .main{
        width:100vw;
        padding:35px 25px;
    }
    .fwrapper{
        width:100vw;
        margin:0px 25px;
    }
    .on-header .rm p{
        padding: 15px 20px;
    }
    .sml, .smr{
        width:100%;
    }
    .g-column{
        width:50%;
    }
}

.under-construction{
    background-color: #6d0f0f;
    padding:25px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
}