@import "https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css";
@import url('https://cdn.jsdelivr.net/npm/cooltipz-css@2.3.1/cooltipz.min.css');


:root {
    --bulma-body-background-color: #0b0d0f;
    --cooltipz-bg-color: #20222b;
    --cooltipz-font-family: monospace, sans-serif;
    --cooltipz-timing: 50ms;
}

html, body {
    min-height: 100vh
}

body {
    display: flex;
    flex-direction: column
}

.gradient {
    height: 75px;
    background-color: #0b0d0f;
}

.is-top {
    height: 75px;
    background-color: #0b0d0f;
    background-image: linear-gradient(black, rgba(11,13,15,1))
}

.is-bottom {
    height: 75px;
    background-color: #0b0d0f;
    background-image: linear-gradient(rgba(11,13,15,1), rgba(24,27,32,1))
}

.container {
    width: 100%;
    flex-grow: 1;
    margin: 0 auto;
    position: relative
}

.is-body {
    max-width: 1500px;
    margin: 0 auto 1.5rem auto
}

body, button {
    font-family: source sans pro, sans-serif
}

.button, .dropdown-item {
    font-family: monospace, sans-serif
}

.profile {
    display: grid;
    grid-row-gap: 1rem;
    grid-column-gap: 1.5rem;
    grid-template-areas:'image details' 'image buttons';
    grid-template-rows:auto auto;
    grid-template-columns:150px auto;
}

.profile-image {
    grid-area: image;
    align-self: center;
}

.profile-image img {
    width: 100%;
    max-width: 150px;
    height: auto;
}

.profile-details {
    grid-area: details;
    align-self: end
}

@media screen and (max-width: 650px) {
    .profile {
        margin: 0 auto;
        grid-row-gap: 1rem;
        grid-column-gap: 1rem;
        grid-template-areas:'image details' 'buttons buttons';
        grid-template-rows:auto auto;
        grid-template-columns:auto auto
    }

    .profile-image {
        grid-area: image;
        justify-self: end;
        align-self: center
    }

    .profile-image img {
        max-width: 80px
    }

    .profile-details {
        justify-self: start;
        align-self: center
    }
}

.subtitle {
    color: #777
}

.profile .subtitle > span {
    vertical-align: middle
}

.profile-image img {
    border-radius: 1000px
}

.menu {
    font-size: .9rem;
    font-weight: 400
}

.menu-label {
    font-size: .85rem;
    font-weight: 600;
    color: #aaa
}

.menu-label:not(:first-child) {
    margin-top: 1.5em
}

.menu-label:not(:last-child) {
    margin-bottom: .4em
}

.menu-list a {
    padding: .45em .65em
}

.menu-list a.is-active {
    background-color: #dbe9ff;
    color: #3273dc
}

body.has-navbar-fixed-top {
    padding-top: 3.25rem
}

.navbar {
    min-height: 3.25rem
}

.top-space-navbar {
    top: 3.25rem
}

@media screen and (min-width: 1024px) {
    body.has-navbar-fixed-top {
        padding-top: 4.75rem
    }

    .navbar {
        min-height: 4.75rem
    }

    .top-space-navbar {
        top: 4.75rem
    }
}

/* Items */
.item {
    transition: all 1s ease;
    box-shadow: none
}

.item-icon {
    background-color: #0a0a0a;
    border: 1px solid #2e2e2e;
    border-radius: 4px
}

.item .buttons {
    margin-top: 1em;
    justify-content: flex-end
}

.item .title {
    margin-bottom: .5rem
}

.item.column {
    display: flex
}

.item.column > article {
    flex-grow: 1
}

.item .media {
    align-items: stretch
}

.item .media-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-x: initial
}

.item .is-black {
    background-color: #0b0d0f
}

.item .button.is-black:hover {
    background-color: #20222B
}

.item .dropdown-content {
    background-color: #0b0d0f;
    border: 1px solid #2e2e2e;
}

.item .dropdown-item.is-black:hover {
    background-color: #20222B
}

.button {
    transition: all .2s ease
}

footer p a:hover {
    color: #2352C6;
    text-shadow: 0 0 15px #1a3b95;
    transition: all .2s ease;
}