/* Main Stuff */

body {
    background-image: url(bg/cbg.gif);
    color: black;
    font-family: Verdana;
}

sub-body {
    display: block;
    width: 90%;
    margin: auto;
}

.label {
    display: block;
    margin: auto;
    padding-bottom: 15px;
}

.window {
    margin: 10px;    
}

p {
    font-size: 12px;
    display: block;
    margin: auto;
    padding: 10px;
}

main {
    display: flex;
}

.left {
    width: 30%;
}

nav {
    margin-top: 20px;
    width: 75%;
    display: block;
    margin-inline: auto;
}

nav > ul > li {
    padding-inline: 20px;
}

.item {
    letter-spacing: normal;
    transition: .6s;
}

.item:hover {
    letter-spacing: 1pt;
    transition: .2s;
}

.right {
    width: 70%;
}

.bottom-section {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
}

.bottom-section > article:nth-child(1) {
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 0;
}

.bottom-section > article:nth-child(2) {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

/* Little Things */

#logo {
    max-width: 50%;
    display: block;
    margin: auto;
}

.soundcloud {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.soundcloud > div {
    width: 100%;
}

#graphics-and-webrings {
    display: grid;
    grid-template-columns: 100%;
}

#webrings-box {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

#webrings-box > div {
    width: 100%;
    margin: 10px;
    text-align: center;
}

#intro-section {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
}

#introduction {
    flex-grow: 4;
    flex-shrink: 1;
    flex-basis: 0;
}

#manifesto {
    flex-grow: 9;
    flex-shrink: 1;
    flex-basis: 0;
}

.contact-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.contact-block, #kick-the-email {
    border: 0;
    padding: 1px;
}

.contact-block:hover,
#kick-the-email:hover {
    border: 1px black solid;
    padding: 0;
}

#kick-the-email {
    display: block;
    margin-left: 10px;
}

#email {
    margin-left: 10px;
    text-align: center;
    padding: 5px;
    font-size: 11px;
    display: none;
}

fuck-you-email-harvesters {
    display: none;
}

#updates {
    overflow: scroll;
    overflow-x: hidden;
    height: 300px;
    scroll-snap-type: y mandatory;
}

#navbar-desktop {
    display: block;
}
#navbar-mobile {
    display: none;
}

#contact-body {
    display: block;
    margin: auto;
    padding: 0;
    max-width: 392px;
}

#banner > a > img {
    max-width: 100%;
}

#graphic-dump {
    width: max(215px, calc(100%-10px))
}

#butto {
    width: 205px;
    display: block;
    margin: auto;
    text-align: center;
}

#mz-title {
    font-size: 16pt;
    font-weight: bolder;
    padding-block: 0;
}

#mz-date {
    font-size: 14pt;
    padding-block: 0;
}

/* STATUSCAFE */

#statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
  }
  
  #statuscafe-username {
    margin-bottom: .5em;
  }
  
  #statuscafe-content {
    margin: 0 1em 0.5em 1em;
  }


/* media queries */

@media (min-width: 800px) {
    .phone {
        display: none;
    }
    .desktop {
        display: inline;
    }
}
@media (max-width: 800px) {
    .phone {
        display: inline;
    }
    .desktop {
        display: none;
    }
}


@media (max-width: 1400px) {
    .left {
        width: 35%;
    }
    .right {
        width: 65%;
    }
    #intro-section {
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
    }
    #introduction {
        flex-grow: 4;
        flex-shrink: 1;
        flex-basis: 0;
    }
    #manifesto {
        flex-grow: 7;
        flex-shrink: 1;
        flex-basis: 0;
    }
}

@media (max-width: 1300px) {
    .entire-page {
        display: block;
    }
}

@media (max-width: 1200px) {
    .left {
        width: 40%;
    }
    .right {
        width: 60%;
    }
    #intro-section {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }
    #introduction {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
    }
    #manifesto {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
    }
}

@media (max-width: 1000px) {
    .left {
        width: 100%;
        order: 2;
    }
    .right {
        width: 100%;
        order: 1;
    }
    main {
        flex-wrap: wrap;
    }
    #navbar-desktop {
        display: none;
    }
    #navbar-mobile {
        display: inline;
        width: 100%;
    }
    #logo {
        max-width: clamp(100px, 60%, 240px);
    }
    #graphics-and-webrings {
        display: grid;
        grid-template-columns: min-content auto;
    }
}

@media (max-width: 730px) {
    #graphics-and-webrings {
        display: grid;
        grid-template-columns: 100%;
    }
    #graphic-dump {
        width: max-content;
        margin: auto;
        display: block;
    }
}

@media (max-width: 600px) {
    .soundcloud > div {
        width: 100%;
    }
    .soundcloud > div:nth-child(2) {
        display: none;
    }
    #manifesto-buttons {
        display: none;
    }
    .bottom-section {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .bottom-section > article:nth-child(1) {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
    }
    
    .bottom-section > article:nth-child(2) {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
    }
    
}