/* ===== Global Reset ===== */
* {
    box-sizing: border-box;
}

/* ===== Page Layout ===== */
body {
  max-width: 1100px;
  margin: auto;
  font-family: Arial, Helvetica, sans-serif;
  background-image: url("images/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


/* ===== Wrapper ===== */
#wrapper {
    background-color: #ffffff;
    border: 3px solid #3b1c5a;
}

/* ===== Header ===== */
header {
    background-image: url("images/banner.jpg");
    background-size: cover;
    background-position: center;
    height: 220px;
    position: relative;
}

header h1 {
    color: white;
    text-align: center;
    padding-top: 80px;
    font-size: 40px;
    letter-spacing: 2px;
}

/* ===== Navigation ===== */
nav {
    background-color: #3b1c5a;
    text-align: center;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav li {
    display: inline;
    list-style: none;
}

nav a {
    display: inline-block;
    padding: 14px 18px;
    text-decoration: none;
    color: #00ff66;
    font-weight: bold;
    transition: 0.3s;
}

/* Hover Effect */
nav a:hover {
    background-color: #6a0dad;
    color: #ffffff;
}

/* Selected Page */
.selected {
    background-color: #8a2be2;
    color: #ffffff;
    padding: 14px 18px;
}

/* Responsive Nav */
@media only screen and (min-width:640px){
 nav a{
  display:inline-block;
  width:auto;
 }
 nav li{
  display:inline;
  padding:0 18px;
 }
}


/* ===== Main Content ===== */
main {
  background: linear-gradient(to bottom, #ffffff 0%, #8a2be2 100%);
  padding: 20px;
}


/* ===== Resume Columns ===== */
aside {
    width: 30%;
    float: left;
    padding: 20px;
    border-right: 2px solid #ddd;
}

section {
    width: 70%;
    float: left;
    padding: 20px;
}

/* Clear floats */
main::after {
    content: "";
    display: block;
    clear: both;
}

/* ===== Headings ===== */
h1 {
    color: #3b1c5a;
}

h2 {
    color: #6a0dad;
    border-bottom: 2px solid #6a0dad;
    padding-bottom: 5px;
    margin-top: 25px;
}

/* ===== Footer ===== */
footer {
    background-color: #3b1c5a;
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 14px;
}

footer a {
    color: #00ff66;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* ===== Images ===== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== Abbreviation Styling ===== */
abbr {
    border-bottom: 1px dotted #000;
    cursor: help;
}

/* ===== Address ===== */
address {
    font-style: normal;
    margin-bottom: 20px;
}

/* ===== Lists ===== */
ul {
    padding-left: 20px;
}
/* ===== Special Characters ===== */
.special{
    color:#6a0dad;
    font-size:1.3em;
    font-weight:bold;
}
/* ===== Portfolio Layout ===== */

#figureContainer {
    text-align:center;
}

figure {
    display:inline-block;
    width:320px;
    margin:15px;
    text-align:center;
}

figure img {
    max-width:100%;
    height:auto;
    border-radius:8px;
}

figcaption {
    margin-top:8px;
    font-size:0.9em;
}

/* Responsive adjustment */
@media only screen and (min-width:1000px){
    body {max-width:1100px;}
}

.byline{
font-style: italic;
color:#444;
margin-bottom:10px;
}

.news-line{
width:80%;
border:4px solid #6a0dad;
border-radius:6px;
margin:20px auto;
}

.infobar{
background:#3b1c5a;
color:white;
padding:8px;
font-weight:bold;
text-align:center;
}

blockquote{
text-align:justify;
margin-left:40px;
margin-right:40px;
}

blockquote:first-letter{
font-size:1.8em;
font-weight:bold;
color:#6a0dad;
}

.newsletter-img{
width:500px !important;
max-width:500px !important;
height:auto;
display:block;
margin:20px auto;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.25);
}