/*Is placed here because performance is much better
 Change of font-size (change of rem ref) to make it better readable on bigger/smaler screen */
@media screen and (min-width: 1800px) {

     :root {
          font-size: 120%;
     }
}


@media screen and (max-width: 800px) {
     :root {
          font-size: 90%;
     }


}

* {
     box-sizing: border-box;
     text-align: center;
}

body {
     font-family: 'Roboto', sans-serif;
     margin: 0;
     padding: 0;
}

html, body {
     width: 100%;
     height: 100%;
}

p {
     max-width: 60rem;
     font-size: 1.1rem;
}

body {
     display: grid;
     min-height: 100%;
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr auto;
     grid-template-areas: "nav""main""footer";
     align-content: space-between;
}

/* Header */
nav {
     grid-area: nav;
     display: flex;
     background-color: black;
     /* Maby change it later */
     align-items: center;
     position: fixed;
     margin-bottom: 1px;
     top: 0;
     width: 100%;
     justify-content: space-between;
}


.logo {
     font-size: 1.5rem;
     margin: 0.5rem;
}

.logo a {
     color: #fff;
     text-decoration: none;
}

.nav-links ul {
     display: flex;
     margin: 0;
     padding: 0;
}

.nav-links li {
     list-style: none;
}

.nav-links li a {
     text-decoration: none;
     padding: 1em;
     color: white;
     display: block;
}

.nav-links li:hover {
     background-color: #444444;
}

.nav-links .current-tap {
     background-color: #9a0808;
}

/* Footer */
footer {
     margin-top: 1rem;
     grid-area: footer;
     background-color: black;
     display: flex;
     justify-content: space-between;
}

footer p {
     color: white;
     padding: 0.5rem;
}

footer ul {
     display: flex;
}

footer ul li {
     list-style: none;
     padding: 0.5rem;
}

footer a {
     text-decoration: none;
     color: white;
}

p>a {
     color: black;
}

/* Main */
main {
     grid-area: main;
     display: flex;
     margin-top: 5rem;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

form {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 50%;
     height: 50%;
}

form>input {
     padding: 0.5rem;
     margin: 0.5rem;
}

.text-input {
     width: 100%;
}

form input, textarea {
     border: 2px solid black;
     background: white;
}

textarea {
     height: 15rem;
     resize: none;
}

.button {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
     min-width: 8rem;
     max-width: 10rem;
     border: 2px solid black;
     background: white;
}

input[type=text] {
     min-width: 12rem;
     min-height: 2rem;
}

.custom-button:hover {
     background-color: #9a0808;
     /* Fallback if browser doesnt support line-gradient */
     background: linear-gradient(135deg, rgb(0, 0, 0), 70%, rgb(255, 0, 0));
     box-shadow: 0px 0px 1rem #9a0808;
     color: white;
}

#vanity-output h1 {
     font-size: 1.5rem;
     margin: 2rem;
     margin-top: 3rem;
}

label {
     font-size: 1.2rem;
     margin: 0.5rem;
}

/* Hamburger Layout */
#hamburger-layout {
     display: inline-block;
     cursor: pointer;
}

.bar1, .bar2, .bar3 {
     width: 2rem;
     height: 0.3rem;
     background-color: #fff;
     margin: 0.5rem 0;
     transition: 0.4s;
}

#hamburger-layout {
     display: none;
}

.hidden {
     display: none;
}

img {
     max-width: 40rem;
     max-height: 40rem;
}

.emebdet-image {
     max-width: 20rem;
     max-height: 20rem;
     margin: 0.5rem;
     width: 100%;
}

p figure {
     float: left;
}

p {
     word-wrap: break-word;
     display: flex;
     flex-direction: column;
}

iframe {
     width: 35rem;
     height: 20rem;
     border: 0px;
}
.video-container {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 30px; height: 0; overflow: hidden;
}

.warning {
     color: red;
}

@media screen and (max-width: 800px) {
     .button {
          background-color: #9a0808;
          /* Fallback if browser doesnt support line-gradient */
          background: linear-gradient(135deg, rgb(0, 0, 0), 70%, rgb(255, 0, 0));
          box-shadow: 0px 0px 1rem #9a0808;
          color: white;
          min-height: 2.3rem;
     }

     iframe {
          width: 20rem;
          height: 12rem;
     }

     p {
          padding-left: 1.5rem;
          padding-right: 1.5rem;
     }

     textarea {
          min-height: 5rem;
     }

     nav {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
     }

     nav #top {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
     }

     nav .logo a {
          display: block;
          height: 100%;
          margin-top: 1rem;
     }

     .nav-links #top-navigator {
          display: none;
     }

     #hamburger-layout {
          display: block;
          margin: 1rem;
     }

     .nav-links #top-navigator.shown {
          display: flex;

     }

     /* Rotate first bar */
     .activated .bar1 {
          transform: rotate(-45deg) translate(-0.8rem, 0.6rem);
     }

     .activated .bar2 {
          opacity: 0;
     }

     .activated .bar3 {
          transform: rotate(45deg) translate(-0.5rem, -0.4rem);
     }

     nav .nav-links {
          width: 100%;
     }

     nav .nav-links #top-navigator.shown {
          display: flex;
          flex-direction: column;

     }

     nav .nav-links #top-navigator.shown li {
          width: 100%;
     }

     #vanity-output,
     #passphrase-output {
          max-width: 25rem;
     }

     footer {
          margin-top: 3rem;
     }

}