* {
    margin: 0;padding: 0;border: 0;box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: hsla(200, 100%, 75%, 1);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/*header {
    position: fixed;
    top: 0px;
    width: 100vw;height: 180px;
    border: solid;
    background-color: hsla(200, 60%, 70%, 1);
    appearance: top;
    
}         /*Thought of having a fixed header*/

section{
    margin-top: 1000px;
    margin-bottom: 1000px;
}
h1, h2 {
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
}

h1 {
    text-align: center;
    margin: 24px;
    border-left: 40px solid hsla(200, 80%, 50%, 1);
    border-bottom: 4px solid hsla(200, 80%, 50%, 1);
    padding: 8px 0px;
    font-size: 300%;
}

h1 + nav {
    text-align: center;
    margin: 24px 0px;
}

h1 + nav a {
    text-decoration: none;
    display: inline-block;
    padding: 8px;
    color: hsla(200, 60%, 25%, 1);
    font-weight: bold;
    font-size: 150%;
}

h1 + nav a::after {
    margin-left: 24px;
    content: '\2639';
}
h1 + nav a:last-child::after {
    content: '';
}

h1 + nav a:hover {
    color: orange;
}

/* FORM STYLES =========================*/
form {
    border: 2px solid hsla(200, 40%, 25%, 1);
    margin: 80px 20px 100px 20px;
    padding: 12px;
}

legend {
    text-align: center;
}

label {
    font-size: 160%;
    font-weight: bold;
}

input[type=text], input[type=password], input[type=tel], input[type=url], input[type=email] {
    font-size: 140%;
    padding: 8px;
    box-shadow: 2px 2px 2px #222;
}

input[type=submit], button {
    font-size: 160%;
    background-color: orange;
    color: #fff;
    padding: 8px 16px;
    box-shadow: 2px 2px 2px #222;
}

input[type=submit]:hover {
    background-color: green;
}

input[type=range] {
    transform: scale(2.5) translateX(125px);
}
#range_output {
    transform: translateX(200px);
}
select {
    font-size: 160%;
}

input[type=checkbox], input[type=radio] {
    transform: scale(2);
    margin-right: 20px;
}

textarea {
    font-size: 160%;
    width: 500px; height: 200px;
}
