@import url(./style.css);

@media (width < 1550px) {
    .utilbar {
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: top;
        padding: 1em;
        gap: 1em;
        width: 100%;
        z-index: 99;

        .xtp {
            width: 10%;

            .xtra {
                height: auto;
            }

            .whois {
                display: block;
                text-decoration: none;
                text-align: center;
                cursor: pointer;
                font-family: 'fauna';
                font-size: 1.2em;
                background: black;
                color: white;
                border: 1px solid white;
                font-weight: 100;
                margin-top: .2em;
                width: 100%;
            }
            .whois:hover {
                background: white;
                color: black;
            }
        }
        
        .signup {
            position: absolute;
            top: 1em;
            right: calc(25% + 2em);
            padding: .1em .2em;
            width: 150px;
        }

        .toggles {
            display: flex;
            flex-direction: column;
            gap: .5em;
            width: 10%;

            .toggle {
                position: relative;
                display: inline-block;
                width: 100%;
                height: 1.5em;
                overflow: hidden;
            }

            .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: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: black;
                transition: 0.2s ease-out;
            }

            input:checked + .slider {
                background-color: white;
            }

            input:checked + .slider:before {
                left: unset;
                right: 4px;
                background-color: black;
            }
        }

        .address {
            position: absolute;
            top: 1em;
            right: 1em;

            width: 25%;
            text-align: justify;
            text-justify: inter-character;
            filter: drop-shadow(0 0 .5em black) drop-shadow(0 0 1em black) drop-shadow(0 0 .2em black);

            p {
                margin: 0;
            }
            p:after {
                content: "";
                display: inline-block;
                width: 100%;
            }
        }
    }
    
    .container {
        width: 95vw;

        .col-left {
            .logo {
                align-items: right;
                img {
                    top: 8%;
                    left: 20%;
                    width: 55%;
                }
            }
        }
        .col-right {
            margin-top: 2em;
        }
    }
    .sidebar {
        display: none;
    }
}