body {
    width: 85%;
    margin: auto;
	background: #ffffff; /*fallback*/
	background: linear-gradient(#ffffff, #FFF8DC);
    /*allow my background colour to be like fading color kind of feel*/
}

ul {
    list-style-type: none;
    /*makes some space from top*/
    margin-top:50px; 
    padding: 0;
    overflow: hidden;
    background-color: #444;
    /*the background color in the link tab */
}

/*float the link to the left*/
li {
    float: left;
}

li a {
    display: block;
    font-family:‘Arial Black’, Gadget, sans-serif;
    font-weight: bold;     /*bold the text*/
    color: white;
    text-align: center;      /*align the text to center*/
    padding: 14px 20px;      /*giving some space around my wording in the list tab to make it looks better*/
    text-decoration: none;
    -webkit-transition: all 0.5s ease-in; /*allow the colour to be slowly change while you hover over*/
}

/* Change the link color on hover */
li a:hover {
    background-color: #FFA62F;
}

/*link color will stay there when you stayed on the page*/
.active {
    background-color: #4CAF50;
}

form {
    margin-top: 10px;
}

/*allow every different class of my user input have diffrent width*/
.userinput {
    width: 80%;
}

.userinput2 {
    width: 70%;
    float: right;
}

.userinput3 {
    width: 30%;
    float: right;
}

/*this is my search bar input width*/
#input1 {
    width: 90pt;
}

/*by giving the id to my fieldset, so that they could have different background color on different fieldset*/
fieldset{
    background-color: lightgreen;
}

#fs1 {
    background-color: lemonchiffon;
}

#fs2 {
    background-color: #FFDFDD;
}

/*giving my table a class so that different class of table have diffrent padding */
.std {
    padding: 30px;
}

.std2 {
    padding-left: 200px;
}

/*allow the text go to the top*/
select {
    vertical-align: text-top;
}

/*giving my different heading element a very nice kind of font family, font size and colour*/
h1 {
    font-family: 'Tangerine'; 
    font-size:50pt;
    color: #493D26; 
    text-align: center;
}

h2 {
    font-family: 'Margarine'; 
    color: #34282C; 
    text-decoration: underline;
}

h3 {
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif; 
    color: #34282C; 
    
}

h4 {
    font-family: 'Margarine'; 
    color: #34282C; 
}

/*my paragraph fonts and font size*/
p {
    font-family:‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif; 
    font-size: 11.5pt;
}

/*every section give some space from bottom so that it could look nicer in my webpage*/
section {
    padding-bottom: 10px;
}

/*giving my video some space from left and right*/
iframe {
    padding-right:30px;
    padding-left: 30px;
}

/*by giving id to my video/music, allow it to float to the right so it could looks more ogarnize*/
#if1 {
    float: right;
}

#fb {
    float: right;
}

#ig {
    float: right;
}

#twt {
    float: right;
}