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

body {
    background-color: #ffc5ed;
}

/*---- page-body ----*/

#wrapper {
    width: 80%;
    margin: 50px auto;
}

#border-text {
    background-color: #efefef;
    color: #ffa8c8;
    text-align: center;
}

#sidebar {
    background-color: rgb(255, 217, 239);
}

#page-body {
    background-color: #efefef;
}

@media (min-width: 1000px) { 

    /*---- page-body ----*/

    #wrapper {
        width: 44%;
        display: flex;
        margin: 0 0;
    }

        #border-text {
        width: 20px;
        height: 100%;
        position: absolute;
        text-wrap: nowrap;
    }

    #sidebar {
        position: absolute;
        left: 20px;
        width: 150px;
        height: 100svh;
    }

    #border-text p {
        padding-left: 10px;
        transform: rotate(90deg);
    }

    #page-body {
        margin-left: 170px;
        min-width: 400px;
        height: 100svh;
        border-right: 2px solid rgb(255, 217, 239);
    }

    #sketch {
        display:none;
        position: absolute;
        background-image: url(/assests/graphics/fluttershy/bgsketch.png);
        background-size: cover;
        width: 100%;
        height: 100svh;
        opacity: 0.5;
        z-index: -9999;
    }
}