@import url("../fonts/inter.css");

:root {
    --contrast: #eee;
    --contrast2: #fff;
    --invertdm: 0%;
    --bar: #f4f4f4;
    --editor: #ffffff;
    --text-color: #000000;
    --border-color: #dadada;
    --theme-color: #157efb;
    --theme-text-color: #ffffff;
    --exit-color: #e9e9e9;
    --session-color: #f4f4f4;
    --note-button: #ffffff;
    --note-button-text-color: #ffffff;
    --unselected-note-button-text-color: #000000;
    --option-background: #ffffff;
    --invert: 100%;
    --bottomBarHover: #e4e4e4;
}

/* dark mode */

@media (prefers-color-scheme: dark) {
    :root {
        --invertdm: 100%;
        --contrast: #2d2f21;
        --contrast2: #2d2f21;
        --bar: #2d2f31;
        --editor: #202124;
        --text-color: #ffffff;
        --border-color: #393b3d;
        --theme-color: #157efb;
        --theme-text-color: #ffffff;
        --exit-color: #454649;
        --session-color: #2d2f31;
        --note-button: #202124;
        --note-button-text-color: #ffffff;
        --unselected-note-button-text-color: #ffffff;
        --option-background: #202124;
        --invert: 100%;
        --bottomBarHover: #e4e4e4;
    }

    .inoutdiv p {
        color: white !important;
    }

    .inoutdiv a {
        color: #969696 !important;
    }

    .inoutdiv input {
        color: white;
        background-color: var(--editor);
    }
}

p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-color);
    white-space: break-spaces;
}

body {
    margin: 0;
    background-color: var(--editor);
    font-family: "Inter", sans-serif;
}

/* Sign up/log in div */

.inoutdiv {
    border-radius: 8px;
    margin: 10%;
    padding: 30px;
    border: solid 1px var(--border-color);
    background-color: var(--bar);
}

.inoutdiv input {
    width: calc(100% - 120px);
    height: 30px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;

    border: solid;
    border-color: var(--border-color);
    border-width: 1px;
    border-radius: 8px;

}

.inoutdiv button {
    background-color: var(--theme-color);
    color: white;
    padding: 10px;
    margin-right: 5px;
    padding-left: 20px;
    padding-right: 20px;

    border: none;
    border-radius: 8px;

    font-size: 14px;

}

.iframe {
    position: fixed;
    right: 0;
    top: 38px;
    border: none;
    height: 276px;
    width: 400px;
    transform: translateX(26px);
}

.acctbutton {
    position: fixed;
    right: 0;
    margin: 0;
}

.spacer {
    margin-top: 30px;
}

.credit {
    position: fixed;
    left: 5px;
    color: white;
    z-index: -1;
    margin: 0;
    bottom: 5px;
    text-shadow: black 1px 1px 5px;
}

.newoauth, .oauthlist, .oauthentry {
    text-align: center;
    width: calc(100% - 17.5vh);
    margin-top: 7vh;
    margin-left: 7vh;
    margin-right: 7vh;
    padding: 15px 10px 30px;
    border-style: solid;
    border-image: none;
    border-radius: 8px;
    border-width: 1px;
    font-size: 17px;
    background-color: var(--bar);
    border-color: var(--border-color);
}

.oauthentry {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
}

.oauthentry button {
    padding: 10px;
    background-color: red;
    color: white
}

.oauthentry button:hover {
    background-color: black;
}

button {
    background-color: var(--theme-color);
    color: white;
    padding: 10px;
    margin-right: 5px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
}

button:hover {
    background-color: #152efb;
    transition: all 0.3s ease 0s;
}

h2 {
    display: block;
    margin-top: 20px;
    font-weight: 300;
}

.inoutdiv a {
    color: grey;
    text-align: center;
}

.background {
    position: fixed;
    z-index: -2;
    top: 0;
    width: 100%;
    min-height: 100%;
}

.hidden {
    display: none !important;
}

.w100 {
    font-weight: 300;
}

.w200 {
    font-weight: 300;
}

.w300 {
    font-weight: 300;
}

.w400 {
    font-weight: 400;
}

.w500 {
    font-weight: 500;
}

.w600 {
    font-weight: 600;
}

.w700 {
    font-weight: 700;
}

.w800 {
    font-weight: 800;
}

.w900 {
    font-weight: 900;
}