/* FONTS */

@font-face {
    src: url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf);
    font-family: hearts;
}

@font-face {
    font-family: kiwi;
    src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
}

@font-face {
    font-family: pixelpoiiz;
    src: url(https://dl.dropbox.com/s/6ju4skeoofqwcqu/pixelpoiiz.ttf);
}

html {
    cursor: url("https://cur.cursors-4u.net/nature/nat-9/nat835.cur"), auto;
}

.section {
      display: none;
    }

#home {
    display: block;
}

.section:target {
      display: block;
    }

    /* When another section is targeted, hide Home */
body:has(.section:target) #home {
      display: none;
}

/* mains */

h2 {
    font-family: kiwi;
}
        
p {
    font-family: hearts;
    
}

mark {
    background-color: rgb(152, 194, 87);
}

body {
    background-image: url("https://files.catbox.moe/9sipms.jpg")
}

#container {
    padding:10px;
    margin: 20px auto;
    max-width: 800px;
    align-items: center;
    justify-content: center;
}

#white-container {
    background-color: white;
    border: 9px solid;
    border-image: url("https://i.postimg.cc/sxwTXvr5/simplescallop.png") 8 round;
    padding: 0 10px 10px 10px;
    margin: 20px auto;
    max-width: 800px;
    align-content: center;
    background: #fff;
}

/* Header */

header {
    text-align: center;
    font-family: kiwi;
    font-size: 2em;
    letter-spacing: 2em;
}

.caterpillar-header {
    max-height: 250px;
    max-width: 600px;
    display: block;
    margin: auto;
}

/* Main layout (3 columns) */

main {
    display: flex;
    margin: 20px 0;
}

/* Left & right sidebars */

.sidebar {
    width: 20%;
    padding: 0 10px 0 10px;
    background: white;  
}

.left {
    margin-right: 10px;
}

.right {
    margin-left: 10px;
}

#dancing-cat {
    max-height:100px;
    max-width:100px;
    display: block;
    margin: auto;
}

/* Middle content */

.content {
    display: block;
    margin: auto;
    margin-bottom: 10px;
    height: auto;
    width: max;
}

.apple-icon {
    height: 10px;
}

.nav-box {
    background-color: #fafafa;
    border-radius: 25px;
    border: 2px dotted;
    height: auto;
    padding: 0 1em 5px 1em;
    margin-bottom: 1em;
    overflow-y: scroll;
    font-size: small;
    font-family: pixelpoiiz;
}

.box {
    background-color: #fafafa;
    border-radius: 25px;
    border: 2px dotted;
    height: auto;
    width: max;
    padding: 0 1em 5px 1em;
    margin-bottom: 1em;
}

.nav {
    line-height: 1px;
}


#wobble{
    text-align: center;
    font-family: kiwi;
    font-size: 2em;
    margin-right: -1em;
    font-weight: bold;
}

.updates {
    border-image: url(https://files.catbox.moe/9fv1wg.png) 8 fill round;
    height: 167px;
    overflow-y: scroll;
}

.to-do {
    height: 300px;
    overflow-y: scroll;
}

.todo {
    margin-top: 1em;
    margin-bottom: -1em;
    font-size: medium;
}

.chat {
    height: auto;
    width: 160px;
    margin-bottom: -1em;
}
/* link effects */

a {
text-decoration: none;
color: rgb(0, 0, 0);
cursor: pointer;
}
.link {
position: relative;
transition: clip-path 275ms ease;
}
.link:hover span::before, .link:focus span::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
background-color: rgb(152, 194, 87);
}
.link span {
position: relative;
display: inline-block;
}
.link span::before {
position: absolute;
content: attr(data-content);
text-decoration: underline;
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
transition: clip-path 275ms ease;
}
span.dashed::before {
text-decoration-style: dashed;
}
span.wavy::before {
text-decoration-style: wavy;
}

.find-button {
    display: flexbox;
    font-family: pixelpoiiz;
    background-color: #FFF;
    border-style: dashed;
    padding: 10px;
    margin: 21px; 
    line-height: 3em;
    transition: all 1s;
}

.find-button:hover {
    background-color: rgb(152, 194, 87);
    padding: 1em;
}

#statuscafe {
    margin-top: 10px;
    margin-bottom: -28px;
    width: 158px;
    background-color: #ffffff;
    border: 2px solid #000000;
}
#statuscafe-username {
    margin-bottom:0.5em;
    padding-top: 1em;
    padding-left: 1em;
    font-family: hearts;
    font-size: x-small;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    font-family: hearts;
}

.home-button {
    text-align: center;
    font-family: pixelpoiiz;
    background-color: #FFF;
    border-style: dashed;
    padding: 10px;
    display: block;
    margin: auto;
    line-height: 3em;
    transition: all 1s;
}

.home-button:hover {
    background-color: rgb(152, 194, 87);
    padding: 1em;
}

/* Footer */

footer {
    font-family: hearts;
    text-align: center;
    padding: 20px;
    background: rgb(152, 194, 87);
    margin-top: 10px;
}