/* Layout */

html {
    overflow: auto;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

#wrapper {
    flex: 1;
}

/* Nav */

.hero-head .navbar-item.title {
    color: #363636;
    margin-bottom: 0;
}

.hero-head .navbar-burger {
    height: initial;
    align-items: stretch;
}

/* Index */

.index .hero {
    background-image: url("https://user-images.githubusercontent.com/18099289/38436955-58d160b2-39d6-11e8-9086-c5a9f5eb416a.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.index .hero-head .navbar-item.title {
    opacity: 0;
}

.index .hero.is-light .hero-body a:not(.button):not(.dropdown-item):not(.tag) {
    color: #3273dc;
}

.index .hero.is-light .hero-body a:not(.button):not(.dropdown-item):not(.tag):hover {
    color: inherit;
}

.index .hero-foot img {
    display: block;
    margin: 0 auto;
}

#genform .field {
    margin-bottom: 20px;
}

#genform fieldset.box {
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
}

#genform fieldset.box > legend {
  background-color: white;
  padding: 0 7px;
}

#text-to-copy {
    height: 220px;
    margin-top: 1em;
}

/* Extra CSS for Notifications */

#txt-notification h1 {
    font-size: 25px;
}

#txt-notification {
    position: fixed;
    display: none;
    opacity: 0;
    transition: opacity 1s;
    text-align: center;
    top: 5px;
    right: 5px;
    width: 300px;
    z-index: 3;
}

#txt-notification.visible {
    display: block;
}

#txt-notification.opaque {
    opacity: 1;
}