@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:slnt,wght@-14..14,100..1000&display=swap');

@import "navigation.css";
@import "aside.css";
@import "loader.css";

@import "login-screen.css";
@import "book-screen.css";
@import "account-screen.css";
@import "character-screen.css";
@import "register-screen.css";

/*:root {
    --primary: #5a7d99;
    --secondary: #77afc4;
    --accent: #a0d2eb;
    --text-color: #333;
    --placeholder-color: #777;
    --background: #f0f2f5;
    --sec-background: #ffffff;
    --sec-background-dark: #f9f9f9;
}*/

:root {
    --primary: #77AFC4;
    --accent: hsl(196, 80%, 80%);
    --secondary: #A3D6D7;
    --background: #FDE1E7;
    --sec-background: white;
    --sec-background-dark: rgba(0, 0, 0, 0.05);
    --text-color: #333;
    --placeholder-color: #999;
}

* {
    font-family: "Afacad Flux";
}

body {
    background-color: var(--background);
    margin: 0;
    user-select: none;
    box-sizing: border-box;
}

#documentContent {
    user-select: text;
}

main {
    background-color: var(--sec-background);
    width: 80vw;
    height: 95vh;
    border-top-left-radius: 25px;
    top: 5vh;
    left: 20vw;
    position: absolute;
    right: 10vw;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.screen {
    width: 90%;
    height: 80%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    overflow-x: hidden;
    overflow-y: scroll;
}

.disabled {
    display: none;
}

.click {
    cursor: pointer;
}

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