@import url('/scripts/css/base.css');

img.hero {
    width: 40vw;
    height: 100vh;
    object-fit: cover;
    float: right;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 10vw solid transparent;
    border-top: 100vh solid var(--background-1);
    position: absolute;
    top: 0;
    float: right;
    right: 30vw;
}

.content {
    float: left;
    width: 60vw;
    height: 100vh;
}

nav>h1 {
    display: block;
    width: fit-content;
    float: left;
    font-size: 5vh;
    margin: 0.5vh 1vw;
}

nav>svg {
    display: block;
    --size: 6vh;
    width: var(--size);
    height: var(--size);
    margin: 1vh 1vw;
    float: right;
    fill: var(--text-0);
}

nav>svg#keybinds {
    --size: 47px;
}

nav>svg#notes {
    --size: 48px;
}

nav>svg#open-editor {
    --size: 56px;
    margin-top: 0.5vh;
}

nav>svg#add-event {
    --size: 48px;
}

.events {
    width: 30vw;
    margin: 2.5vw 2vh;
    height: 80vh;
    display: block;
    float: left;
}

#events {
    padding: 1vw 1vh;
    width: 28vw;
    margin-top: 2vh;
    height: 68vh;
    background: var(--background-0);
    border-radius: 10px;
    overflow-y: scroll;
}

#events>.event {
    padding: 1vw 1vh;
    width: 26vw;
    height: 11vh;
    background: transparent;
    border-radius: 10px;
}

#events>.event:hover {
    background: var(--background-1);
}

#events>.event>.title {
    height: 3vh;
    font-size: 3vh;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: break-spaces;
}

#events>.event>.description {
    margin-top: 1vh;
    height: 4vh;
    font-size: 2vh;
    width: 26vw;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: break-spaces;
}

#events>.event>.start, #events>.event>.end {
    margin-top: 1vh;
    height: 2vh;
    font-size: 2vh;
    width: 50%;
    color: var(--text-2);
}

#events>.event>.start { float: left; }
#events>.event>.end { float: right; text-align: right; }