/* =========================================
   BASE
========================================= */



body {
    background-color: #D6D0C8;
    background-image: url("https://gabestash.neocities.org/backgrounds/multicolor/multi575.png");

    margin: 0;
    padding: 30px 20px 60px;

    color: #302A27;

    overflow-x: hidden;

    /* EVERYTHING IS COMIC SANS */
    font-family: "Comic Sans MS", "Comic Sans", cursive;

    cursor:url('https://brunch-and-recess.neocities.org/curshead3.png'), auto    
 
}
/* Vinyl Showcase - www.kazimariusz.com */

  #vinyl-gallery * {
    all: unset;
  }
  
  #vinyl-gallery {
    all: initial;
    width: 100%;
    height: 230px;
    margin: 30px 0;
    display: flex;
    flex-direction: row;
    position: relative;
    margin-left: -6px;
  }
  
  #vinyl-gallery .vinyl {
    perspective: 500px !important;
    width: 18px;
    transition: width 0.5s;
  }
  
  #vinyl-gallery .vinyl:hover {
    width: 148px;
  }
  
  #vinyl-gallery img {
    transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s;
    width: 180px;
    height: 180px;
    transform: rotateX(0deg) rotateY(25deg);
    transform-style: preserve-3d;
    border-radius: 4px;
    border: 2px solid rgba(0, 0, 0, 0.1);
  }
  
  #vinyl-gallery .vinyl:hover img {
    transform: rotateX(0deg) rotateY(10deg);
    width: 188px;
    height: 188px;
    margin-top: -2px;
  }
  
  #vinyl-gallery .title {
    display: block;
    visibility: hidden;
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    padding-left: 6px;
  }
  
  #vinyl-gallery .vinyl:nth-child(n):hover + .title {
    visibility: visible;
  }
/* Windows 7 Sticky Note - www.kazimariusz.com */

@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');

.winsticky {
    --color-top:#F5F5F5;
    --color-background-start:#FFFFFF;
    --color-background-end:#EBEBEB;
}

.winsticky {
    font-family: "Caveat", cursive;
    font-size:24px;
    min-width: 225px;
    min-height: 206px;
    display: inline-flex;
    flex-direction: column;
    box-shadow: 0px 2px 5px #000;
}

.winsticky .ws_top {
    background-color: var(--color-top);
    height: 35px;
    position: relative;
    line-height:0px;
}

.winsticky .ws_top:before {
    position: absolute;
    left:16px;
    top:12px;
    content: url('data:image/svg+xml,<svg width="10" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="2" x="0" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="10" x="4" y="0" fill="hsl(0, 0%, 0%)"></rect></svg>');
}

.winsticky .ws_top:after {
    position: absolute;
    inset:0px;
    left:calc(100% - 27px);
    top:11px;
    display:block;
    content:"";
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAMhJREFUKFNtkkENwkAURF/vKMABIkABNYAAEIAAigAEUAFVwJULiCCQcEUBAugsf5rtpv/ys/kzs/Nnt+Jf8+if6FMtYaoAr6NfgTdQEgXeAl1OOIfssSe3QRJQYprtgIsItqRBHQANH8AiB0vEBJNmwClI3iMp22ZOMGAJ3OIgoAjDTiVBnuVX9lzaqfGhtGSwQB2wAQ7ACrg7VvvPwUrJ5fSSNd+gjDWQ532v/MrSUxDP2KX1O1h9lEhBkr3GBKmovhOvPPomP5tVKmelHKPVAAAAAElFTkSuQmCC");
    background-repeat: no-repeat;
}

.winsticky .ws_top:before, .winsticky .ws_top:after {
    opacity:0.5;
}

.winsticky .ws_content {
    background: linear-gradient(var(--color-background-start) 0%, var(--color-background-end) 100%);
    flex-grow: 1;
    position: relative;
    padding:6px 5px;
}

.winsticky .ws_content:after {
    position: absolute;
    right:4px;
    bottom:4px;
    content:url('data:image/svg+xml,<svg width="10" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" x="9" y="0" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="1" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="9" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="5" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="9" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="9" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="5" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="4" y="5" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="5" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="4" y="9" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="1" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="0" y="9" fill="hsl(0, 0%, 0%)"></rect></svg>');
    opacity:0.3;
    line-height:0px;
}

/* Colours */

.winsticky.white {
    --color-top:#F5F5F5;
    --color-background-start:#FFFFFF;
    --color-background-end:#EBEBEB;
}

.winsticky.yellow {
    --color-top:#f8f7b6;
    --color-background-start:#fefecc;
    --color-background-end:#fcf9a1;
}

.winsticky.green {
    --color-top:#c5f7c1;
    --color-background-start:#d2ffcc;
    --color-background-end:#ade3aa;
}

.winsticky.blue {
    --color-top:#c9ecf8;
    --color-background-start:#d9f3fb;
    --color-background-end:#afd0e8;
}

.winsticky.purple {
    --color-top:#D4CDF3;
    --color-background-start:#DEDAFE;
    --color-background-end:#C6B8FE;
}

.winsticky.pink {
    --color-top:#EDC0ED;
    --color-background-start:#F4CFF4;
    --color-background-end:#E6A8E6;
}


/* =========================================
   MAIN PAGE WRAPPER
========================================= */

#all {
    width: min(1100px, 100%);

    margin: 0 auto;

    position: relative;

    /* Room for chat on the right */
    padding-right: 390px;
}


/* =========================================
   BANDR IMAGE
========================================= */

#img {
    background-image: url("https://brunch-and-recess.neocities.org/images/BandR.gif");

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    position: relative;

    width: 375px;
    height: 175px;

    z-index: 2;

    margin-left: 12px;
    margin-bottom: -55px;
}


/* =========================================
   HEADER
========================================= */

#header {
    background-image: url("https://farm9.staticflickr.com/8301/7853579222_7cfd0b99a6_n.jpg");

    background-color: #4E4B44;

    color: #FFFFFF;

    font-family: "Comic Sans MS", "Comic Sans", cursive;

    border-radius: 0 0 7px 7px;

    width: min(560px, 100%);

    min-height: 105px;

    margin-left: 12px;
    margin-top: 55px;

    box-shadow: 5px 5px #302A27;

    border: 3px solid #4f7f4f;

    display: flex;

    align-items: center;
    justify-content: center;
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}

#header h1 {
    margin: 0;

    padding: 15px;

    font-family: "Comic Sans MS", "Comic Sans", cursive;

    font-weight: normal;

    text-align: center;

    font-size: clamp(28px, 5vw, 40px);

    line-height: 1.1;

    text-shadow: 3px 3px #302A27;
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}


/* =========================================
   MAIN CONTENT
========================================= */

#maincontainer {
    width: min(600px, 100%);cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}

.postcontainer {
    width: 100%;

    position: relative;

    top: 10px;

    color: #302A27;

    margin-bottom: 30px;cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
    
}

.icon {
    width: 100px;
    height: 100px;

    box-shadow: 4px 4px #4E4B44;

    position: absolute;

    top: -45px;
    left: 0;

    z-index: 3;cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}

.icon img {
    width: 100%;
    height: 100%;

    object-fit: cover;cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}

.post {
    background-image: url("https://i.imgur.com/bm02JPx.png");

    background-color: #faf7f5;

    width: calc(100% - 35px);

    box-shadow: 5px 5px #302A27;

    margin-top: 55px;
    margin-left: 35px;

    overflow: hidden;
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
    
}

.subheaders {
    text-align: right;

    padding: 5px 8px 0;

    margin: 0;

    font-family: "Comic Sans MS", "Comic Sans", cursive;

    font-size: 22px;

    font-weight: normal;
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}

.date {
    text-align: right;

    padding: 0 8px;

    margin: 0;

    font-family: "Comic Sans MS", "Comic Sans", cursive;

    font-size: 16px;

    font-weight: normal;

    text-decoration: underline;

    text-decoration-style: dashed;
}

.posttext {
    padding: 15px;

    text-align: justify;

    letter-spacing: 0.5px;

    font-family: "Comic Sans MS", "Comic Sans", cursive;

    font-size: 17px;

    line-height: 1.45;
}

.posttext img {
    max-width: 100%;
    height: auto;
}


/* =========================================
   CHAT
   STATIC — DOES NOT FOLLOW SCROLLING
========================================= */

#chatcolumn {

    /*
       IMPORTANT:
       This is NOT fixed or sticky.

       It lives normally inside #all,
       so it scrolls away with the page.
    */

    position: absolute;

    top: 205px;

    right: 0;

    width: 360px;

    height: 650px;

    display: flex;

    flex-direction: column;cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}


/* CHAT TITLE */

#chatlabel {

    background-image: url("https://farm9.staticflickr.com/8301/7853579222_7cfd0b99a6_n.jpg");

    background-color: #4E4B44;

    color: white;

    border: 3px solid #4f7f4f;

    border-bottom: none;

    box-shadow: 5px 0 #302A27;

    padding: 7px 10px;

    text-align: center;

    font-family: "Comic Sans MS", "Comic Sans", cursive;

    font-size: 23px;

    font-weight: bold;

    text-shadow: 2px 2px #302A27;

    border-radius: 7px 7px 0 0;
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}


/* CHAT IFRAME */

#chattable {

    width: 100%;

    height: 100%;

    min-height: 500px;

    border: 3px solid #4f7f4f;

    border-top: none;

    background: #faf7f5;

    box-shadow: 5px 5px #302A27;

    display: block;
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}


/* =========================================
   NAVIGATION
========================================= */

#nav {

    position: fixed;cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;

    top: 30px;

    right: 15px;

    width: 190px;

    max-height: calc(100vh - 60px);

    overflow-y: auto;

    background-image: url("https://farm9.staticflickr.com/8301/7853579222_7cfd0b99a6_n.jpg");

    background-color: #4E4B44;

    border-radius: 0 0 7px 7px;

    text-align: center;

    font-family: "Comic Sans MS", "Comic Sans", cursive;

    box-shadow: 2px 3px #302A27;

    border-bottom: 3px solid #4f7f4f;

    padding: 0 10px 10px;

    z-index: 20;
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}


/* CHANNEL HEADER */

#channels {

    position: sticky;cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;

    top: 0;

    width: calc(100% + 20px);

    margin-left: -10px;

    height: 40px;

    text-align: center;

    color: #FFFFFF;

    font-family: "Comic Sans MS", "Comic Sans", cursive;

    font-size: 25px;

    line-height: 40px;

    font-weight: bold;

    text-transform: lowercase;

    background-image: url("https://farm9.staticflickr.com/8301/7853579222_7cfd0b99a6_n.jpg");

    background-color: #4E4B44;

    border-bottom: 3px solid #4f7f4f;

    text-shadow: 2px 2px #302A27;

    z-index: 2;
    
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}


#nav ul {

    padding: 0;cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;

    margin: 5px 0 0;
}

#nav li {

    list-style-type: none;

    margin: 10px 0;

    padding: 0;
    
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}


/* =========================================
   NAVIGATION IMAGE BUTTONS
========================================= */

#nav li a {

    display: block;cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;

    width: 170px;

    height: 45px;

    margin: 0 auto;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    box-shadow: 2px 2px #302A27;

    font-family: "Comic Sans MS", "Comic Sans", cursive;

    font-size: 0;

    text-indent: -9999px;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
        
        cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}

#nav li a:hover {

    transform: translate(-2px, -2px);

    box-shadow: 4px 4px #302A27;
    
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}

#nav li a:active {

    transform: translate(1px, 1px);

    box-shadow: 1px 1px #302A27;
    
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}


/* NAV IMAGES */

#nav li.home a {
    background-image: url("IMAGE-HOME-HERE");
}

#nav li.about a {
    background-image: url("IMAGE-ABOUT-HERE");
}

#nav li.mike a {
    background-image: url("https://brunch-and-recess.neocities.org/images/mike.gif");
}

#nav li.renzo a {
    background-image: url("IMAGE-RENZO-HERE");
}

#nav li.max a {
    background-image: url("https://brunch-and-recess.neocities.org/images/max.gif");
}

#nav li.miguel a {
    background-image: url("https://brunch-and-recess.neocities.org/images/miguel.gif");
}

#nav li.erick a {
    background-image: url("https://brunch-and-recess.neocities.org/images/erik.gif");
}

#nav li.kevin a {
    background-image: url("https://brunch-and-recess.neocities.org/images/kevin.png");
}

#nav li.dani a {
    background-image: url("IMAGE-DANI-HERE");
}

#nav li.other a {
    background-image: url("IMAGE-OTHER-HERE");
}


/* =========================================
   LINKS
========================================= */

a,
a:visited,
a:hover,
a:active {

    color: #d9d3c5;

    text-decoration: none;

    font-family: "Comic Sans MS", "Comic Sans", cursive;
}


/* =========================================
   SCROLLBAR
========================================= */

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

::-webkit-scrollbar-track {
    background-color: #302a27;
}

::-webkit-scrollbar-thumb {
    background-color: #615955;
}


/* =========================================
   CREDIT
========================================= */

#credit {

    font-family: "Comic Sans MS", "Comic Sans", cursive;

    font-size: 12px;

    position: fixed;

    bottom: 0;

    right: 0;

    padding: 3px 5px;

    z-index: 100;
    
    cursor:url('https://brunch-and-recess.neocities.org/cursheadclick.png'), auto;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1150px) {

    body {
        padding-right: 210px;
    }

    #all {
        padding-right: 350px;
    }

    #chatcolumn {

        width: 310px;

        right: 0;

        top: 205px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 850px) {

    body {

        padding: 15px 10px 80px;
    }

    #all {

        width: 100%;

        padding-right: 0;

        margin: 0 auto;
    }


    /* HEADER */

    #img {

        width: min(375px, 90vw);

        height: 145px;

        margin-left: auto;

        margin-right: auto;

        margin-bottom: -40px;
    }

    #header {

        width: calc(100% - 10px);

        margin-left: 5px;

        margin-right: 5px;

        margin-top: 40px;

        min-height: 90px;
    }

    #header h1 {

        font-size: clamp(25px, 8vw, 36px);
    }


    /* POSTS */

    #maincontainer {

        width: 100%;
    }

    .postcontainer {

        width: 100%;
    }

    .post {

        width: calc(100% - 20px);

        margin-left: 20px;
    }

    .icon {

        width: 75px;

        height: 75px;

        top: -35px;
    }

    .subheaders {

        font-size: 20px;

        padding-left: 55px;
    }

    .posttext {

        padding: 13px;

        font-size: 16px;

        text-align: left;
    }


    /* =====================================
       MOBILE CHAT
    ===================================== */

    #chatcolumn {

        /*
           Back to normal document flow.
           It will NOT follow the user.
        */

        position: relative;

        top: auto;

        right: auto;

        left: auto;

        width: 100%;

        height: 650px;

        margin: 65px 0 30px;
    }

    #chattable {

        min-height: 0;

        height: 100%;
    }


    /* =====================================
       MOBILE NAVIGATION
    ===================================== */

    #nav {

        position: fixed;

        top: auto;

        bottom: 0;

        left: 0;

        right: 0;

        width: 100%;

        max-height: none;

        height: 65px;

        border-radius: 7px 7px 0 0;

        padding: 0;

        overflow-x: auto;

        overflow-y: hidden;

        white-space: nowrap;

        box-shadow: 0 -3px #302A27;

        display: flex;

        align-items: center;
    }

    #channels {

        position: sticky;

        left: 0;

        flex: 0 0 105px;

        width: 105px;

        height: 65px;

        margin: 0;

        line-height: 65px;

        border-bottom: none;

        border-right: 3px solid #4f7f4f;

        z-index: 5;
    }

    #nav ul {

        display: flex;

        align-items: center;

        gap: 10px;

        margin: 0;

        padding: 10px;
    }

    #nav li {

        flex: 0 0 auto;

        margin: 0;
    }

    #nav li a {

        width: 120px;

        height: 42px;
    }

    #credit {

        bottom: 66px;
    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 500px) {

    body {

        padding: 5px 5px 75px;
    }

    #img {

        width: 90vw;

        height: 120px;
    }

    #header {

        margin-top: 35px;

        min-height: 80px;
    }

    #header h1 {

        font-size: 25px;

        padding: 12px 8px;
    }

    .post {

        width: calc(100% - 10px);

        margin-left: 10px;
    }

    .icon {

        width: 65px;

        height: 65px;

        top: -30px;
    }

    .subheaders {

        font-size: 18px;

        padding-left: 45px;
    }

    .date {

        font-size: 14px;
    }

    .posttext {

        font-size: 15px;

        padding: 11px;
    }

    #chatcolumn {

        height: 600px;

        margin-top: 55px;
    }

    #chatlabel {

        font-size: 20px;
    }

    #channels {

        flex-basis: 90px;

        width: 90px;

        font-size: 20px;
    }

    #nav li a {

        width: 105px;

        height: 38px;
    }

}
```