* {
    margin: 0%;
    font-family: Arial;
    color: rgb(254, 242, 0);
    scroll-behavior: smooth;
}

.background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(84, 64, 162);
}

p {
    padding: 10px;
}

a {
    text-decoration: none;
    color: rgb(200, 175, 32);
}

h1 {
    display: block;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 3em;
    color: rgb(232, 227, 80);
    text-decoration: underline wavy 3px rgb(185, 180, 20);
}

h2, h3, h4, h5, h6 {
    display: block;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    color: rgb(232, 227, 80);
    text-decoration: underline wavy 2px rgb(185, 180, 20);
}

hr {
    display: block;
}

nav {
    border-bottom: 2px solid rgb(46, 42, 123);
    text-align: center;
    position: sticky;
    background: url(images/gradient.png);
    background-size: cover;
    width: 100%;
    min-width: 285px;
    height: 80px;
    top: 0;
}

nav a {
	padding: 10px;
	margin: 20px 20px;
	border: 2px solid black;
	background-color: rgb(114, 57, 150);
    font-size: larger;
    color: rgb(183, 191, 225);
    text-decoration: none;
    display: inline-block;
    border-radius: 10px;
    box-shadow: 10px 5px rgba(50, 0, 50, 0.2);
    transition: box-shadow .9s, color .9s, background-color .9s;
}

a:hover {
    background-color: rgba(255, 255, 255, .3);
    background-blend-mode: multiply;
    color: black;
    box-shadow: none;
}

@media screen and (min-width: 286px) and (max-width: 554px) {
    nav {
        height: 170px;
    }
} 

.page-contents {
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 100px;
}

.welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 600px;


    background-color: rgba(66, 22, 105, 0.407);
    color: yellow;
    border-radius: 20px;
}

.journey {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 600px;
    margin-top: 20px;

    background-color: rgba(66, 22, 105, 0.407);
    color: yellow;
    border-radius: 20px;
}

.update-post {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 600px;
    margin-top: 20px;

    background-color: rgba(66, 22, 105, 0.407);
    color: yellow;
    border-radius: 20px;
}

.update {
    font-size: 150%;
    color: rgb(170, 161, 206);
}

table {
    border-collapse: collapse;
    background-color: rgb(83, 44, 124);
    
}

.table_wrapper {
    margin-top: 50px;
    border-radius: 20px;
    border: 3px solid;
    overflow: hidden;
  }

th {
    text-align: centre;
    font-size: 150%;
    padding: 10px;
}

tr {
    border-top: 1px solid rgb(81, 131, 177);
    border-spacing: 0;
}

td {
    padding: 8px;
}

.fname, .email, .age, .birthday {
    background-color: rgb(157, 198, 213);
    font-weight: bold;
    color: rgb(58, 48, 93);
    font-size: 1.1em;
    padding: 4px;
    margin: 10px 5%;
}

#volume, #fav-colour, .checkbox-labels, .radio-buttons {
    margin-left: 5%;
    margin-top: 10px;
}

.fname:hover, .email:hover, .age:hover, .birthday:hover, .fname:focus, .email:focus, .age:focus, .birthday:focus {
    background-color: rgb(157, 182, 230);
    color: rgb(19, 61, 248);
}

.fname::placeholder, .email::placeholder, .age::placeholder, .birthday::placeholder {
    color: rgba(43, 73, 206, 0.312);
}

input:invalid {
    background-color: #ce9c9c;
}

input:valid {
    background-color: #a9d3a9;
}

.spacing {
    margin-top: 10px;
    border-bottom: 2px dotted rgb(167, 167, 215);
    padding-bottom: 10px;
}

.big {
    font-style: italic;
    font-weight: bolder;
    font-size: larger;
    color: rgb(222, 19, 19);
    align-items: center;
}

.full-survey .spacing:first-child {
    border: none;
    margin-top: 50px;
}

.question {
    font-size: 1.3em;
    margin-bottom: 10px;
}

.h2-spacing {
    margin: 20px auto;
    padding: 20px;
    max-width: 60%;
}

.full-survey {
    justify-content: start;
    padding: 10px;
}

.submit {
    padding: 10px;
    margin: 30px auto 60px auto;
    display: flex;
    font-family: "Tahoma";
    font-size: 2em;
    font-weight: bold;
    color: rgb(134, 18, 18);
    text-decoration: line-through 3px rgb(117, 28, 28);
}

.cuddles img {
    border-radius: 20px;
}

.cuddles {
    margin: 20px auto;
    height: 250px;
    width: 250px;
    text-align: center;
}