/* SCROLLBAR*/
::-webkit-scrollbar {
    width: 15px;
    height: 15px; 
}

::-webkit-scrollbar-thumb {
    border: 1px solid #3e3e3d;
    background-color: #99956a;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    height: 15px;
    width: 15px;
    display: block;
    background-repeat: no-repeat;
    border: 1px solid #000;
    background-color: #d0d0d0;  
}

    /*body*/

body {
    text-align: left;
    font-family: monospace;
    background-color: #404F68;
    opacity: 1;
    background-color: #C4C4C4;
    opacity: 1;
    background-image:  linear-gradient(135deg, #c5c2f1 25%, transparent 25%), linear-gradient(225deg, #c5c2f1 25%, transparent 25%), linear-gradient(45deg, #c5c2f1 25%, transparent 25%), linear-gradient(315deg, #c4c4c4 25%, #404f68 25%);
    background-position:  40px 0, 40px 0, 0 0, 0 0;
    background-size: 40px 40px;
    background-repeat: repeat;
    font-size: 2vh;
    margin:auto;
    width:80%;
    font-size: 2vh;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #f8f8f8, #696b6d, #f8f8f8);
}

a {
    color: #99956a;
    text-decoration: none;
}

a:hover {
    color: #576aa0;
    text-decoration: none;
}

p{
  padding:3%;
}

::-moz-selection {
    color: #99956a;
    background: #576aa0;
}

::selection {
    color: #99956a;
    background: #576aa0;
}

@font-face {
    font-family:cookies;
    src:url(https://dl.dropbox.com/s/znu6dtos9e6mkcj/Cookies%203.ttf);
}

span {
    font-family:cookies;
    font-size: 10vh ;
    display: table ;
    margin: 0 auto ;
    -webkit-background-clip: text; 
    -webkit-text-stroke-width: 3px ;
    -webkit-text-stroke-color: #3e3e3d ;
    color: #576aa0 ;
    letter-spacing: 25px ;
    margin-top: 20px;
    
}

.container { 
    box-shadow: -1px 2px 7px 0px #000000; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 0.5fr 1fr 1fr 0.1fr;
    grid-auto-columns: 1fr;
    gap: 1%  1%;
    /* this is for the gaps between the "sections". */
    grid-auto-flow: row;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-areas:
      "header header header header header" 
      "musicbox content content content miniblog"
      "nav content content content cbox"
      "nav content content content cbox"
      "footer footer footer footer footer";
    width: 100%;
    height: 100%;
    max-height:1500px;
    margin-bottom: 5%;
}

.header { 
    grid-area: header; 
    background-color: #f8f1ef;
    width: 100%;
    height: 100%;
    border: #696b6d 1px solid; 
}

.header_img {
    width:100%;
    height:100%;
    object-fit: fill;
    background-position: 57% 55%; 
    background-image: url("./img/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.content { 
    grid-area: content; 
    background-color: #f8f1ef;
    width: 100%;
    height: 100%;
    border:1px solid #3e3e3d;
    overflow: auto;
    box-shadow: -1px 1px 7px 0px #000;
}

.content p{
    padding:1%;
}
/* changes the p padding from 3% to 1% EXCLUSIVELY for the "content" section, but you can delete this line if you don't like it! */

.footer { 
    grid-area: footer; 
    background-color: #f8f1ef;
    width: 100%;
    height: 100%;
    border:1px solid #3e3e3d;
    text-align: center;
}

.footer p {
    padding:0;
}
/* removes the padding from the footer because i think it looks better this way, but you can delete this line if you disagree! */

.musicbox { 
    grid-area: musicbox; 
    background-color: #f8f1ef;
    width: 100%;
    height: 100%;
    border:1px solid #3e3e3d;
}
/* the "musicbox" section (the short top sidebar on the left) */

.nav { 
    grid-area: nav;
    background-color: #f8f1ef;
    width: 100%;
    height: 100%;
    border:1px solid #3e3e3d;
    overflow: auto;
}
/* the "nav" section (the long bottom sidebar on the left) */

.miniblog { 
    grid-area: miniblog; 
    background-color: #f8f1ef;
    width: 100%;
    height: 100%;
    border:1px solid #3e3e3d;
    overflow: auto;
}
/* The "miniblog" section (the short top sidebar on the right) */

.miniblog { 
    grid-area: miniblog; 
    background-color: #f8f1ef;
    width: 100%;
    height: 100%;
    border:1px solid #3e3e3d;
    overflow: auto;
}
/* The "miniblog" section (the short top sidebar on the right) */

.cbox { 
    grid-area: cbox; 
    background-color: #f8f1ef;
    width: 100%;
    height: 100%;
    border:1px solid #3e3e3d;
    overflow: auto;
}
/* The "cbox" section (the bottom long sidebar on the right) */
   
.pop{
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
    color: #f8f1ef;
    -webkit-animation: pop 1s ease-in-out infinite alternate;
    animation: pop 1s ease-in-out infinite alternate;
    -moz-animation: pop 1s ease-in-out infinite alternate;
}
/* this is for the "pop" effect showcased on the word "welcome"! */

@keyframes pop {
    from {
    transform:scale(0.95)
    }
     
    50% {
    transform:scale(1)
    }
     
    to {
    transform:scale(0.95)
    }
    }
     
    @-webkit-keyframes pop {
    from {
    -webkit-transform:scale(0.95)
     
    }
     
    50% {
    -webkit-transform:scale(1)
     
    }
     
    to {
    -webkit-transform:scale(0.95)
     
    }
}
/* End of the #pop div :D! */

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* this is for centering images. you can see how i use it in the "musicbox" section! */
      

/* Below is the mobile optimisation. Mess with it if you want. */
@media only screen and (max-width: 640px) {
   
    body {
        text-align: left;
        font-family: monospace;
        background-color: #bfbcf0;
        font-size: 2vh;
        margin:auto;
        width: 60%;
        
    }

    span {
        font-family:cookies;
        font-size: 5vh ;
        display: table ;
        margin: 0 auto ;
        -webkit-background-clip: text;
        -webkit-text-stroke-width: 3px ;
        -webkit-text-stroke-color: #3e3e3d ;
        color: #576aa0 ;
        letter-spacing: 25px ;
        margin-top: 20px;  
        margin-left: 30px;
    }

    .container{
      display: flex; 
      flex-flow: column; 
      width:155%;
      margin-top:3%;
      margin-left:5%;
    }
     
    .header{
      height:250px;
      order:1;
      margin-top: 3px;
    }
     
    .content{
      order:2;
    }
     
    .musicbox{
      display:none;
    }
     
    .nav{
      order:3
    }
     
    .miniblog{
      order:5;
      height:800px;
    }
     
    .cbox{
      order:4;
      height:800px;
    }
     
    body{
      margin:0;
    }
     
    .footer{
      order:6;
    }
     
}