main {
    padding: .5% 1%;
    height: 77.5%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    @media (orientation: portrait) {
        height: 80%;
        flex-direction: column;
    }

    .side {
        width: 17%;
        height: 100%;

        @media (orientation: portrait) {
            width: 100%;
            height: 17%;

            @media screen and (max-width: 767px) {
                display: none;
            }
        }
    }

    #web {
        width: 65%;
        height: 100%;

        @media (orientation: portrait) {
            width: 100%;
            height: 65%;

            @media screen and (max-width: 767px) {
                height: 100%;
            }
        }

        #w-searchBar {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 1%;
            margin-bottom: 1%;

            @media (orientation: portrait) {
                @media screen and (max-width: 767px) {
                    flex-direction: column;
                }
            }

            h2 {
                margin-right: 2%;
                text-align: center;

                @media (orientation: portrait) {
                    font-size: 2.5em;
                    margin-right: 0;

                    @media screen and (max-width: 767px) {
                        margin-bottom: 2%;
                    }
                }
            }

            #inputDiv {
                width: 50%;

                @media (orientation: portrait) {
                    @media screen and (max-width: 767px) {
                        width: 100%;
                    }
                }

                select {
                    option:first-child {
                        display: none;
                    }
                }
            }

            .cyber-select-full::before {
                width: 30%;

                @media (orientation: portrait) {
                    @media screen and (max-width: 767px) {
                        width: 80%;
                    }
                }
            }
        }

        #w-content {
            padding: 1%;
            width: 100%;
            height: 91%;

            @media (orientation: portrait) {
                @media screen and (max-width: 767px) {
                    height: 87.5%;
                }
            }

            #w-inner-content {
                width: 100%;
                height: 100%;

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                p {
                    text-align: center;
                    margin-bottom: 5%;
                    font-size: 2.5em;

                    @media (orientation: portrait) {
                        font-size: 3.5em;

                        @media screen and (max-width: 767px) {
                            font-size: 3.2em;
                        }

                        @media screen and (max-width: 480px) {
                            font-size: 2.25em;
                            margin-bottom: 10%;
                        }
                    }

                    .smaller-text {
                        font-size: .5em;
                    }

                    .bigger-text {
                        font-size: 2em;
                    }
                }

                button {
                    width: 60%;

                    @media (orientation: portrait) {

                        @media screen and (max-width: 767px) {
                            width: 95%;
                        }
                    }
                }
            }
        }
    }
}