@charset "utf-8";
/* CSS Document */
/* styles.css */
@font-face {
  font-family: FirstFont;
  src: url(Lora-Bold.ttf);
}
@font-face {
  font-family: bodyFont;
  src: url(Lora-Medium.ttf);
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
	background-color:#000;
}
#full{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFF;
}
a{
	color:#000;
	text-decoration:none;
}
.container {
    width: 90%;
    margin: auto;
    max-width: 1200px;
}

.header {
    background-color: #FFF;
    color: #fff;
    padding: 20px 0;
    text-align:left;
}
.profilename{
	float:left;
	width:70%;
	height:auto;
	color:#000;
	font-family:FirstFont;
}
.header .contact {
	float:right;
	width:30%;
    margin-top:0px;
	color:#000;
}

.hero {
    text-align: center;
}

.hero-image {
    width: 100%;
    height: auto;
}

.about {
	background-image:url(backbg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
    background-color: #f9f9f9;
    padding: 40px 0;
	font-family:bodyFont;
	
}

.about-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.profile-pic {
    flex: 1 1 200px;
    width: 200px;
    height:190px;
    margin-bottom:10px;
}

.about-text {
    flex: 2 1 400px;
}

.about-text h2 {
    color: #000;
}

.about-text ul {
    list-style: none;
    padding: 0;
}

.about-text ul li {
    margin: 10px 0;
}

.about-text ul a {
    color: #00539C;
    text-decoration: none;
}

.about-text ul a:hover {
    text-decoration: underline;
}

.footer {
    background-color: #002636;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: 10px;
    font-size: 14px;
}

@media screen and (max-width: 900px){

#full{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFF;
}

.about-content {
    display:block;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}
	
.profilename{
	float:none;
	width:100%;
	height:auto;
	color:#000;
	text-align:center;
}
.header .contact {
	float:none;
	width:100%;
    margin-top:0px;
	color:#000;
	text-align:center;
}
	
}