/*
COLOR PALETTE

Sandy beige   #bcaa96
Dark gray     #222222
Light gray    #d3d4d6
Off-white     #f6f6f6

Dark green    #085B1C
Maroon        #5B1C08
Dark Blue     #1C085B
*/

/* Global Styles */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
}
body {
    background: #f6f6f6; 
    margin: 0;
}

h1, h2, h3 {
    font-family: 'Garamond', serif;
    font-weight: 400;
    margin: 0;
}
h1 {
    font-size: 2.5rem;
    line-height: 0.95;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.5rem;
    font-style: italic;
}
.content-wrapper {
    margin: 0 auto;
    padding: 30px;
    max-width: 1500px;
}


/* Background text attribution (in footer) */
.background-attribution {
    font-size: small;
    text-align: right;
}

/* links */
a {
    color: #085B1C;
}
a:hover {
    color: #bcaa96;
    text-decoration: none;
}
footer a {
    color: #bcaa96;
}
footer a:hover {
    color: #3c8453;
}
.btn {
    background: #085B1C;
    color: #bcaa96;
    text-decoration: none;
    text-transform: uppercase;
    opacity: 0.9;
    font-size: 1.2rem;
    display: inline-block;
    padding: 7px;
    letter-spacing: 0.1em;
    line-height: 1;
    border-radius: 4px;
}
.btn:hover{
    color: #5B1C08
}



/* Subpage Lists - With Images and Links */
.subpage-list{
    display: grid;
    grid-template-rows: 300px;
    grid-auto-rows: 300px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 30px;
    row-gap: 10px;
    justify-content: center;
}
.subpage-list img{
    height: 200px;
    width: 300px;
    object-fit: cover;
}

.subpage-list p{
    margin: 5px 0;
    font-size: 20px;
    text-align: center;
}

.subpage-list a{
    color: #5B1C08
}

.subpage-list a:hover{
    color: #085B1C
}



/* Section Links */


/* Image attributions */
.image-attribution {
    font-size: small;
    text-align: right;
    margin-top: -20px;
    margin-bottom: 20px;
}

/* Index/Home page */
.index {
    background: url(../images/pexels-min-an-813269.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
 }

.index .content-wrapper {
      flex: 0 1 auto;
      padding: 10px
}

.index .content-bg {
      background: rgb(255 255 255 / 0.6);
      padding: 20px;
      margin: 50px;
}

/* About Me page */
.aboutme header::before{
    background: url(../images/flat-lay-notebook-with-list-desk.jpg) center;
    background-size: cover;
    content: "";
    display: block;
    height: 300px;
}

.aboutme .content-wrapper {
    max-width: 900px;
}

.aboutme-section {
    margin-bottom: 50px;
}
.aboutme-section h2 {
    border-bottom: 2px dashed #d3d4d6;
}
.download-link {
    position: fixed;
    top: 10px;
    left: 10px;
}

/* About Me: Projects */
.project-item {
    display: flow-root;
    margin: 30px 0;
}
.project-item img {
    width: 300px;
    float: left;
    margin-right: 20px;
}


/* About Me: Work Experience */
.work-item {
    display: grid;
    grid-template-columns: 300px 1fr;
    column-gap: 20px;
    margin: 30px 0;
}
.work-details p {
    margin: 0;
}
.work-summary p:first-child {
    margin-top: 0;
}

/* About Me: Education */
.education-item {
    margin: 30px 0;
}
.education-item p {
    margin: 0;
}

/*a:link {
  color: Aqua;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: CornflowerBlue;
  background-color: transparent;
  text-decoration: none;
}*/

table {
  border-collapse: collapse;
}
table.center {
    margin-left: auto;
    margin-right: auto;
}
tr { 
  border: solid;
  border-width: 2px Gray;
  border-color: Gray;
}
td {
  border-right: solid 2px Gray;
  border-left: solid 2px Gray;
  text-align: center;
  vertical-align: bottom;
}

/* FOOTER
------------------------------------*/
footer {
    background: #222;
    color: #d3d4d6;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}
.socials {
    list-style-type: none;
    padding: 0;
}
.socials li {
    display: inline-block;
    margin-left: 10px;
}
.socials img {
    width: 32px;
}
.socials img:hover {
    opacity: 0.5;
}