@media (orientation: portrait) {
    .topbar {
        display: flex;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2em;
        padding: 1em;
        width: 100%;

        background: black;
        border-bottom: 1px solid white;

        .xtra {
            width: 40%;
            height: 100%;
            margin: auto 0;
        }

        .topbar-buttons {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: .5em;

            .signup {
                width: 40%;
                height: 280px;
                margin-bottom: 1em;
            }

            .toggle {
                position: relative;
                display: inline-block;
                width: 100%;
                height: 3em;
                margin: 0 auto;
            }

            .toggle input {
                display: none;
            }

            .slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: white;
                transition: 0.2s ease-out;
            }

            .slider:before {
                position: absolute;
                content: "";
                height: 2.6em;
                width: 2.6em;
                left: .2em;
                bottom: .2em;
                background-color: black;
                transition: 0.2s ease-out;
            }

            input:checked + .slider:before {
                left: unset;
                right: .2em;
            }
        }

        .anchors {
            display: flex;
            flex-direction: row;
            gap: 1em;
            justify-content: center;

            .whois {
                cursor: pointer;
                text-align: center;
                font-size: 2.75em;
                text-decoration: none;
                background: black;
                color: white;
                border: 1px solid white;
                font-weight: 100;
                margin-top: .5em;
                padding: .1em .5em;
            }
        }

        .address {
            text-align: center;
            width: 100%;
            font-size: 2.5em;

            p {
                margin: 0;
            }
            p:after {
                content: "";
                display: inline-block;
            }
            p:first-of-type {
                font-size: .8em;
            }
        }
    }

    .utilbar {
        display: none;
    }

    .container {
        width: 100%;

        display: flex;
        flex-direction: column;
        gap: unset;

        .col-left {
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: unset;
            min-height: unset;
            
            .logo {
                width: 100%;

                img {
                    position: unset;
                    width: 100%;
                }
            }

            .blurb {
                margin-top: unset;
                margin-left: unset;
                width: 100%;
                height: unset;
                padding-top: unset;

                div {
                    animation: none;
                    width: 99%;
                    margin-top: 1em;

                    div { div { div { div { div {
                        width: 100%;
                        height: unset;
                        font-size: 2em;
                        animation: none;
                        background: black;
                    } } } } }
                }
            }

            .schedule {
                margin-top: unset;
                margin-bottom: unset;
                width: 100%;

                .title {
                    font-size: 4.5em;
                    margin-bottom: .5em;
                    rotate: -2deg;
                }

                .schedule-body {
                    display: flex;
                    flex-direction: column;
                    line-height: unset;

                    p {
                        margin: .2em 0 .2em .5em;
                    }
                    p:first-of-type {
                        padding-bottom: .3em;
                        border-bottom: 1px solid white;
                    }
                    p:nth-of-type(3n) {
                        padding: .5em;
                        margin: 0;
                        margin-top: .5em;
                        background: black;
                        color: white;
                    }

                    .entry {
                        max-width: 50%;
                        font-size: 2em;
                    }
                    .entry:hover {
                        z-index: 999;
                    }

                    .schedule-room1, .schedule-room2, .schedule-room3, .schedule-room4, .schedule-audi {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        gap: 1em;
                        border-bottom: unset;

                        div:nth-of-type(1) {
                            width: 7em;
                            font-weight: 900;
                            font-size: 2em;
                        }
                    }

                    .schedule-time {
                        display: none;
                    }
                    .schedule-room1 {
                        .entry {
                            width: unset;
                            left: unset;
                        }
                    }
                    .schedule-room2 {
                        /* embroidery - wyn */
                        .entry:nth-of-type(2) {
                            width: unset;
                            left: unset;
                        }
                        /* zinecrew - azn */
                        .entry:nth-of-type(3) {
                            width: unset;
                            left: unset;
                        }
                        /* g4g - eleni */
                        .entry:nth-of-type(4) {
                            width: unset;
                            left: unset;
                        }
                    }
                    .schedule-room3 {
                        /* imre */
                        .entry:nth-of-type(2) {
                            width: unset;
                            left: unset;
                        }
                    }
                    .schedule-room4 {
                        /* luddites - fred */
                        div:nth-of-type(2) {
                            width: unset;
                            left: unset;
                        }
                    }
                    .schedule-audi {
                        /* lensbased */
                        div:nth-of-type(2) {
                            width: unset;
                            left: unset;
                        }
                    }
                }
            }
        }
    }

    #bookcase-sign {
        font-size: 4.5em;
        text-align: right;
        padding: 0 .2em;
    }

    #bookcase {
        max-width: 100%;
        justify-content: baseline;
        
        .book {
            min-height: 20em;
            min-width: 12.5%;
            font-size: 2.5em;
        }
    }

    #modal {
        left: 40%;
        bottom: 22%;
        scale: 2.5;

        filter: drop-shadow(0 0 .5em black) drop-shadow(0 0 1em black) drop-shadow(0 0 2em black);
    }

    .flipped {
        transform: rotateY(180deg) translateX(15%);
    }
}