/* BASE STYLES */

/* Custom properties/variables  */
:root {
    --main-white: #f0f0f0;
    --main-red: #be3144;
    --main-blue: #111214;
    --main-gray: #131516;
    --main-dark: #000; }
  
  /* Base reset */
  * {
    margin: 0;
    padding: 0; }
  
  /* box-sizing and font sizing */
  *,
  *::before,
  *::after {
    box-sizing: inherit; }
  
  html {
    box-sizing: border-box;
    /* Set font size for easy rem calculations
       * default document font size = 16px, 1rem = 16px, 100% = 16px
       * (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
      */
    font-size: 62.5%;
    scroll-behavior: smooth; }
  
  /* A few media query to set some font sizes at different screen sizes.
     * This helps automate a bit of responsiveness.
     * The trick is to use the rem unit for size values, margin and padding.
     * Because rem is relative to the document font size
     * when we scale up or down the font size on the document
     * it will affect all properties using rem units for the values.
    */
  /* I am using the em unit for breakpoints
     * The calculation is the following
     * screen size divided by browser base font size
     * As an example: a breakpoint at 980px
     * 980px / 16px = 61.25em
    */
  /* 1200px / 16px = 75em 
  @media (min-width: 75em) {
    html {
      font-size: 15em; } } */

    
  /* 980px / 16px = 61.25em */
  @media (max-width: 61.25em) {
    html {
      font-size: 58%; } }
  
  /* 460px / 16px = 28.75em */
  @media (max-width: 28.75em) {
    html {
      font-size: 55%; } }
  


  body {
    font-family: "Patrick Hand SC", sans-serif;
    font-size: 1.8rem;
    /* 18px */
    font-weight: 400;
    line-height: 1.4;
    color: var(--main-white); }
  
  h1, h2 {
    font-family: "Patrick Hand SC", sans-serif;
    font-weight: 700;
    text-align: center; }
  
  h1 {
    font-size: 6rem;
    font-family: "Patrick Hand SC", sans-serif;
    color: rgb(165, 125, 51); }
  
  h2 {
    font-size: 4.2rem;
    font-family: "Patrick Hand SC", sans-serif; }
  
  ul {
    list-style: none; }
  
  a {
    text-decoration: none;
    color: var(--main-white); }
  
  img {
    display: block;
    width: 100%; }

  p {
    font-size: 2.5rem;;
  }
  

/* ---------------------------------------------------------- */


/* NAVBAR SECTION */

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #4b4949e5;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.nav-list {
  display: flex;
  margin-right: 10vw;
}

/*#home-nav {
  padding-right: 21vw;
  padding-left:3vw;
} */

@media (max-width: 28.75em) {
  .nav {
    justify-content:center;
  }

  .nav-list {
    margin: 0 1rem;
  }
}

.nav-list a {
  display: block;
  font-size: 2rem;
  padding: 22px 10vw 22px 22px;
}

.nav-list a:hover {
  background: rgba(245, 222, 179, 0.432);
}


/* Dropdown Button */
.dropbtn {
  background-color: #4b494918;
  color: white;
  padding: 22px 10vw 22px 16px;
  font-size:  2rem;
  border: none;
  font-family: "Patrick Hand SC", sans-serif;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #4b494996;
  min-width: 130px;
  
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: wheat;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  flex-wrap: wrap;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;
                            color: black;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: rgba(245, 222, 179, 0.432);;}





/* ---------------------------------------------------------- */
  
  /* WELCOME SECTIOM */


  .welcome-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-image: url(/images/princess.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 4px solid rgba(255, 217, 0, 0.418); }
  
  .welcome-section > p {
    font-size: 2.9rem;
    font-weight: 200;
    font-style: italic;
    color: rgb(165, 125, 51); }

    #welcome-text {
    font-size: 2.9rem;
    font-weight: 200;
    background-color: #030303f5; ;
    text-align:justify;
    padding: 5px 50px;
    }

    article h3 {
        text-align: center;
        padding-top: 30px;
        font-size: 40px;
    }
  

    /* ---------------------------------------------------------- */

  /* WLECOME-TEXT SECTION  */


    @media (min-width: 1000px ) {
  
      #welcome-text {
        padding-left: 15vw;
        padding-right: 15vw;
        text-align: justify;
      }
      #welcome-text p  {
       font-size: 1.25em; 
    }

    
  }





/* ---------------------------------------------------------- */

  /* BOOK PROMOTION SECTION  */


  .projects-section {
    text-align: center;
    padding: 4rem 2rem;
    background: #030303f5; }
  
  .projects-section-header {
    max-width: 800px;
    margin: 0 auto 6rem auto;
    border-bottom: 0.2rem solid white;
    color: white; }
  
  @media (max-width: 28.75em) {
    .projects-section-header {
      font-size: 4rem; } }
  
  /* "Automagic" image grid using no media queries */
  .projects-grid {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
    grid-gap: 4rem;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    margin-bottom: 10rem; }

    @media (max-width: 1000px ) {

      .projects-grid {grid-template-columns: repeat(auto-fill);}

      
    }
  
    @media (min-width: 1000px ) {
  
      .projects-grid {grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));}
  
  
      
    }
  
  @media (max-width: 30.625em) {
    .projects-section {
      padding: 4rem 1rem; }
    .projects-grid {
      grid-template-columns: 1fr; } }
  
  .project {
    background: var(--main-gray);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 2px; }
  
  .code {
    color: var(--main-gray);
    transition: color 0.3s ease-out; }
  
  .project:hover .code {
    color: #ff7f50; }
  
  .project-image {
    height: calc(100% - 6.8rem);
    width: 100%;
    object-fit: cover; }
  
  .project-title {
    font-size: 2rem;
    padding: 2rem 0.5rem; }
  
  .btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 2px; }
  
  .btn-show-all {
    font-size: 2rem;
    background: var(--main-gray);
    transition: background 0.3s ease-out; }
  
  .btn-show-all:hover {
    background: var(--main-red); }
  
  .btn-show-all:hover > i {
    transform: translateX(2px); }
  
  .btn-show-all > i {
    margin-left: 10px;
    transform: translateX(0);
    transition: transform 0.3s ease-out; }
  




/* ---------------------------------------------------------- */

  /* CONTACT SECTION */



  .contact-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 80vh;
    padding: 0 2rem;
    background-image: url(/images/contact-me.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top: 4px solid rgba(255, 217, 0, 0.418); }
  
  .contact-section-header > h2 {
    font-size: 6rem; }
  
  @media (max-width: 28.75em) {
    .contact-section-header > h2 {
      font-size: 4rem; } }
  
  .contact-section-header > p {
    font-style: italic; }
  
  .contact-links {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 980px;
    margin-top: 4rem;
    flex-wrap: wrap; }
  
  .contact-details {
    font-size: 2.4rem;
    text-shadow: 2px 2px 1px #1f1f1f;
    transition: transform 0.3s ease-out; }
  
  .contact-details:hover {
    transform: translateY(8px); }
  
  /* Footer */
  footer {
    font-weight: 300;
    display: flex;
    justify-content: space-evenly;
    padding: 2rem;
    background: var(--main-dark);
    border-top: 4px solid rgba(255, 217, 0, 0.418); }
  
  footer > p {
    margin: 2rem; }
  
  footer i {
    vertical-align: middle; }
  
  @media (max-width: 28.75em) {
    footer {
      flex-direction: column;
      text-align: center; } }



/* ---------------------------------------------------------- */

/* SOTC PAGE SECTION */

.welcome-section-sotc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-image: url(images/eyes.jpg);
    background-repeat: no-repeat;
    background-size: cover;}

.sotc-header {
    color: white;
    justify-content: center;
    font-size: 3.5em;
    padding-top: 10vh;
}

.sotc-subheader {
  padding-top: 5vh;
  color: white;
  width: 60vw;
  text-align: justify;
  font-size: 2.5rem;
}
    
.projects-grid-sotc {
    padding-top: 0.5vh;
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));*/
    grid-gap: 4rem;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    margin-bottom: 0.5vh; }

    @media (max-width: 1000px ) {

      .projects-grid-sotc {grid-template-columns: repeat(auto-fill);}

  
      
    }
  
    @media (min-width: 1000px ) {
  
      .projects-grid-sotc {grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));}

      .sotc-header {
        color: white;
        justify-content: center;
        font-size: 5.5em;
    }

    .sotc-subheader {
      padding-top: 10vh;
      color: white;
      width: 60vw;
      text-align: justify;
      font-size: 3.75rem;
    }

      
    }
  
/* ---------------------------------------------------------- */
    
/* CHAPTERS */

/*background-image: url(images/wood-1759566_1920.jpg);  }*/


#page {
    padding: 20vh 5vh 1vh 5vh;
    background-color: #181818f5; 

}

@media (min-width: 1000px ) {
  
        #page p {
          font-size: 1.8em;
        }

        #page h2 {
          font-size: 4em;
          padding-bottom: 7.5vh;
      }
  
}

article h2 {
    font-size: 2.15em;
    padding-bottom: 3vh;
}

div a {
   margin: 0 auto; }

div a:hover {
    color: rgb(190, 172, 64) ;
}

#table-of-contents {
    display: flex;
    flex-direction: row;
   align-content: center;
   justify-content: center;
}

.first-p {
  margin-top: 7vh;
}