@import ".styles.css";

.mini-profile {
    display: flex;
    flex-direction: row;
}

.content {
}

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

    .qotp-header {
        font-size: var(--font-size-subheader);
    }

}

.embeds {
    display: flex;
    justify-content: center;
    align-content: center;
}

.device-warning {
    display: flex;
    flex-direction: column;
    padding: var(--spacing);
    gap: var(--spacing);
}

.device-warning-button {
    background-color: var(--bg-color);
	font-family: "Jersey 15", "Courier New", "monospace";
    font-size: var(--font-size-normal);
    color: var(--txt-color);
    padding: var(--spacing);
}

.device-warning-background {
	background-color: var(--bg-color);
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    margin: calc(-1 * var(--xxxl-spacing));
    z-index: 100;
}

.container-main {
	flex-grow: 1;
    display: flex;
    flex-direction: row;
    padding: var(--spacing);
    gap: var(--spacing);
}

.left {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

.middle {
    flex: 3 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

.right {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

.simple-border {
	border: var(--simple-border);
}