@font-face {
    font-family: tciap_2015;
    src: url(../fonts/tciap2015_bold.ttf);
    font-weight: bold;
    font-style: normal;

}


@font-face {
    font-family: tciap_2015;
    src: url(../fonts/tciap2015_regular.ttf);
    font-weight: normal;
    font-style: normal;

}

/* Reset some default styles */


html, body, main, h4, p, ul, li, div, form {
    border:0;
	font: normal normal normal 16px/16px tciap_2015,sans-serif;
	margin:0;
	outline:0;
	padding:0;

}


/*
div,span,applet,object,iframe,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	border:0;
	font-family:tciap_2015,sans-serif;
	font-size:100%;
	font-style:normal;
	font-weight:normal;
	margin:0;
	outline:0;
	padding:0;
	vertical-align:baseline;
}*/


h1 {
	border:0;
	font: normal normal bold 28px/28px tciap_2015,sans-serif;
    }

h2 {
	border:0;
	font: normal normal normal 20px/20px tciap_2015,sans-serif;
    }

h3 {
    border:0;
	font: normal normal bold 18px/18px tciap_2015,sans-serif;
}

/* Basic styles */
body {
    font: normal normal normal 16px/16px tciap_2015,sans-serif;
    background-color: #b3b3b3;
    display: block;
    }

header {
    font: normal normal bold 28px/28px tciap_2015,sans-serif;
    background-color: #96b800;
    color: #231f24;
    text-align: center;
    padding: 1rem;
}

h5 {
    border:0;
	font: normal normal normal 18px/18px tciap_2015,sans-serif;
	margin:0;
	outline:0;
	padding:0;
    text-align: center;
}

nav {
    background-color: #444;
    color: #fff;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 1rem;
}

nav a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 2rem;
}

footer {
    background-color: #96b800;
    color: #231f24;
    text-align: center;
    padding: 1rem;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 98%;
  }

/* Responsive Styles */
/*
@media (max-width: 768px) {
    nav ul {
        text-align: center;
    }
    
    nav ul li {
        display: block;
        margin: 0.5rem 0;
    }
}
*/
@media (print)  {
    body { visibility: hidden; display: none }
}

/* Small screens (mobile phones) */
@media (max-width: 480px) {
    /* Adjust header and navigation styles for small screens */
    header {
        padding: 0.5rem;
    }
    
    nav ul li {
        display: block;
        margin: 0.3rem 0;
    }

    form {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 0;
        margin: 0.3rem 0;
        
    }
}

/* Medium screens (tablets) */
@media (min-width: 481px) and (max-width: 768px) {
    /* Adjust main content layout for medium screens */
    main {
        padding: 1.5rem;
    }

    form {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 0;
        margin: 0.5rem 0;
        
    }
}

/* Large screens (laptops and desktops) */
@media (min-width: 769px) {
    /* Adjust header, navigation, and main content layout for large screens */
    header {
        padding: 2rem;
    }
    
    nav ul {
        display: flex;
        justify-content: center;
    }
    
    nav ul li {
        margin: 0 1rem;
    }
    
    main {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 700px;
    }

    form {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 680px;
    }
    img {
        display: block;
        margin-left: 0.5rem;
        width: 95%;
      }
}