* {
    box-sizing: border-box;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
}

/*Index page*/
#header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: rgba(211, 211, 211, 0.2);
    box-shadow: 0 0 10px 0 #aaaaaa;
}
#header nav {
    padding: 1rem;
}
#header nav a {
    display: inline-block;
    text-align: center;
    font-size: 1.5rem;
    color: black;
    padding: 1rem;
    margin: 0 1rem 0 1rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: white;
    text-decoration: none; /*Remove links underlining and default blue color*/
    cursor:pointer;
    transition: all 200ms ease-in-out;
}
#header nav a:hover {
    background-color: lightgrey;
}
#ULB-logo {
    height: 3.5rem;
    margin-left: 1rem;
}
#lab-logo {
    height: 5rem;
    margin-right: 1rem;
}

#introduction {
    width: 80vw;
    max-width: 1000px;
    margin: 1rem auto 5rem auto;
}
#introduction img {
    display: block;
    margin: 0 auto 5rem auto;
}
#introduction div {
    padding: 1rem;
    max-width: 76ch;
    margin: auto;
}
#introduction div h2 {
    display: inline-block;
    text-align: center;
}
#introduction div p {
    display: inline-block;
    word-spacing: 0.3em;
    line-height: 2em;
}
@keyframes spanStandOut {
    from {
        font-size: 1rem;
        color: white;
    }
    to {
        font-size: 1.1rem;
        color: #8e5eff;
    }
  }
#introduction div span {
    animation: spanStandOut 1s ease-out 0s 1 normal forwards;
    margin: 0 0.2rem;
    font-size: 1.1rem;
}
#introduction div>a { /*Need > otherwise we also select the help link*/
    display: flex;
    align-items: center;
    width: max-content;
    margin: auto;
    padding: 0.5rem;
    text-decoration: none;
    color: inherit;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to right, rgba(130, 130, 255, 0.8), rgb(208, 113, 255, 0.8)) 1;
    transition: opacity 300ms ease-in-out;
}
#introduction div>a:hover {
    opacity: 0.75;
}
#introduction div a i {
    font-size: 2rem;
    color: #8e5eff93;
    padding-right: 1rem;
}

#footer {
    padding: 1rem;
    font-size: 0.8rem;
    margin-top: auto; /*Pushes footer to the bottom of the page in all circumstances*/
}


/*Predict page*/
#predict-h2 {
    color: grey;
    text-align: center;
    width: 100%;
}
#submission-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem auto 1rem auto;
}
#submission-form input {
    padding: 0.25rem;
    margin: 1rem 0 1rem 0;
    border: 1px solid lightgrey;
    border-radius: 10px;
}
#submission-form #email {
    margin-top: 5rem;
}
#submission-form span {
    text-decoration: underline;
}
#submission-form button {
    color: white;
    font-size: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: rgb(5, 121, 230);
    cursor:pointer;
    transition : opacity 250ms ease-in-out;
}
#submission-form button:hover {
    opacity: 0.9;
}


/*Help page*/
#help-section {
    width: 80%;
    max-width: 1000px;
    margin: auto;
}
#help-section h1 {
    text-align: center;
    font-size: 5rem;
    width: 100%;
    margin: 2rem 0;
}
#help-section h2 {
    font-size: 2rem;
}
#help-section p {
    margin-bottom: 1rem;
}
#help-section p, #help-section li {
    line-height: 1.5rem;
}

/*Select chain page*/
center > div {
    border: 1px solid black;
    width: 80vw;
    max-width: 1000px;
    background: aliceblue;
    padding: 1rem;
    font-family: "courier new";
    text-align: left;
}
#select-chain input[type=radio] {
    margin: 1rem 0;
}
#select-chain input[type=submit] {
    color: white;
    font-size: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: rgb(5, 121, 230);
    cursor:pointer;
    transition : opacity 250ms ease-in-out;
}

/*Submitted page*/
#submitted-section {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
}
#submitted-section h1 {
    text-align: center;
    color: green;
    font-size: 2rem;
}
#submitted-section h3 {
    margin-top: 4rem;
    padding: 1rem;
    text-align: center;
    color: white;
    border: 0.5rem double white;
    background-color: coral;
    border-radius: 10px;
}