/* Colors */
        body {
            background: #333333;
            margin: 0;
            font-family: 'Oxygen', sans-serif;
            font-size: 16px;
            overflow-x:hidden;
        }
       
        a {
            text-decoration: none;
            color: #5e86ff;
        }
       
        header {
            width:100%;
            background: #c1a0ff;
            position:fixed;
            z-index:99;
            padding:0px 0px 0px 0px;
            top: 0px;
        }
       
        nav {
              width:96%;
            padding:10px;
            position: relative;
            margin:0px auto;
            transform:translate(25%, 0);
        }
       
        nav li {
            display:inline-block;
            list-style: none;
            margin:14px;
            position: relative;
        }
       
        nav li a {
            padding:4px 8px;
            border-radius:30px;
            color:white;
           
        }
       
        nav li img {
            position:absolute;
            width:60px;
            left:10px;
            border-radius:10px;
            margin-top:-10px;
        }
       
        aside {
            width:25%;
            min-width:250px;
            top:0px;
            position:fixed;
            z-index:999; text-align:center;
            height:100vh;
            background:linear-gradient(#c1a0ff, #7effd4);
        }
       
        aside img {
            margin:80px 0 0 0;
            width:100px;
            padding:10px;
            border:1px solid rgba(255,255,255,.34);
            border-radius:100%;
        }
       
        aside .title {
            padding:0px 10px;
            font-size:1.2em;
            font-weight:bold;
            position:relative;
            color:rgba(255,255,255,.9);
        }
       
        .title:before {
            position:absolute;
            content:'@trainwreckgenerator';
            margin-top:30px;
            font-weight:normal;
            font-size:.7em;
            width:90%;
            text-align:center;
        }
       
        .description  {
            padding:20px;
            color:rgba(255,255,255,1);
        }
       
       
        .cover {
            width:100%;
            height:100%;
            background:rgba(255,255,255,.28);
        }
       
        .container {
width:calc(100% - 25%);
position:relative;
left:25%;
margin:100px auto;
 
}
 
 
 
   
.posts {
    width:50%;
    margin:100px 0px;
    position:relative;
    border-radius:8px;
    background:#fff;
}
   
.im {
   
    overflow:hidden;
 
}
   
 
   
 .posts img, .posts iframe {
    max-width:100%;
    border-radius:8px;
   
}
   
/* Post Captions */
.caption{
padding:40px;
top:0px;
left:0px;
transition:.6s;
background:white;
}
 
 
.user {
margin:6px;
padding:4px;
border-radius:4px;
border:none;
background:rgba(94,134,255, .12)
}
 
.reblog-header img {
transform:translate(0,-4px);
}
 
.deactivated:after {
content:'deactivated';
position:absolute;
padding-left:8px;
opacity:0;
transition:.4s ease-in-out;
}
 
.deactivated:hover:after {
opacity:1;
 
}
 
 
 
.postinfo {
width:100%;
padding:10px;
bottom:0px;
border-top:1px solid #eee;
line-height:210%;
background:white;
   
}
 
 
 
.audiocaption{
padding:10px;
overflow:auto;
 
}
 
.answercaption {
background:white;
padding:10px;
 
}
 
 
/*Ask Posts */
 
 
 .question {
 width:100%;
 background:#eee;
 padding:10px;
      max-height:50%;
 }
 
 .answer {
 padding:10px;
 max-height:40%;
 overflow:auto;
 }
 
/*styling for the speech bubble */
 
   .speechbubble {
   
width:calc(70% - 16px);
position: relative;
left:80px;
margin: 0;
padding:16px;
height: auto;
border-radius:8px;
line-height:150%;
background: #7effd4;
color:#424242;

}
 
.speechbubble a {
color:mediumaquamraine;
background:white;
padding:2px 4px;
border-radius:8px;
}
 
/* the before and after are the triangle part of the speech bubble */
.speechbubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 12px 17px 12px 0;
border-color: transparent #7effd4; /* keep same color as bubble */
display: block;
width: 0;
z-index: 1;
left: -16px;
top: 10px;
}
 
 
/* Chat Posts */
 
.chat {
padding:10px;
line-height:150%;
border-radius:8px;
margin:10px;
 }
 
   
.chat:nth-of-type(odd) {
background:mediumaquamarine;
color:white;
width:80%;
border-bottom-left-radius:0;
 
-webkit-transition:.5s;
transition:.5s; }
   
  .chat:nth-of-type(odd) b {
color:white;
-webkit-transition:.5s;
transition:.5s; }  
   
.chat:nth-of-type(even) {
background:cornflowerblue;
color:white;
width:80%;
transform:translate(20%,0);
border-bottom-right-radius:0px;
-webkit-transition:.5s;
transition:.5s; }
 .chat:nth-of-type(even) b{
color:white;
-webkit-transition:.5s;
transition:.5s; }
   
/* Audio Posts */
 
 
.posts #albumart{
   z-index:2;
float:left;
border-radius:100%;
  height:100px;
  border:1px solid #eee;
  width:100px;
}
 
 
 
/* circle inside the album art to make it look like a CD */
 
.playerbox {
float:left;
padding:6px;
}
 
 
.posts #albumart img{
 
 
float:left;
border-radius:100%;
width:100px;
height:100px;
border-width:0px; transition:.6s;
   
}
 
.playerbox:hover #albumart img{
transition:0.6s;
transform:rotate(300deg); }
 
 .player {
width:30px;
overflow:hidden;
height:40px;
transform:scale(1.2);
border-radius:100%;
top:8px;
bottom:10px;
left:4px;
 
padding:8px;
padding-top:6px;
padding-left:10px;
padding-bottom:0px;
border-radius:100%;
position:absolute;
   
}
 
 
.playercon {
width:56px;
height:56px;
  border-radius:100%;
   left:0px;
background:white;
   top:22px;
position:relative;
border:1px solid ;
-webkit-transition-duration:500ms;
-moz-transition-duration:500ms;
-o-transition-duration:500ms;
-ms-transition-duration:500ms;
}
  
.infobox {
float:left top;
 margin-left:120px;
background-color:transparent;
padding:14px;
padding-left:4px;
max-height:140px;
text-align:left;
color:;
}
 
.trackname {
 
letter-spacing:2px;
padding:2px;
font-size:1em;
font-weight:300;
color:#333;
   
   
}
.artist {
letter-spacing:2px;
padding:2px;
}
 
.album {
   padding:2px;
}
 
 
 
 
#audiopost {
 padding:20px;
   
   
}
   .socialshare {
 
   border-radius:30px;
   top:0px;
   padding:10px;
   
 
   transition:.4s ease;
 
   }
   
 
 .socialshare li {
 list-style:none;
 margin:2px;
 display:inline-block;
 }  
 
 .socialshare a {
 border:none;
 }
/* post info */
 .info {
position:relative;
border-top:1px solid #eee;
padding:10px;  
color:rgba(0,0,0,.4);
 
 }
 
.info a {
border:none;
color:rgba(0,0,0,.4);
 
}
 
 
/* Tags */
 
.tags {
   position:relative;
   line-height:200%;
   opacity:.8;
   padding:10px;
   
}
 
.tags a:hover {
background:transparent;
color:#5e86ff;
}
.tags a {
border:none;
margin:2px;
border:2px solid #ff7171;
opacity:.88em;
background:#aec5ff;
padding:2px 6px;
color:white;
transition:.4s all;
border-radius:30px;
}
 
 
 
 
 
@media only screen and (max-width: 768px) {
/* For mobile phones: */
 
.container {
    column-count:1!important;
}
   
.a, .b {
    display:none;
}
   
.posts {
    width:90%!important;
}
   
nav {
    width:94%!important;
}
   
 
   
}
@media only screen and (min-width: 600px) {
/* For tablets: */
 
   
 
   
}
 
.post:hover .inf {
    transform: translate3d(0,0,0);
    opacity:1;
    transition:.6s
   
}
 
.inf {
  position:absolute;
  right:10px;
}
 
.inf svg {
   width:16px;
   height:16px;
 
fill:#5e86ff;
}
 
.inf .like svg {
width:16px;
margin-top:6px;
height:16px;
fill:;
}
   
.inf .like { /* Make a parent element */
float:right;
transform:translate(0, -6px);
}
 
.inf .like .like_button { /* Position like button above your custom one */
 position: absolute;
 top: 0;
 margin-top: 6px;
 opacity: 0;
 }
.inf .like .like_button.liked { /* Keep the functionality active */
 opacity: 1;
 } 
 
 .inf .like:active svg {
 opacity:0;
 }
   
.inf a{ color:#555; padding:5.2px; border-radius:8%; text-decoration:none;
                                 
 height:14px;
 
 
transition: all .4s ease-in;
}
 
 
.inf a:hover{ transition:.4s ease-in-out; box-shadow:none; text-shadow:none;
color:#ccc;
opacity:.52;
text-decoration:none;
  }
 
 
  ol.notes {
  background:#fff;
  padding:10px;
  position:relative;
  width:50%;
  border-radius:8px;
  }
 
  ol.notes li {
  padding:10px;
  list-style:none;
  border-bottom:1px solid #eee;
  }
 
 
#search {
   margin-top:20px;
       position:relative;
    }
   
   
                    #search-scope input,
                    #search-scope label {
                        cursor: pointer;
                    }
                   
             
                       
                        #search form .query {
                            border: none;
                            border:none;
                            outline: none;
                            background:none;
                            line-height:120%;
                            width: 80%;
                            margin-left:8%;
                            float: left;
                            background:none;
                            font-size:1em;
                            padding:10px 6px;
                           opacity:1;
                           border:2px solid rgba(255,255,255,.8);
                            border-radius:30px;
                            color: black;
                        }
                       
                        ::placeholder {
                            color:white;
                        }
                       
       #egg { opacity:.8;right:10px;  position:fixed;bottom:10px;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
       font-family: "bitxmap";  
border:1px solid #777;  z-index:4;
transform:scale(1.12);
           
        }
 #egg:hover   { animation-name: egg;
animation-duration: 1s;
animation-iteration-count: infinite;}
@keyframes egg{
    0%{}
    10%{transform:rotate(20deg)}
    80%{transform:rotate(-20deg)}
    100%{}
}
      #pagination {
 
  margin:50px;
text-align: center;
position: relative;
left:25%;
width: 44%;    
}
 
 
#pagination a, .current_page {    
margin: 0 6px;
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
background: #618eff;
border-radius: 100%;
color: #fff;   opacity:.6;
line-height: 42px;
 
}
 
.current_page {
background: #618eff;
color:#fff;
 opacity:1;
}
