/*
*				libreevent - style.css
*
*	Created by Janis Hutz 06/17/2023, Licensed under the GPL V3 License
*			https://janishutz.com, development@janishutz.com
*
*
*/

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: calc(15pt + 0.4vw);
    font-family: sans-serif;
}

body {
    height: 100vh;
    display: grid;
    background-color: #7c8cec;
    grid-template-areas:
    'header header header header header'
    'menu main main main main'
    'menu main main main main'
    'menu main main main main'
    'menu main main main main'
    'menu main main main main'
    'menu main main main main'
    'menu main main main main'
    'menu main main main main'
    'footer footer footer footer footer';
}

.title-wrapper {
    /* 
        TODO: Replace with image
    */
    background-color: white;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    padding: 2%;
    margin: 3%;
    margin-bottom: 0%;
    border-radius: 50px;
}

.content {
    width: 90%;
    padding: 2%;
    margin: 3%;
    border-radius: 0px 0px 50px 50px;
    margin-top: 0;
}

#docPage {
    grid-area: main;
    overflow: scroll;
    width: 74vw;
    height: 100%;
}

#doc-container {
    width: 90%;
    height: 100%;
    margin-left: 5%;
}

.dev {
    background-color: rgb(182, 69, 69, 0.9);
    padding: 10px;
    text-align: center;
    border-radius: 50px;
}

#nav {
    grid-area: header;
    position: sticky;
    z-index: 1;
    height: 15vh;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#footer {
    grid-area: footer;
}

#side-bar {
    width: 25vw;
    grid-area: menu;
    overflow: scroll;
    height: 100%;
}

.button {
    background-color: rgb(24, 43, 61);
    color: white;
    text-decoration: none;
    padding: 40px;
    padding-bottom: 20px;
    padding-top: 20px;
    border-radius: 30px;
    cursor: pointer;
    margin: 1.5%;
    transition: 1s;
}

.button:hover {
    transition: 0.2s;
    border-radius: 5px;
    background-color: rgb(60, 85, 140);
}

#backToTop {
    border-radius: 500px;
    border-width: 1px;
    background-color: rgb(34, 72, 143);
    background-image: url('/assets/up.svg');
    background-size: cover;
    width: calc(30px + 0.5vw);
    height: calc(30px + 0.5vw);
    padding: 0.2%;
    float: right;
    color: white;
    position: fixed;
    top: 90%;
    right: 7%;
    opacity: 0;
    cursor: default;
    transition: 0.5s
}

#backToTop:hover {
    background-color: rgb(24, 43, 61);
    width: calc(35px + 0.5vw);
    height: calc(35px + 0.5vw);
    transition: 0.2s;
}