@charset "UTF-8";
/* CSS Document for Tablet*/

/* General body styling */
body 
{
    background-color: navy; /* color of background */
    color: white; /* text color */
    font-family: 'Times New Roman', Times, serif; /* font style */
    font-size: x-large;
    padding: 0px;
    margin: 0px;
}

/* Apply margins to headings, paragraphs, and list items */
h1,h2,h3,h4,h5,h6,p,li 
{
    margin-left: 15px; /* left margin */
    margin-top: 0px; /* removes default top margin */
}

/* Wrapper container for all pages except contact me page*/
#wrapper 
{
    width: 100%; /* full width */
    min-height: 100px; /* changed from fixed height */
    margin-left: auto; /*centers the wrapper*/
    margin-right: auto; /* centers the wrapper */
}

/* Wrapper container for project page*/
#wrapperproject 
{
    background-color: navy; /* if you want diff bg for tablet */
}

/* Wrapper container for contact me page*/
#wrappercontact {
    width: 90%;   /* shrink width */
    margin: 0 auto; /* centers the wrapper */
    background-color: navy; /* if you want diff bg for tablet */
}

/* Footer */
#footer,
footer.foot,
footer.pro,
footer.footerhome,
footer.footervid,
footer.footerabout {
  background-color: black;
  color: white;
  text-align: center;
  height: 200px;
}


/* Banner */
#banner 
{
    height: 60px; 
    background-color: black; /* black background */
}

/* Box styling */
.box {
    width: 45%; /* half width */
    min-height: 120px; /* changed from fixed height */
    background-color: #0FF5E1; /* teal background */
    color: navy; /* navy text */      
    margin: 15px; /* margin around each box */
    opacity: 1; /* box opacity */
    text-align: center; /* centers text inside */
}

/* Button styling */
.button 
{
    font-size: x-large; /* large font size */
    background-color: coral; /* coral background */
    color: #01E6DC; /* light blue text */
    width: 25%; /* button width */
    float: left; /* aligns buttons side by side */
    padding: 8px; /* padding inside button */
    margin: 5px; /* margin around button */
    border-radius: 15px; /* rounded corners */
    box-shadow: 5px 5px 3px black; /* adds shadow */
}

/* Clear floats */
.clear 
{
    clear: both; /* clears floats */
}