@import url('https://fonts.googleapis.com/css?family=Rubik:300,700');

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
    box-sizing: border-box;
}


.container {
    margin-inline: auto;
    display: flex;

}

.container-col {
    flex-flow: column;
}

header {
    background: rgb(43, 9, 82);
    background: linear-gradient(191deg, rgba(43, 9, 82, 1) 0%, rgba(8, 3, 2, 1) 9%, rgba(15, 54, 57, 1) 17%, rgba(78, 27, 110, 1) 25%, rgba(2, 0, 164, 1) 35%, rgba(190, 80, 11, 1) 50%, rgba(40, 5, 26, 1) 63%, rgba(176, 107, 54, 1) 82%, rgba(19, 147, 162, 1) 95%, rgba(82, 9, 9, 1) 98%);
    /*    background: rgb(43,9,82);
background: linear-gradient(191deg, rgba(43,9,82,1) 0%, rgba(2,8,4,1) 9%, rgba(15,54,57,1) 17%, rgba(78,27,110,1) 25%, rgba(2,0,164,1) 35%, rgba(167,11,190,1) 50%, rgba(40,5,26,1) 63%, rgba(103,54,176,1) 95%, rgba(19,147,162,1) 96%, rgba(43,9,82,1) 100%); */
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
}

header h1 {
    font-family: 'Rubik', sans-serif;
    font-size: 7rem;
    color: #fff;
    margin-bottom: .5rem;
    text-align: center;
}

header input {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    padding: 1.2rem 1.6rem;
    border: 1px solid rgb(212, 212, 212);
    font-size: 1.2em;
}

header button {
    display: block;
    width: 100%;
    margin: 0 0;
    padding: 1.8rem;
    font-size: 1.2rem;
    background-color: #008CBA;
    border: 2px solid white;
    color: white;
}

header button:hover {
    background-color: #69cff0;
}

header button:active {
    background-color: #008CBA;
    -moz-box-shadow: inset 0 0 5px #000000;
    -webkit-box-shadow: inset 0 0 5px #000000;
    box-shadow: inset 0 0 5px #000000;
}

.align-bottom {
    align-items: baseline;
}