@font-face {
    font-family: "BubbleBoddy";
    src: url(fonts/Bubbleboddy-FatTrial.ttf) format('truetype');
}

@font-face {
    font-family: "CuteNotes";
    src: url(fonts/cute_notes/cute_notes/Cute\ Notes.ttf) format('truetype');
}

html {
    cursor: url("http://www.rw-designer.com/cursor-view/38921.png"), auto;
}

svg {
  translate: 50px 0; 
  
}


body{
  max-width: max-content;
 margin: auto;
 padding-top: 15%;
 background-image: url(https://64.media.tumblr.com/d6ec20ebb8c525c579d3e663abd9c119/5e57603600b8f93e-0d/s100x200/453fcfe4597e6ae2a7324c998c4430a01c7bd57c.jpg);
 
}

p { 
    font-family: "BubbleBoddy";
    font-size: large;
    color: white;
    -webkit-text-stroke: 1px red;

}

#safe-space{
    color: #5CFF00;
}

.container {
    display: flex;
    position: relative;
    text-align: center;
    border: 20px solid transparent ;
    border-image: url(https://64.media.tumblr.com/bcbc7763d0f036b1beab73dc8f628f6e/5e57603600b8f93e-b3/s75x75_c1/e54f6aab5a9af4f7b16ff4858175ac95563aae77.pnj) 40% round;
}


.boxscroll {
    height: 300px;
    width: 300px;
    background-color: black;
    overflow-y: auto;
    display:inline-block;

}

.boxscroll2 {
    height: 300px;
    width: 300px;
    background-color: black;
    overflow-y: auto;
    display:inline-block; }

/* ---- Dab Buttton edit ---*/

#dab {
    position: absolute;
    padding: 5px;
    margin-bottom: 10px;
    height: 50px;
    width: 100px;
    border: none;
    outline: none;
    color: #FFF;
    font-family: "CuteNotes";
    font-weight: bold;
    font-size: larger;
    cursor: pointer;
    cursor: url("http://www.rw-designer.com/cursor-view/38919.png"), auto;
    position: relative;
    z-index: 0;
    border-radius: 20px;

}

#dab::after { 
    content:"";
    z-index: -1;
    position: absolute;
    margin-bottom: 10px;
    padding: 5px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    left: 0;
    top: 0;
    border-radius: 20px;
    
}
/*-------Glow 4 dab----------*/

#dab::before {
    content: "";
    padding: 5px;
    background: linear-gradient(
        50deg,
        #FC835D, #FFDC1F, #B0CD36,
        #65BAF3, #865AF6, #D855F7 
    );
    position: absolute;
    margin-bottom: 10px;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc( 100% + 4px);
    height: calc( 100% + 4px);
    filter: blur(8px);
 animation: glowing 10s linear infinite;
 transition: opacity 3s ease-in-out;  
 border-radius: 10px;
 opacity: 0;
 
}
@keyframes glowing {
    0% {background-position: 0 0;}
    10% {background-position: 200% 0;}
    50% {background-position: 400% 0;}
    100%{background-position: 0 0; }
}
/* ---Hover Dab----*/
#dab:hover::before {
    opacity: 1;
}

#dab:active::after {
    background: transparent;
}

#dab:active {
    color: black;
    font-weight: bold;
}


#out {
    position: relative;
    padding: 5px;
    margin-bottom: 5px;
}

/* ------- Custom scroll bar :3 ------*/


::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-track {
    background: black;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(#8F00F2, #00CFFB, #5CFF00, #FDFB00, #FDAE32, #FF0C12);
    border-radius: 10px;
    
}