/* Base */

/*
  All body elements will have the main text 
  in Source sans Pro and some others sans serif.
*/

body {
  font-family: "Source Sans Pro", sans-serif;
  background-color: #f7f7f7;
}

img {
  max-width: 100%;
}

/* 
  The heading level 1 and heading level 2 will have 
  the main text in Playfair Display and some others serif.
*/

h1,
h2 {
  font-family: "Playfair Display", serif;
}

/* Styling */

/*
  All elements with the content class will align in center.
*/

.content {
  text-align: center;
}

main {
  outline: none;
}

/*
  The page title will display as inline elements.
  The font-size is 2 times larger than the default root font size.
  It will vertically align with the superscript-baseline or its parent.
*/

.page-title {
  display: inline;
  font-size: 2rem;
  vertical-align: super;
}

/*
  All elements with the iama class will have the main text 
  in Playfair Display and some others serif. 
  The text will be aligned on the left margin and away from 
  the left margin by 1rem.
*/

.iama {
  font-family: "Playfair Display", serif;
  text-align: left;
  margin-left: 1rem;
}

.my-info {
  font-size: 1.2em;
  padding: 0 2rem;
}

/*
  The image in the my picture class will fill 50% width of the browser.
  Put 2-pixel solid and white all four sides of outer border
  and round off the corners of the image 50%
*/

.my-picture {
  width: 50%;
  border: 2px solid white;
  border-radius: 50%;
}

/*
  All elements with the hero and footer class will have a background 
  color in dark blue, the color of the text is in light green. 
  The thickness of the padding area from the top and bottom edges
  is 1rem and from the right and left edges is 2rem.
  The top and bottom margins are 0.
*/

.hero,
.footer {
  background-color: #00303f;
  color: #cae4db;
  padding: 1rem 2rem;
  margin: 0;
}

.footer {
  text-align: center;
  font-size: 1rem;
  padding: 4rem 2rem;
}

/* Responsive Web Design */

h2 {
  padding-left: 1rem;
}

/* hero */

/*
  All elements with the my-name and my-location class will have
  the font-size that is 1.25 times larger than the default root font size.
  The top and bottom margins are 0 and the left and right margins are 1rem.
*/

.my-name,
.my-location {
  font-size: 1.25rem;
  margin: 0 1rem;
}

/* article */

/*
  The thickness of the padding area of the story class
  from the top and bottom edges is 2rem and 
  from the right and left edges is 0.
*/

.story {
  padding: 2rem 0;
}

.story h2 {
  font-size: 3rem;
  text-align: center;
}

.story p {
  margin: 1rem 2rem;
  font-size: 1.5rem;
}

/* my blog */

.my-blog {
  padding: 1rem 2rem;
  margin: 0;
  background-color: #cae4db;
}

.my-blog h2 {
  font-size: 3rem;
  text-align: center;
}

.my-blog p {
  margin: 1rem 2rem;
  font-size: 1.5rem;
}

.my-blog img {
  margin: 0.5rem 3rem;
  max-width: 65%;
}

img.code-pic {
  max-width: 100%;
  margin: 0;
}

/* Drop Cap */
.firstletter {
  float: left;
  font-family: "Fredericka the Great", cursive;
  color: #00303f;
  border-bottom: 10px solid #d4af37;
  font-size: 95px;
  line-height: 95px;
  padding-right: 10px;
  padding-left: 5px;
  text-align: center;
  margin: 0;
}

/* Image Hover Effects 1 */

.first-effect {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.first-effect img {
  opacity: 1;
  max-width: 100%;
  transition: opacity 0.35s;
}

.first-effect figcaption {
  font-family: "Source Sans Pro", sans-serif;
  color: black;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2rem 2rem;
  width: 100%;
  height: 100%;
  text-align: center;
}

.first-effect figcaption::before {
  position: absolute;
  top: 60%;
  right: 30px;
  bottom: 60%;
  left: 30px;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  content: "";
  opacity: 0;
  background-color: white;
  transition: all 0.5s;
  transition-delay: 0.8s;
}

.first-effect h4 {
  margin: 0 0 5px;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  transform: translate3d(0%, 50%, 0);
  transition-delay: 0.3s;
}

.first-effect:hover img {
  opacity: 0.35;
}

.first-effect:hover figcaption::before {
  background: rgba(247, 247, 247, 0);
  top: 30px;
  bottom: 30px;
  opacity: 1;
  transition-delay: 0s;
  cursor: pointer;
}


.first-effect:hover figcaption h4 {
  opacity: 1;
  transform: translate3d(0%, 0%, 0);
  transition-delay: 0.3s;
}


/* Image Hover effects 2 */
.second-effect {
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
  background: #00303f;
}

.second-effect:before,
.second-effect:after {
  box-sizing: border-box;
  transition: all 0.4s ease;
}

.second-effect img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}

.second-effect:before,
.second-effect:after {
  position: absolute;
  top: 20px;
  right: 20px;
  content: "";
  background-color: white;
  z-index: 1;
  opacity: 0;
}

.second-effect:before {
  width: 0;
  height: 2px;
}

.second-effect:after {
  height: 0;
  width: 2px;
}

.second-effect figcaption {
  font-family: "Source Sans Pro", sans-serif;
  position: absolute;
  left: 0;
  bottom: 0;
  color: white;
  text-align: left;
}

.second-effect h4 {
  margin: 0;
  font-weight: 600;
  opacity: 0;
  font-size: 2rem;
  text-transform: uppercase;
  padding: 20px 20px;
}

.second-effect:hover img,
.second-effect.hover img {
  opacity: 0.5;
  cursor: pointer;
}

.second-effect:hover:before,
.second-effect.hover:before,
.second-effect:hover:after,
.second-effect.hover:after {
  opacity: 1;
  transition-delay: 0.35s;
}

.second-effect:hover:before,
.second-effect.hover:before {
  width: 60px;
}

.second-effect:hover:after,
.second-effect.hover:after {
  height: 60px;
}

.second-effect:hover h4,
.second-effect.hover h4 {
  opacity: 1;
  transition-delay: 0.35s;
}

/*  layout */

/*  mobile is the default layout (no media queries needed) */

/*
  Make the about-content class a grid container and
  all of its children automatically become grid items.
  The grid has 3 colums.
  Align the content in the grid in the center of the horizontal alignment.
*/

.about-content {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  justify-items: center;
}

.iama,
.my-info {
  grid-column: 2/3;
  font-size: 1.5rem;
}

.iama {
  justify-self: left;
}

.my-info {
  text-align: left;
}

figure {
  margin: 0.5rem;
}

/* footer and form grid */

/*  
  Make the footer class and a form container
  a grid container that has 3 columns.
  The middle column will be at least 320px=20*16px
  but never wider than 640px=40*16px.
*/

.footer,
.form-container {
  display: grid;
  grid-template-columns: 1fr minmax(20rem, 40rem) 1fr;
}

.footer p,
.footer a,
.form-container form,
.form-container h2 {
  grid-column: 2/3;
}

/* 
  SVG github icon will appear 100% of the viewport width
  and the color of the shape inside outline will be white
 */

.github {
  max-width: 100%;
  fill: #cae4db;
}

/* tablet layout >=48rem (768px) */

@media screen and (min-width: 48rem) {
  /*
    If the screen is larger than or equal 768px=48*16px
    then the page title will have the font-size that is
    3 times larger than the default root font size.
  */

  .page-title {
    font-size: 3rem;
  }

  h2 {
    font-size: 2rem;
  }

  .my-name,
  .my-location {
    font-size: 1.5rem;
  }

  /*
    Make the gallgery class and the figure element a grid container.
    The grid has 2 colums and each column width is the same.
    Align all the gallery images in the grid in the center of the vertical axis.
  */

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .blog-pic {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* wide screen layout >=64rem (1024px) */

@media screen and (min-width: 64rem) {
  /*
    If the screen is larger than or equal 1024px=64*16px then  
    my-picture image will appear 20rem of the viewport width.
    20rem (20*16px = 320px)
  */

  .my-picture {
    max-width: 20rem;
  }

  /*
    Make the gallgery class a grid container.
    The grid has  columns and each column width is the same.
    Align all the gallery images at the start of the cross axis
    which is horizontal.
  */

  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
  }

  .first-pic {
    grid-column-end: span 2;
    grid-row-end: span 2;
  }

  .eighth-pic {
    grid-column-end: span 2;
    grid-row-end: span 2;
  }

  /*
    Make the story class a grid container.
    The grid has 3 columns.
    The middle column will be 640px=40*16px.
  */

  .story {
    display: grid;
    grid-template-columns: 1fr 40rem 1fr;
  }
  .story h2 {
    grid-column: 1/4;
  }

  .story p {
    grid-column: 2/3;
    line-height: 1.5;
  }

  /* my blog*/

  .my-blog {
    display: grid;
    grid-template-columns: 1fr 50rem 1fr;
  }
  .my-blog h2 {
    grid-column: 1/4;
  }

  .my-blog p {
    grid-column: 2/3;
    line-height: 1.5;
  }

  .blog-pic {
    grid-column: 2/3;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Form dimension */
form {
  grid-column: 2/3;
  max-width: 40rem;
  padding: 1rem;
}

fieldset {
  background-color: rgb(235, 232, 231);
  border-radius: 0.25rem;
  border: 1px solid lightgrey;
}

legend {
  font-size: 1rem;
  font-weight: 600;
  color: #00303f;
  border: 1px solid lightgrey;
  border-radius: 0.25rem;
  padding: 0.5rem 0.5rem;
  background-color: white;
  margin-bottom: 10px;
}

.input-box {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  border: 1.5px solid gray;
  width: 85%;
  margin-top: 12px;
  padding: 10px;
}

.input-box:focus {
  outline-color: rgb(77, 144, 254);
}

textarea {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  border: 1.5px solid gray;
  width: 85%;
  margin-top: 12px;
  padding: 10px;
}

textarea:focus {
  outline-color: rgb(77, 144, 254);
}

label {
  font-size: 1.25rem;
  font-weight: 600;
}

.button {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1.75rem;
  color: #cae4db;
  background-color: #00303f;
  border-radius: 0.25rem;
  border: 1px solid #00303f;
  padding: 0.75rem 0.75rem;
  cursor: pointer;
}

.button:hover {
  background-color: #00303f81;
  border: 1px solid black;
}

.button:focus {
  outline-color: #cae4db;
}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 40px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  margin-top: 15px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ccc;
  border-radius: 50%;
}

/* When mouse-over, add a grey background color */
.container input:checked ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a green background */
.container input:checked ~ .checkmark {
  background-color: #00303f;
}

/* Create the indicator (dot/circle-hidden) when not checked */
.checkmark::after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: white;
}