/* ==========================================
   GLOBAL STYLES
   ========================================== */

body {
  margin: 0;
  padding-bottom: 20px;
  background-image: url('images/bgtile.png');
  background-repeat: repeat;
}

* {
  cursor: url(https://cur.cursors-4u.net/nature/nat-5/nat428.cur), auto;
}

i {
  color: #53446A;
}

/* ==========================================
   LAYOUT - GRID CONTAINER
   ========================================== */

#container {
  width: 900px;
  margin: 140px auto auto;
  display: grid;
  column-gap: 5px;
  row-gap: 5px;
  grid-template-columns: 15% 75%;
  grid-template-rows: 100px 175px 200px 135px;
  grid-template-areas: 
    "hd hd"
    "nav main"
    "sb main"
    "footer footer";
  justify-content: center;
}


/* ==========================================
   SHARED SECTION STYLES
   ========================================== */

header,
nav,
.sidebar,
.content,
footer {
  background-color: rgba(255, 255, 255, 0.50);
  border: 1px solid #005996;
  transition: .5s;
  border-radius: 5px;
}

header:hover,
nav:hover,
.sidebar:hover,
.content:hover,
footer:hover {
  background-color: rgb(255, 255, 255);
  cursor: default;
}


/* ==========================================
   HEADER
   ========================================== */

header {
  grid-area: hd;
  padding-top: 11px;
  overflow: hidden;
}

header h1 {
  font-family: "Jersey 10", sans-serif;
  font-weight: 100;
  font-size: 4rem;
  margin: 0;
  text-shadow: 0 0 3px #000000, 0 0 5px #53446A;
  color: #d9e7ff;
  text-align: center;
}


/* ==========================================
   NAVIGATION
   ========================================== */

nav {
  grid-area: nav;
  padding: 15px;
  overflow: hidden;
  text-align: center;
}

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

nav a {
  color: #4e608a !important;
}

nav img {
  transform: scale(1.5);
}

nav li {
  list-style: none;
  text-align: center;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
}

/* ==========================================
   SIDEBAR
   ========================================== */

.sidebar {
  grid-area: sb;
  padding: 5px;
  padding-top: 36px;
  overflow: auto;
}


/* ==========================================
   MAIN CONTENT
   ========================================== */

.content {
  grid-area: main;
  padding: 10px;
  overflow: auto;
}

/* Content padding for work page */
.content.work-content {
  padding-left: 48px;
}

/* Content text alignment for about page */
.content.about-content {
  text-align: center;
  display: flex;
  align-items: center;
}

.content.about-content p {
  font-family: "Trebuchet MS", sans-serif;
  line-height: 1.6;
  color: #374464;
}

.content.about-content p::first-letter {
  font-size: 2.5em;
  font-weight: bold;
  color: #884a81;
  line-height: 1;
  margin-right: 1px;
}

/* Profile image on about page */
.content.about-content img {
  float: left;
  margin-right: 10px;
  margin-bottom: 60px;
  border: 5px solid #c37291;
  background-color: #905f94;
  height: 200px;
  width: 200px;
  border-radius: 30px 10px 30px 10px;
}


/* ==========================================
   PROJECT CARDS (work.html)
   ========================================== */

.project1,
.project2,
.project3,
.project4,
.project5,
.project6 {
  position: relative;
  filter: brightness(0.9) saturate(0.7);
}

.project1:hover,
.project2:hover,
.project3:hover,
.project4:hover,
.project5:hover,
.project6:hover {
  filter: none;
}

.project1 img,
.project2 img,
.project3 img,
.project4 img,
.project5 img,
.project6 img {
  margin-left: auto;
  margin-right: auto;
  border: 5px solid #d8ccff;
  background-color: #d8ccff;
  height: 240px;
  width: 240px;
  border-radius: 10px;
}

.project-overlay {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  height: 240px;
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #889ac6;
  opacity: 0;
  visibility: hidden;
  transition: all .5s ease;
  border-radius: 10px;
  padding: 15px;
  box-sizing: border-box;
}

.project-overlay p {
  text-align: center;
  color: black;
}

.project1:hover .project-overlay,
.project2:hover .project-overlay,
.project3:hover .project-overlay,
.project4:hover .project-overlay,
.project5:hover .project-overlay,
.project6:hover .project-overlay{
  opacity: 1;
  visibility: visible;
}


/* ==========================================
   FOOTER
   ========================================== */

footer {
  grid-area: footer;
  padding: 10px;
  overflow: hidden;
}