body {
    background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(173, 216, 230, 1) 100%), url(images/check-bg.jpg);
    background-size:15%;
    background-attachment:fixed;
}

/* HEAD ELEMENTS */

.head-deco {
    position:fixed;
    z-index:2;
    width:100%;
    pointer-events:none;
    filter:drop-shadow(0 3px 3px rgba(89, 110, 177, 0.9))
}

.head-banner {
    position:relative;
    top:5.5em;
    left:50%;
    transform: translate(-50%, -50%);
    z-index:3;
    width:550px;
    padding:1%;
    filter:drop-shadow(0 3px 2px rgba(89, 110, 177, .7))
}

.head-banner img {
    width:550px;
}

.inner-banner {
    position:relative;
    background-color:white;
    margin:0 auto;
    padding:2% 0 2% 0;
    width:100%;
    text-align:center;
}

.headtitle {
    font-size:4em;
    font-family:sans-serif;
    font-weight:1000;
    padding:0 2% 0 2%;
}

/* BODY ELEMENTS */

.dummy {
    width:100%;
    height:15%;
    color:white;
}

.post-preview {
    position:relative;
    font-family:"Nunito";
    z-index:1;
    width:75%;
    height:fit-content;
    background-color:black;
    color:white;
    margin: 0 auto;
    margin-bottom:2.5%;
    padding:2.5%;
    border-radius:20px;
}
.post-preview:after { /*CLEARFIX; USE THIS IF THINGS ARE GOING OUT OF DIVS*/
    content: "";
    display: table;
    clear: both;
}

.post-text {
    position:relative;
    float:left;
    width:80%;
}

.ppr-head {
    font-size:2em;
    background-color:cornflowerblue;
    text-align:left;
    width:98%;
    float:left;
    position:relative;
    padding:1%;
    margin: 0 0 1% 0;
}

.ppr-body {
    font-size:1em;
}

.full-post-button {
    position:relative;
    bottom:0;
}

.full-post-button a {
    font-size:1.5em;
    text-decoration:none;
    color:white;
    transition:color .25s;
}

.full-post-button a:hover {
    color:cornflowerblue;
}

#first-cont {
    position:relative;
}

.l-img {
    position:relative;
    float:left;
    width:15%;
    margin:0 2.5% 0 0;
    padding:1%;
    border:solid white 2px;
}

.l-img img {
    width:100%;
}

/* DRAWER COMMON */

.wardrobe {
    position:fixed;
    z-index:4;
}

.drawer {
    position:fixed;
    color:white;
    background-color:black;
    border-right:5px solid cornflowerblue;
    font-family:sans-serif;
    font-size:100%;
    width:15%;
    height:20%;
    min-height:175px;
    left:-12.5%;
    transition:left .2s;
    border-radius:0 10px 10px 0;
}

.drawer p {
    position:relative;
    z-index:4;
    font-weight:1000;
    padding:5% 20% 5% 5%;
    float:left;
}

.drawer a:hover {
    color:cornflowerblue;
}

.drawer:hover {
    left:0;
}

.label {
    position:absolute;
    float:right;
    width:2.5em;
    font-size:200%;
    font-weight:1000;
    transform:rotateZ(90deg);
    top:35;
    right:-15px;
    cursor: default;
}

.abt-drawer {
    position:fixed;
    z-index:4;
    color:white;
    background-color:black;
    border-left:5px solid #1AA7EC;
    font-family:sans-serif;
    height:fit-content;
    min-height:400px;
    width:60%;
    top:25%;
    right:-57.5%;
    transition:right .2s;
    border-radius:10px 0 0 10px;
}

.abt-label {
    position:absolute;
    float:left;
    width:20em;
    font-size:200%;
    font-weight:1000;
    transform:rotateZ(-90deg);
    left:-300;
}

.abt-text {
    font-size:125%;
    padding: 2.5% 2.5% 2.5% 7.5%;
}

.abt-drawer:hover {
    right:0;
}

/* DRAWER SPECIFIC */

.drawer#first {
    top:25%;
}

.drawer#second {
    top:50%;
}

.drawer#third {
    top:75%;
}

.active {
    color:grey;
}

.search-container {
    position:fixed;
    height:50px;
    z-index:5;
    right:100;
    top:5;
    border:cornflowerblue 50x solid;
}

.searchbar {
    height:50px;
    width:200px;
    border-radius:20px 0 0 20px;
    border:none;
    padding:20px;
}

.drawer input[type=text] {
    position:relative;
    margin: 10% 0 0 5%;
    padding: 0 0 0 5%;
    height:100%;
    width:50%;
    float:left;
}

.search-container button {
    position:fixed;
    background:white;
    height:50px;
    width:50px;
    border:none;
    border-radius:0 20px 20px 0;
}

.search-container button:hover {
    background:rgb(190, 190, 190);
    transition: background .25s;
}

.login-text {
    padding:5%;
    font-weight:1000;
}

/* POST ELEMENTS */
.in-post-img {
    position:relative;
    clear:both;
    margin:2% auto;
    width:100%;
    display:block;
}

.shrink {
    width:50%;
    transition: width .5s;
}

.shrink:hover {
    width:100%;
}

/* EXPERIMENTAL */

.main-menu {
    position:sticky;
    top:0;
    width:40%;
    height:50px;
    text-align:center;
    background-color:white;
    border-radius:20px;
    margin: 0 auto;
    margin-bottom:30px;
    z-index:4;
    border:cornflowerblue solid 5px;
}

.main-menu a {
    position:relative;
    margin:10px 0 10px 0;
    padding:0 4% 0 4%;
    text-decoration: none;
    font-family:"Nunito";
    font-size:1.5em;
    font-weight:800;
    color:black;
    line-height:2em;
    transition:color .2s;
}

.main-menu a:hover {
    color:cornflowerblue;
}

.mobile-menu {
    display:none;
}