@import url("fonts/Sarabun-Regular.ttf"); 

@font-face {
  font-family: "SarabunRegular";
  src: url('fonts/Sarabun-Regular.ttf') format("truetype");       
}

@import url("fonts/Sarabun-Bold.ttf"); 

@font-face {
  font-family: "SarabunBold";
  src: url('fonts/Sarabun-Bold.ttf') format("truetype");       
}




header{
    margin-top: 20px; 

}

body {
    font-family: "SarabunRegular";
    text-align: center; 
}

/* NAVIGATION */

nav {
    display: block;
    padding: 10px;
    font-family: "SarabunBold";
}


ul {
   
    padding: 10px;
    margin-top: -40px; 
}

ul li {
    display: inline-block; 
    margin-right: 40px; 
}

ul li a {
    
    font-size: 20px;
    
}

a:hover {
	color: red;
}

/* END OF NAVIGATION */

/* TEXT STYLING SECTION */

h1 {
    font-family: SarabunBold;
    font-size: 25px; 
    padding: 5px; 
}

h2 {
    padding: 10px;
    font-size: 21px;

}

/* END OF TEXT STYLING */

/* FOOTER STYLING */

address {
    align: left; 

}

hr {

    width: 40%; 
}

#archivedotorg{
    padding: 10px; 

}

article {

    
    text-align: left;
    align: center;
    margin-left: 29%;
    margin-right: 29%;
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: 1em; 
}

p {
    margin-left: auto;
    margin-right: auto;
    
}


a:link {
    text-decoration: none; 
    color: red; 
}

a:visited {
  color: grey;
}

#track_list {

    max-width: 800px;
    margin: auto; 

}

/* BUTTON STYLING */

.example_a {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #ed3330;
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}

.example_a:hover {
background: #434343;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}

/*END BUTTON STYLING*/