@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap");

body {
    display: flex;
    height: 100vh;
}

#wrapper {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    
    overflow-y: auto;
    overflow-x: hidden;

    padding-top: 150px;
}

.rainbowWrapper {
    left: -2.3vw;
    top: -7em;

    transform: scale(50%);
}

#baselayout {
    gap: 20px;
    position: relative;

    width: 80%;

    padding: 20px;
    padding-top: 55px;
}

#content {
    gap: 20px;
    position: relative;
}


/* Left-side */

section {
    flex: 0 1 300px;
}

#eyecatcher {
    height: 200px;
    object-fit: cover;
}

#siteButton {
    justify-content: center;
    align-items: center;
}

#siteButton img {
    margin: 10px 0;
    width: 88px;
}

textarea {
    width: 100%;
}

/* JS Calender */

#jsCalender {
    width: 356px;
}

.calendar-container {
    position: relative;
}

.calendar-container header {
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: space-between;
}

header .calendar-navigation {
    display: flex;
}

header .calendar-navigation span {
    height: 38px;
    width: 38px;

    border-radius: 50%;
    margin: 0 1px;

    text-align: center;
    line-height: 38px;


    user-select: none;
    -webkit-user-select: none;

    font-size: 1.9rem;

    transition: color .25s;
}

.calendar-navigation span:last-child {
    margin-right: -10px;
}

header .calendar-current-date {
    font-size: 1.2rem;
}

.calendar-body {
    padding: 5px;
}

.calendar-body ul {
    list-style: none;
    flex-wrap: wrap;
    display: flex;
    text-align: center;

    margin: 0;
    padding: 0;
}

.calendar-body li {
    width: calc(100% / 7 - 2px);
    font-size: 1.07rem;
    padding: 12px 0;
}

.calendar-body .calendar-weekdays li {
    cursor: default;
}

.calendar-body .calendar-dates li {
    position: relative;
    z-index: 1;
     
}

/* Central */

main {
    flex: 0 1 40%;
    /* gap: 10px; */
}

#home p {
    margin: 10px 0;
}

#spotlight a {
    align-items: center;
}

.displayScreenshots {
    width: 430px;
    height: 220px;

    object-fit: cover;
    object-position: top;

    overflow: hidden;

    border: 1px solid black;
    filter: drop-shadow(-1px 2px 3px rgba(0, 0, 0, 0.26));
}

#spotlight p {
    margin-top: 10px;
    text-align: center;
}

/* ~ Status Cafe */

#statusCafe {
    height: 270px;
    position: relative;
}

#statusCafe img,
#statusCafe canvas {
    height: 100%;
    object-fit: cover;
    object-position: top;

    border-radius: 15px;
}

#TBWrapper {
    position: absolute;
    top: 20px;
    right: 30%;
}

#thoughtBubble {
    max-width: 300px;
    width: 100%;
    height: 84px;
    padding: 10px;
    overflow: auto;

    border-radius: 20px;
}

#thoughtBubble::after {
    content: ".";
    font-weight: bold;

    display: block;
    position: absolute;
    bottom: -30px;
    right: 0;
    z-index: 1;

    text-align: right;
    font-size: 55px;
    line-height: 20px;

    /* For rounded dot */
    font-family: 'Times New Roman', Times, serif;


    
    width: 55px;
    height: 11px;

    border-radius: 11px;
}

/* ? Right-side */

.column {
    column-gap: 10px;
    align-content: flex-start;

    flex: 1 1;
}

#home,
#webgroups,
#status,
#stamps {
    overflow: auto;
}

#home,
#webgroups,
#status,
#updates,
#stamps {
    height: 165px
}

#status {
    flex: 0 1 46%;
}

#status h2 {
    margin-bottom: 10px;
}

#status h3 {
    flex: 1 1;
    font-weight: normal;
}

.statusBubble{
    display: flex;
    flex-flow: row wrap;

    border-radius: 20px;
    padding: 1px 10px;
    margin-bottom: 10px;
}

#updates {
    flex: 1 1;

    background: url("/Assets/myAssets/Updates.png") center/contain no-repeat, url("/Assets/BGs/blackboard.jpeg") center/cover;

    border-width: 11px;
    border-style: solid;
    border-image: url("/Assets/BGs/wood.jpg") 36 round;

     

    position: relative;
}

#updates pinkNewMoji {
    display: block;
    position: absolute;
    left: 10px;
    bottom: 10px;
}

#webgroups,
#stamps {
    flex: 1 1 45%;
}

#webgroups {
    display: flex;
    flex-flow: column nowrap;

    gap: 5px
}

/* RSS */

#blogRSS {
    height: 300px;
    flex: 1 1 100%;

    position: relative;
}

#rssFeedContainer {
    overflow: auto;
}

#blogRSS h1,
#blogRSS h2,
#blogRSS h3,
#blogRSS h4,
#blogRSS h5,
#blogRSS h6 {
    font-family: "Cormorant Garamond", Georgia, Cambria, "Times New Roman", Times, serif;
}

#blogRSS h1 {
    font-size: 1.6em;
}

#blogRSS #title {
    font-family: var(--headerFontStack);
    font-size: 2em;

    margin: 0px 10px;
}

#blogRSS p {
    font-family: "Cormorant Garamond", Georgia, Cambria, "Times New Roman", Times, serif;
    margin-top: auto;
    font-size: 1.2em;
}

.feed-item {
    margin-bottom: 20px;
    padding: 0px 10px;
}

.feed-item a {
    text-decoration: none;
}

.feed-item h3 {
    margin-bottom: 10px;
}

.feed-item small {
    text-align: right;
    margin: 5px 0 10px;
}

/* & PINK SPACE button */

#pinkSpaceLink {
    flex: 1;

    font-family: 'Courier New', Courier, monospace;
    background: #2a1420;
    color: #ffe3f1;
    padding: 10px 20px;
    border-radius: 5px;
}

#pinkSpaceLink::before {
    content: "\25B8 ";
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px;
}

/* Other */

hr {
    border: none;
}

#androses {
    position: absolute;
    top: -10.5vh;
    right: 0;
    pointer-events: none;
    z-index: 99;
}

h2 {
    font-family: var(--headerFontStack);
    font-size: 2em;
    font-weight: normal;
}

.box2 {
    flex: 1 1 100%;
}

#pixelRose {
    position: absolute;
    image-rendering: pixelated;
     
    z-index: 999;

    top: -1%;
    left: -2%;

    transform: rotate(90deg);
}

#keyD {
    position: absolute;
    z-index: 10;
    top: 6em;
    left: .8em;
}

#blackboard {
    display: none;
    position: absolute;
    z-index: 9999;
    pointer-events: none;

    width: 100vw;
    height: 100vh;

    justify-content: center;
    align-items: center;
}

#lightbox {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00000070;
}

#blackboard iframe {
    position: relative;
    z-index: 1;
    width: 50vw;
    height: 60vh;

    pointer-events: all;
}

#blackboard #bbWrapper {
    position: relative;
    width: fit-content;
}

#blackboard #exit {
    z-index: 2;
    position: absolute;
    right: 0.2em;
    bottom: -0.2em;

    font-size: 5em;
    color: white;
    pointer-events: all;

    image-rendering: pixelated;
}

/* ~ Media Queries */

@media (prefers-reduced-motion: reduce) {}

@media only screen and (max-width: 1024px) {}

@media only screen and (max-width: 810px) {

    #blackboard iframe {
        width: 100vw;
        height: 60vh;
        }

    #wrapper {
        align-items: flex-start;
        flex-flow: row nowrap;
        padding-top: 0;
    }

    #androses {
        top: 0;
        left: 50%;
        transform: translateX(-50%);

        width: 80%;
    }

    #androses span {
       font-size: 8vw;
    }

    #baselayout {
        flex: 1 1;
    }

    section {
        flex: 1 1;
    }

    .displayScreenshots {
        flex: none;
        width: 100%;
    }

    /* .box2,
    #stamps {
        flex: none;
    } */

    #jsCalender {
        width: 100%;
    }

    #pixelRose {
        align-self: flex-end;
    }

    #statusCafe {
        height: 300px;
    }
}


@media only screen and (max-width: 500px) {
    #thoughtBubble::after {
        display: block;
        position: absolute;
        top: .5em;
        right: -1.3em;
    }
}