/* Basic Reset */
* {
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

html {
scroll-behavior: smooth;
width: 100%;
overflow-x: hidden;
}

body {
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    color: grey;
    line-height: 44px;
    background-color: gold;
}

header {
width: 100%;
height: 150px;
background-color: azure;
padding: 20px;
position: fixed;
}
header div {
width: 200px;
}
main{
 
padding: 20px;
padding-top:160px;

/* Padding 4 positions: top, right, bottom, left */
/* padding: 160px 20px 20px 20px; */


/* combined left & right = 3 positions */
/* padding: 160px 20px 20px 20px; */
}
main article p {
    max-width: 65ch;
}

nav ul li {
    display: inline-block;
    margin-right: 30px;
}
footer {
    padding: 20px;
}
.fancy-button {
    background-color: red;
    padding: 20px 15px;
    border-radius: 10px;
    border: 2px dotted green;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.404);
    font-weight: bold;
    color: blue;
    


}
.fancy-button:hover
{ background-color: bisque;
color: black;}


/* Styling The Form */
/* this makes the box width */
input [type=text],
input[type=password],
input[type=submit],
textarea {
    display: block;
margin-bottom: 20px;
width: 260px;
/* border-radius makes the box circular */
border-radius: 5px;
border: 1px solid black;
}