:root {

    --cursor: url('/links/img/normal.gif'), auto;
    --pointer: url('/links/img/pointer.gif'), auto;
    --draw: url('/links/img/handwriting.gif'), auto;
    --text: url('/links/img/text.gif'), auto;

    --head: "Fresca", sans-serif;
    --body: "Questrial", sans-serif;;

    --maincolor: #ffffff;

    --accent1: #3D55D0;
    --accent2: #9796E7;
    --accent3:#d9c3ff;
    --light: #ffffff;
    --textcolor: #ffffff;
    --linkcolor: #eee3ff;
}

body{
    cursor: var(--cursor);
    background-color: rgb(234,219,250);
    background: linear-gradient(180deg, rgba(65,83,177,1) 0%, rgba(216,182,238,1) 45%, rgba(234,219,250,1) 100%); 
    background-size: cover;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--textcolor);
    font-family: var(--body);
    font-size: .9rem;
}





button, a, input, a:hover{
    cursor: var(--pointer);
    font-family:var(--body)
}

a:link{
    color:var(--linkcolor);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 1;
}

a:hover{
    color:var(--accent1)
}

text{
    cursor: var(--text);
}

h1{
    font-family: var(--head);
    letter-spacing: 2;
    font-size: 3rem;
    color:var(--textcolor);
    margin-bottom:0px;
}
h2{
    font-family: var(--head);
    letter-spacing: 2;
    font-size: 2.2rem;
    color:var(--textcolor);
    margin:0px;
}

#main{
    max-width: 1080px;
    margin:auto;
    justify-content: center;
    justify-items: center;
}

.icon{
    margin:auto;
    text-align: center;
    border-radius: 2%;
    background-color: var(--light);
    border: 5px solid var(--light);
    aspect-ratio: 1;
    overflow: hidden;
    max-width: 180px;
    align-content: center;
    text-align: center;
    z-index: 5;
}

.icon img{
    display:cover;
    height:100%;
    z-index: 10;
}

.status{
    border-radius: 30px;
    background-color: var(--light);
    margin:auto;
    text-align: center;
    min-height:60px;
    width:300px;
    padding:15px;
    align-content: center;
    position: relative;
    top:-10px;
    z-index: 1;
}

#statuscafe {
    color:var(--accent1);
}
#statuscafe-username {
    font-size: 12px;
    font-weight: 800;
    color:#a6b5ff;
    margin-bottom: 5px;
}

.parent{
    text-align: center;
    background-color:var(--accent2);
    width:fit-content;
    border-radius: 25px;
    padding: 20px;
    margin:auto;
    margin-top:20px;
    margin-bottom:20px;
    justify-self: center;
}

.socials{
    align-content: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    margin: auto;
    padding:5px;
    margin-top:10px;
}

.socials-icn{
    background-color: var(--accent1);
    border-radius: 100px;
    height:36px;
    width:36px;
    margin:0 5 0 5;
    transition:.3s;
    align-content: center;
    text-align: center;
    cursor: var(--pointer);
    
}

.socials-icn:hover{
opacity: .8;
transform: scale(130%);
}

.socials-icn img{
    object-fit:contain;
    margin: auto;
    height:20px;
}

.quicklinks{
    align-content: center;
    gap:5px;
    justify-content: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    padding:20px;
}

.cta-button{
    height:40px;
    min-height:20px;
    background-color: var(--accent2);
    color:var(--light);
    margin: auto;
    border-radius: 100px;
    border: 3px solid var(--accent1);
    align-content: center;
    transition: .3s;
    box-shadow: 0px 5px 0px var(--accent1);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom:20px;
    text-align: center;
    padding-right:20px;
    padding-left:20px;
    cursor: var(--pointer);
    letter-spacing:1;
}


.cta-button:hover{
    background-color: var(--accent1);
    box-shadow: 0px 1px 0px var(--accent1);
    transform: translateY(4px);
}

.cta-button a, a:visited{
    color:var(--light);
    text-decoration: none;
}

#mydrawbox{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:10px;
    justify-content: center;
}

.oekaki-parent{
    background-color:var(--accent3);
    border-radius: 10px;
    display: block;
    padding:10px;
}

* {box-sizing: border-box;}
        canvas {
            border: 1px solid rgb(204, 203, 203);
            cursor: var(--draw, crosshair);
        }
        

#submit{
    position: relative;
    width:100%;
    right:0px;
    padding:10px;
    margin-top:10px;
}

button{
    background-color: var(--light);
    border:none;
    border-radius:5px;
    transition: .2s;
    color:var(--accent2);
    font-weight: 600;
}

button:hover{
    scale: 110%;
}

#dbcredit a, a:visited{
    color:var(--light);
    text-decoration: none;
    position: absolute;
    bottom:10px;
    left:10px;
    
}

#dbcredit a:hover{
    opacity: .5;
    text-decoration: none;
}

.submitbutton{
    align-content: center;
    cursor: var(--pointer);
}

.oekaki{
    display:flex;
    flex-direction: row;
    justify-content: center;
}

.toolbar{
    max-width:80px;
    padding:5px;
    margin-right:10px;
    background-color: var(--accent3);
    border-radius: 5px;
    position: relative;
}

.tools{
    display:flex;
    flex-direction: column;
    gap:20px;
    justify-items: center;
    margin:auto;


}

.toolbtn button{
    height:30px;
    width:30px;
}

.fridge{
    max-width:400px;
    background-color: var(--accent3);
    padding:20px;
    border-radius: 15px;
    justify-self: center;
    height:380px;
    overflow-y: scroll;
}

 #gallery {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content:center;
    gap:10px;
    
}
.image-container {
    width:150px;
    height:160px;
    text-align: center;
    border-radius: 5px;
    margin:5px;
    background-size: cover;
    
}
.image-container img {
    border: 4px solid var(--light);
    aspect-ratio: initial;
    height: auto;
    display:cover;
    width:140px;
    height:140px;
    border-radius: 5px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.particle {
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('/img/bubblesprite.png');
    background-size: cover;
    border-radius: 50%;
    opacity: 0.8;
    animation: fall linear infinite;
}

@keyframes fall {
    from {
        transform: translateY(90vh);
        opacity: 1;
    }
    to {
        transform: translateY(1vh);
        opacity: 0;
    }
}

#bubbles{
width:99vw;
height:99vh;
overflow: hidden;
position: fixed;
top:0px;
left:0px;
z-index:-10;
}

.textbox{
background-color:#ffffff;
height:40px;
border-radius: 20px;
margin: auto;
color: var(--accent1);
padding:5px;
width:300px;
margin-top:10px;
margin-bottom:10px;
align-content: center;
}

.ocs{
justify-content:center;
display:flex;
flex-direction: row;
gap:25px;
margin-bottom:20px;
}

.ocschild:hover{
opacity: .8;
transform: scale(110%);
cursor: var(--pointer)
}

.ocschild{
width:80px;
height:80px;
border:1px solid;
opacity:1;
border-radius: 100%;
transition:.3s;
transition-delay: .1s;
background-color: #ffffff;
}