main.scss

/*
       ------------contents-----------
1. general styling 
2. nav styling
3. index.html styling 
    -about me section styling
    -project section styling
    -blog section styling
    friend section/ friend icon styling
4. about.html styling 
    -about me section styling
    -hobbies and interest styling
    -education history styling
    -employment history styling
5. project.html styling
    -hannah codes section styling
    -hannah plays section styling
    - other section styling
    -project card styling
6. blog.html styling
7. footer styling
8. header image styling
9. 404.html styling
10. terms.html styling
*/
/*-----------1:general styling----------*/
*{
    margin: 0;
    padding: 0;
    font-family: "poppins", sans-serif;
    letter-spacing: 1px;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
:root{
  /*light mode colours*/

  --light-hamburger-icon-colour: black;
  --light-body-bg-colour: #F8F8FF;
  --light-hover-active-colour: #5c2246;
  --light-nav-footer-bg-colour: #F5F5F5;
  --light-nav-text-colour: black;
  --light-svg-fill-colour: black;
  --light-section-1-bg-colour: #cfcaca;
  --light-section-2-bg-colour: #adafb8;
  --light-section-3-bg-colour: #c7c7c7;
  --light-section-4-bg-colour: #c0bcbc;
  --light-sorce-code-svg-fill-colour: #5a5c5e;
  --light-blue-friends-hover-colour: #2d5e73;
  --light-card-bg-colour: white;
  --light-card-title-span-colour: #333;
  --light-card-box-shadow-colour: rgba(0,0,0,0.2);
  --light-card-box-shadow-hover-colour: #5c2246;
  --light-top-border-colour: #5c2246;
  /*dark mode colours*/

  --hover-active-colour: #F2C7E2;
  --svg-fill-colour: #fff;
  --sorce-code-svg-fill-colour: hsl(214, 7%, 47%);
  --section-1-bg-colour: #121212;
  --section-2-bg-colour: #18191c;
  --section-3-bg-colour: #0f1012;
  --section-4-bg-colour: #111114;
  --body-bg-colour: #121212;
  --nav-footer-bg-colour: #131418;
  --nav-text-colour: #f2f5f7;
  --hamburger-icon-colour: #f2f5f7;
  --card-bg-colour: #262626;
  --blue-friends-hover-colour: rgb(130, 204, 238);
  --card-title-span-colour: rgb(255, 251, 251);
  --card-box-shadow-colour: rgba(139,138,138,0.2);
  --card-box-shadow-hover-colour: #f2c7e2;
  --top-border-colour: #F2C7E2;
  --footer-link-colour: dimgrey;
  --blog-span-hr-colour: rgba(105, 105, 105, 0.26);
}
body{
    overflow-x: hidden;
    background-color: var(--light-body-bg-colour);
    @media (prefers-color-scheme: dark) {
        background-color: var(--body-bg-colour);
        
    }
}
a{
  color: var(--light-nav-text-colour);
  &:hover{
    color: var(--light-hover-active-colour);
  }
  @media (prefers-color-scheme: dark) {
    color: var(--nav-text-colour);
    &:hover{
        color: var(--hover-active-colour);
    }
    
}
}



/*----------2:nav styling-------*/
nav{
    height: 6rem;
    width: 100vw;
    background-color: var(--light-nav-footer-bg-colour);
    color: var(--light-nav-text-colour);
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    position: fixed;
    z-index: 10;
    @media screen and (max-width: 800px){
        position: fixed;
        z-index: 3;
    }
    @media (prefers-color-scheme: dark) {
        background-color: var(--nav-footer-bg-colour);
        color: var(--nav-text-colour);
    }
    /*Styling logo*/
.logo{
    padding:1vh 1vw;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    img {
        height: 5rem;
        width: 5rem;
    }
    @media screen and (max-width: 800px){
            padding:1vh 1vw;
            margin-top: auto;
            margin-bottom: auto;
            margin-left: 0;
            margin-right: 0;
            text-align: center;
            padding-left: 1em;
        }
}
  
  
  /*Styling Links*/
  .nav-links{
      display: flex;
      list-style: none; 
      width: 88vw;
      padding: 0 0.7vw;
      justify-content: space-evenly;
      align-items: center;
      text-transform: uppercase;
      li a{
        text-decoration: none;
        margin: 0 0.7vw;
        color: var(--light-nav-text-colour);
        &:hover{
            color: var(--light-hover-active-colour);  
        }
        &::before{
            content: "";
      display: block;
      height: 3px;
      width: 0%;
      background-color: var(--light-hover-active-colour);
      position: absolute;
      transition: all ease-in-out 250ms;
      margin: 0 0 0 10%;
        }
        &:hover:before{
            width: 80%;
        }
    }
    li .active {
        color: var(--light-hover-active-colour);
        font-weight: bold;
    }
    li {
        position: relative;
    }
    @media screen and (max-width: 800px){
            position: fixed;
            background: var(--light-nav-footer-bg-colour);
            height: 100vh;
            width: 100%;
            flex-direction: column;
            clip-path: circle(50px at 90% -20%);
            -webkit-clip-path: circle(50px at 90% -10%);
            transition: all 1s ease-out;
            pointer-events: none;
            &.open{
              clip-path: circle(1000px at 90% -10%);
              -webkit-clip-path: circle(1000px at 90% -10%);
              pointer-events: all;
            }
            /*Animating Hamburger Icon on Click*/
            &li{
              opacity: 0;
              &:nth-child(1){
                transition: all 0.5s ease 0.2s;
            }
            &:nth-child(2){
                transition: all 0.5s ease 0.4s;
            }
            &:nth-child(3){
                transition: all 0.5s ease 0.6s;
            }
            &:nth-child(4){
                transition: all 0.5s ease 0.7s;
            }
            &:nth-child(5){
                transition: all 0.5s ease 0.8s;
            }
            &:nth-child(6){
                transition: all 0.5s ease 0.9s;
                margin: 0;
            }
            &:nth-child(7){
                transition: all 0.5s ease 1s;
                margin: 0;
            }
            &.fade{
                opacity: 1;
            }
          }
        
    }
    @media (prefers-color-scheme: dark) {
            background: var(--nav-footer-bg-colour);
        li {
            a{
            color: var(--nav-text-colour);
            &:hover{
                color: var(--hover-active-colour);  
            }
            &:before{
                background-color: var(--hover-active-colour);
            }
            }
            .active {
                color: var(--hover-active-colour);
            }
        }
    }
  }

  
  /*Styling Hamburger Icon*/
  .hamburger{
      display: none;
      div{
        width: 30px;
        height:3px;
        background: var(--light-hamburger-icon-colour);
        margin: 5px;
        transition: all 0.3s ease;
    }
    @media screen and (max-width: 800px){
            display:block;
            position: absolute;
            cursor: pointer;
            right: 5%;
            top: 50%;
            transform: translate(-5%, -50%);
            z-index: 2;
            transition: all 0.7s ease;
        
  }
  @media (prefers-color-scheme: dark) {
    div{
      background: var(--hamburger-icon-colour);
    }
  }
}
  
    @media screen and (max-width: 800px){   
      .toggle{
        .line1{
            transform: rotate(-45deg) translate(-5px,6px);
        }
        .line2{
            transition: all 0.7s ease;
            width:0;
        }
        .line3{
            transform: rotate(45deg) translate(-5px,-6px);
        }
      } 
    } 
    }
    .dropdown-links{
      margin-bottom: 1em;
      @media screen and (max-width:800px){
        display: none;
        opacity: 0;
      }
    }
    .desktop_display_only{
      display: inline-block;
      @media screen and (max-width: 800px){
        display: none;
        opacity: 0%;
      }
    }
    .mobile_only{
      display: none;
      opacity: 0;
      @media screen and (max-width:800px) {
        display: block;
        opacity: 1;
      }
    }
    .dropdown {
      position: relative;
      display: inline-block;
      @media screen and (max-width:800px){
        display: none;
        opacity: 0;
      }
    }
    .dropdown_text{
      font-weight: bold;
      padding-bottom: .5em;
      @media screen and (max-width:800px){
        display: none;
        opacity: 0;
      }
    }
    .dropdown_mobile_text{
      opacity: 0;
      display: none;
      @media screen and (max-width:800px){
        font-weight: bold;
      padding-bottom: .5em;
        opacity: 1;
        display: block;
      }
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: var(--light-nav-footer-bg-colour);
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
      left: -3.5em;
      z-index: 1;
      @media screen and (max-width:800px){
        display: none;
        opacity: 0;
        z-index: -9;
      }
      @media (prefers-color-scheme: dark) {
        background-color: var(--nav-footer-bg-colour);
      }
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
      margin: auto;
      text-align: center;
      padding-bottom: 1em;
      @media screen and (max-width:800px){
        display: none;
        opacity: 0;
      }
    }





/*-----------3:index.html styling---------*/
.index_h1{
    padding-top: 5em;
    margin: auto;
    text-align: center;
    color: var(--light-nav-text-colour);
    @media screen and (max-width: 800px){
      padding-top: 7em;
      font-size: 1.25em;
      padding-left: 2em;
      padding-right: 2em;
    }
    @media (prefers-color-scheme: dark) {
        color: var(--nav-text-colour);
    }
}
.index_welcome_text{
    margin: auto;
    text-align: center;
    padding-bottom: 2em;
    color: var(--light-nav-text-colour);
    @media screen and (max-width: 800px){
      font-size: 1.25em;
      padding-left: 2em;
      padding-right: 2em;
    }
    @media (prefers-color-scheme: dark) {
        color: var(--nav-text-colour);
    }
}

/*index.html about section*/
.index_about_section{
  padding-top: .7em;
  background-color: var(--light-section-1-bg-colour);
  @media (prefers-color-scheme: dark) {
    background-color: var(--section-1-bg-colour);
  }
  .index_about_h1{
    margin: auto;
    text-align: center;
    padding-bottom: .5em;
    color: var(--light-nav-text-colour);
    @media (prefers-color-scheme: dark) {
        color: var(--nav-text-colour);
      }
  }
  .index_about_text {
    font-size: 1.25em;
    padding-left: 20px;
    padding-right: 3em;
    padding-top: .8em;
    color: var(--light-nav-text-colour);
    @media screen and (max-width: 800px){
          font-size: .95em;
          padding-top: .8em;
          margin: auto;
          padding-left: 1.5em;
          padding-right: 1.5em;
          color: var(--light-nav-text-colour);
  }
  @media (prefers-color-scheme: dark) {
        color: var(--nav-text-colour);
      
    }
}
  .container {
    display: flex;
    justify-content: center;
    @media screen and (max-width: 800px){
        display: block;
    }
    img {
        max-width: 100%;
        @media screen and (max-width: 800px){
           display: block;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
            margin: auto;
          align-items: center;
        }  
      }
      .image {
        flex-basis: 20%;
        padding-top: 1.5em;
        padding-left: 1.5em;
        margin-left: 4em;
        padding-bottom: 1em;
        @media screen and (max-width: 800px){
            padding-left: 2em;
            padding-right: 2em;
            margin: auto;
          align-items: center;
    }
      }
}
  .text_placement{
    display: flex;
    padding: 0%;
    margin: 0%;
    padding-bottom: 1em;
    @media screen and (max-width: 800px) {
            display: flex;
            padding-right: 1.75em;
            padding-left: 1em;
            margin: 0%;
            padding-bottom: 1em;
    }
  }
  .h2_about_text{
    padding-top: .3em;
    color: var(--light-nav-text-colour);

@media screen and (max-width: 800px){
        padding-top: 1em;
        font-size: .9em;
        color: var(--light-nav-text-colour);
}
@media (prefers-color-scheme: dark) {
      color: var(--nav-text-colour);
}
  }
  .about_svg{
    fill: var(--light-svg-fill-colour);
    width: 2.5em;
    height: 2.5em;
    padding-right: auto;
     &:hover{
        fill: var(--light-hover-active-colour);
    }
    @media (prefers-color-scheme: dark) { 
          fill: var(--svg-fill-colour);
             &:hover{
              fill: var(--hover-active-colour);
        }
    }
    }
    .about_link_placement{
      display: flex;
      padding-top: auto;
      align-items: center;
      text-align: center;
      padding-top: .35em;
      }
      .about_links_placement{
        display: flex;
        } 
} 

/*index.html project section*/         
.index_card_section{
  background-color: var(--light-section-2-bg-colour);
  padding-top: .7em;
  padding-bottom: .7em;
  @media (prefers-color-scheme: dark) {
    background-color: var(--section-2-bg-colour);
  }
  h1{
    margin: auto;
  padding-top: .5em;
  padding-bottom: .5em;
  text-align: center;
  color: var(--light-nav-text-colour);
  
  @media (prefers-color-scheme: dark) {
        color: var(--nav-text-colour);
      }
}
}

/*index.html blog section*/
.index_blog_section{
    background-color: var(--light-section-3-bg-colour);
    padding-top: .7em;
    padding-bottom: 2em;
    @media (prefers-color-scheme: dark) {
        background-color: var(--section-3-bg-colour);
    }
    h1{
        margin: auto;
        padding-top: .5em;
        padding-bottom: .5em;
        text-align: center;
        color: var(--light-nav-text-colour);
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
        }
      }

  }

  /*index.html friends section*/
  .index_friends_section{
    background-color: var(--light-section-4-bg-colour);
    padding-top: .7em;
    @media screen and (max-width: 700px){
      padding-bottom: 2em;
     }
    @media (prefers-color-scheme: dark) {
        background-color: var(--section-4-bg-colour);
    }
    h1{
        margin: auto;
        text-align: center;
        color: var(--light-nav-text-colour);
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
  }
  /* friends avatar */
.firends-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    @media only screen and (max-width: 1500px) {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
    }
  }
  .friend-container_pink {
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
      .friend-name_pink {
        color: var(--light-nav-text-colour);
        font-weight: bold;
        font-size: 20px;
        text-decoration-color: var(--light-hover-active-colour);
      }
      &:hover >.friend-name_pink {
        text-decoration: underline;
        color: var(--light-hover-active-colour);
      }
      .friend-avatar_pink {
        border-radius: 9999px;
        width: 140px;
        height: 140px;
      }
      &:hover >.friend-avatar_pink {
        box-shadow: 0px 5px 15px 0 var(--light-hover-active-colour);
      }
      @media only screen and (max-width: 1500px) {
        .friend-container_pink {
          margin: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          .friend-name_pink {
            color: var(--light-nav-text-colour);
            font-weight: bold;
            font-size: 20px;
            text-decoration-color: var(--light-hover-active-colour);
          }
          &:hover > .friend-name_pink {
            text-decoration: underline;
            color: var(--light-hover-active-colour);
          }
          .friend-avatar_pink {
            border-radius: 9999px;
            width: 140px;
            height: 140px;
          }
          &:hover > .friend-avatar_pink {
            box-shadow: 0px 5px 15px 0 var(--light-hover-active-colour);
          }
          
        }
    }
      @media (prefers-color-scheme: dark) {
      .friend-name_pink {
        color: var(--nav-text-colour);
        font-weight: bold;
        font-size: 20px;
        text-decoration-color: var(--hover-active-colour);
      }
      &:hover >.friend-name_pink {
        text-decoration: underline;
        color: var(--hover-active-colour);
      }
      .friend-avatar_pink {
        border-radius: 9999px;
        width: 140px;
        height: 140px;
      }
      &:hover >.friend-avatar_pink {
        box-shadow: 0px 5px 15px 0 var(--hover-active-colour);
      }
  }
}
  .friend-container_blue {
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .friend-name_blue {
        color: var(--light-nav-text-colour);
        font-weight: bold;
        font-size: 20px;
        text-decoration-color: var(--light-blue-friends-hover-colour);
      }
      &:hover >.friend-name_blue {
        text-decoration: underline;
        color: var(--light-blue-friends-hover-colour);
      }
      .friend-avatar_blue {
        border-radius: 9999px;
        width: 140px;
        height: 140px;
      }
      &:hover > .friend-avatar_blue {
        box-shadow: 0px 5px 15px 0 var(--light-blue-friends-hover-colour);
      }
      @media only screen and (max-width: 1500px) {
          margin: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          .friend-name_blue {
            color: var(--light-nav-text-colour);
            font-weight: bold;
            font-size: 20px;
            text-decoration-color: var(--light-blue-friends-hover-colour);
          }
          &:hover > .friend-name_blue {
            text-decoration: underline;
            color: var(--light-blue-friends-hover-colour);
          }
          .friend-avatar_blue {
            border-radius: 9999px;
            width: 140px;
            height: 140px;
          }
          &:hover > .friend-avatar_blue {
            box-shadow: 0px 5px 15px 0 var(--light-blue-friends-hover-colour);
          }

  }
  @media (prefers-color-scheme: dark) {
    .friend-name_blue {
      color: var(--nav-text-colour);
      font-weight: bold;
      font-size: 20px;
      text-decoration-color: var(--blue-friends-hover-colour);
    }
    &:hover >.friend-name_blue {
      text-decoration: underline;
      color: var(--blue-friends-hover-colour);
    }
    .friend-avatar_blue {
      border-radius: 9999px;
      width: 140px;
      height: 140px;
    }
    &:hover >.friend-avatar_blue {
      box-shadow: 0px 5px 15px 0 var(--blue-friends-hover-colour);
    }
}
}
}
  
  /*-----------4:about.html styling-----------*/
  .about_h1{
    margin: auto;
    text-align: center;
    padding-top: 5em;
    padding-bottom: 4em;
    font-size: 3em;
    z-index: 5;
    color: var(--light-nav-text-colour);
    @media (prefers-color-scheme: dark) {
    color: var(--nav-text-colour);
    }
    .about_h1_bg{
        background: linear-gradient(180deg, #FE0000 16.66%,
            #FD8C00 16.66%, 33.32%,
            #FFE500 33.32%, 49.98%,
            #119F0B 49.98%, 66.64%,
            #0644B3 66.64%, 83.3%,
            #C22EDC 83.3%);
        opacity: 15%;
        z-index: 3;
        width: 100%;
        height: 100%;
        margin: auto;
        text-align: center;
        padding-top: 5em;
        padding-bottom: 4em;
        margin-top: -9em;
        font-size: 3em;
      }
    }
    .about_about_section{
        padding-top: .7em;
        background-color: var(--light-section-1-bg-colour);
        @media (prefers-color-scheme: dark) {
            background-color: var(--section-1-bg-colour);
      }
      .about_about_h1{
        margin: auto;
        text-align: center;
        padding-bottom: .5em;
        color: var(--light-nav-text-colour);
        
      @media (prefers-color-scheme: dark) {
        color: var(--nav-text-colour);
      }
  }
  .about_container {
    display: flex;
    justify-content: center;
    margin: auto;
    text-align: center;
    @media screen and (max-width: 800px){
      display: block;
  }
    img {
        max-width: 100%;
        @media screen and (max-width: 800px){
          display: block;
           width: 50%;
           margin-left: auto;
           margin-right: auto;
           margin: auto;
           align-items: center;
       }  
      }
      .about_image {
        flex-basis: 100%;
        padding-top: 1.5em;
        padding-left: 1.8em;
        margin-left: 3em;
        padding-bottom: 1em;
        @media screen and (max-width: 800px){
          padding-left: 2em;
          padding-right: 2em;
          margin: auto;
          align-items: center;
  }
      }
  }
  .about_about_text {
    font-size: 1.20em;
    padding-left: 40px;
    padding-right: 15em;
    padding-top: .8em;
    margin-bottom: 4em;
    padding-bottom: 5em;
    color: var(--light-nav-text-colour);
      @media screen and (max-width: 800px){
        font-size: .95em;
        padding-top: .8em;
        margin: auto;
        padding-left: 1.5em;
        padding-right: 1.5em;
        color: var(--light-nav-text-colour);
      }
          
    @media (prefers-color-scheme: dark) {
        color: var(--nav-text-colour);
  }
  }
  .about_hobbies_h1{
    color: var(--light-nav-text-colour);
    margin: auto;
    text-align: center;
    margin-top: -10%;
    @media (prefers-color-scheme: dark) {
        color: var(--nav-text-colour);
  }
  }
    .about_hobbies_h1_intrest{
        color: var(--light-nav-text-colour);
        margin: auto;
        text-align: center;
        margin-top: 0%;
      @media (prefers-color-scheme: dark) {
        color: var(--nav-text-colour);
  }
}
      .about_hobbies_p{
        padding-bottom: 5em;
        padding-left: 1em;
        margin: auto;
        text-align: center;
        color: var(--light-nav-text-colour);
        @media screen and (max-width: 800px){
            .about_hobbies_p{
                padding-bottom: 1em;
                padding-left: 1.5em;
                padding-right: 1.5em;
                margin: auto;
                text-align: center;
                color: var(--light-nav-text-colour);
              }
        }
      @media (prefers-color-scheme: dark) {
        color: var(--nav-text-colour);
      }
  }
  }
  .about_edu_work_section{
    padding-top: .7em;
    background-color: var(--light-section-3-bg-colour);
    @media screen and (max-width: 700px){
      padding-bottom: 2em;
     }
    @media (prefers-color-scheme: dark) {
        background-color: var(--section-3-bg-colour);
      }
    .about_edu_work_h1{
        margin: auto;
        text-align: center;
        color: var(--light-nav-text-colour);
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
      }
      .about_edu_work_edu_h2{
        padding-left: 1em;
        padding-top: 2em;
        margin: auto;
        text-align: center;
        color: var(--light-nav-text-colour);
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
      }
      .about_edu_work_edu_sch_p{
        padding-left: 1em;
        margin: auto;
        text-align: center;
        color: var(--light-nav-text-colour);
        @media screen and (max-width: 800px){
            
        }
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
      }
    
      .about_edu_work_edu_mw_cert_h3{
        margin: auto;
        text-align: center;
        padding-bottom: 1em;
        color: var(--light-nav-text-colour);
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
      }
      table {
        border-collapse: collapse;
        width: 50%;
        margin: auto;
        align-items: center;
        padding-top: 1em;
        color: var(--light-nav-text-colour);
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
        td, th {
            border: 1px solid black;
            text-align: left;
            padding: 8px;
            @media screen and (max-width: 800px){
                border: 1px solid black;
      text-align: left;
      padding: 8px;
            }
            @media (prefers-color-scheme: dark) {
                border: 1px solid white;
              }
          }

      }
      .about_edu_work_edu_college_p{
        padding-left: 1em;
        padding-top: 1em;
        margin: auto;
        text-align: center;
        color: var(--light-nav-text-colour);
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
      }
      .college_table{
            border-collapse: collapse;
            width: 50%;
            margin: auto;
            align-items: center;
            padding-top: 1em;
            margin-bottom: 1em;
        @media screen and (max-width: 800px){
        display: none;
        opacity: 0;
        }
        
      }
      .college_table_mobile{
        display: none;
        opacity: 0;
    @media screen and (max-width: 800px){
    border-collapse: collapse;
        width: 90%;
        margin: 1em;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
        padding-top: 1em;
        margin-bottom: 1em;
        opacity: 1;
        display: block;
    }
    
  }
      .about_edu_work_work_ex_h2{
        padding-left: 1em;
        margin: auto;
        text-align: center;
        color: var(--light-nav-text-colour);
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
      }
      .about_edu_work_work_ex_p{
        padding-left: 1em;
        padding-bottom: 1em;
        margin: auto;
        text-align: center;
        color: var(--light-nav-text-colour);
        @media screen and (max-width: 800px){
            
        }
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
      }
      .about_edu_work_work_ex_p_2{
        padding-top: .7em;
        padding-left: 1em;
        padding-bottom: 1em;
        margin: auto;
        text-align: center;
        color: var(--light-nav-text-colour);
        @media screen and (max-width: 800px){
            
        }
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
      }
    }

/*-------------5:project.html styling-------------*/
.projects_hc_section{
  background-color: var(--light-section-1-bg-colour);
  padding-bottom: 1em;
  @media (prefers-color-scheme: dark) {
    background-color: var(--section-1-bg-colour);
  }
  .projects_hc_h1{
    padding: 1.5em;
    padding-left: 9em;
    padding-bottom: .7em;
    color: var(--light-nav-text-colour);
    @media screen and (max-width: 800px){
      margin: auto;
      padding-left: 1.5em;
      align-items: center;
    }
    @media (prefers-color-scheme: dark) {
      color: var(--nav-text-colour);
    }
  }
}     

.projects_hp_section{
 background-color: var(--light-section-2-bg-colour);
 padding-bottom: 1em;
 @media (prefers-color-scheme: dark) {
  background-color: var(--section-2-bg-colour);
}
 .projects_hp_h1{
  padding: 1.5em;
  padding-left: 9em;
  padding-bottom: .7em;
  color: var(--light-nav-text-colour);
  @media screen and (max-width: 800px){
    margin: auto;
    padding-left: 1.5em;
    align-items: center;
  }
  @media (prefers-color-scheme: dark) {
    color: var(--nav-text-colour);
  }
 } 
}  

.projects_hv_section{
  background-color: var(--light-section-3-bg-colour);
  padding-bottom: 1em;
  @media (prefers-color-scheme: dark) {
   background-color: var(--section-3-bg-colour);
 }
  .projects_hv_h1{
   padding: 1.5em;
   padding-left: 9em;
   padding-bottom: .7em;
   color: var(--light-nav-text-colour);
   @media screen and (max-width: 800px){
     margin: auto;
     padding-left: 1.5em;
     align-items: center;
   }
   @media (prefers-color-scheme: dark) {
     color: var(--nav-text-colour);
   }
  } 
 }       
        
.projects_other_section{
 background-color: var(--light-section-4-bg-colour);
 padding-bottom: .7em;
 @media screen and (max-width: 700px){
  padding-bottom: 2em;
 }
 @media (prefers-color-scheme: dark) {
  background-color: var(--section-4-bg-colour);
}
 .projects_other_h1{
  padding: 1.5em;
  padding-left: 9em;
  padding-bottom: .7em;
  color: var(--light-nav-text-colour);
  @media screen and (max-width: 800px){
    margin: auto;
    padding-left: 1.5em;
    align-items: center;
  }
  @media (prefers-color-scheme: dark) {
    color: var(--nav-text-colour);
  }
 }
}   
.project_band {
  width: 85%;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
  @media (min-width: 30em) {
      grid-template-columns: 1fr 1fr;
  }
  @media (min-width: 60em) {
      grid-template-columns: repeat(4, 1fr);
  }   
}
.project_card {
  background: var(--light-card-bg-colour);
  text-decoration: none;
  box-shadow: 0 2px 5px var(--light-card-box-shadow-colour);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 100%;
  position: relative;
  top: 0;
  transition: all 0.1s ease-in;
  &:hover {
    top: -2px;
    box-shadow: 0 4px 5px var(--light-card-box-shadow-hover-colour);
  }
  @media (prefers-color-scheme: dark) {
    background: var(--card-bg-colour);
          text-decoration: none;
          color: var(--nav-text-colour);
          box-shadow: 0 2px 5px var(--card-box-shadow-colour);
          display: flex;
          flex-direction: column;
          min-height: 100%;
          position: relative;
          top: 0;
          transition: all 0.1s ease-in;
          &:hover {
            top: -2px;
          box-shadow: 0 4px 5px var(--card-box-shadow-hover-colour);
          }
  }
  
  article {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  h1 {
    font-size: 18px;
    margin: 0;
    @media (prefers-color-scheme: dark) {
    h1 {
      font-size: 20px;
      margin: 0;
    }
  }
  }
  .thumb {
    padding-bottom: 60%;
    min-height: 100%; 
    width: 100%;
    background-size: cover;
  }
  .blog_page_thumb {
    padding-bottom: 60%;
    min-height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center center;
  }
}
@media (min-width: 60em) {
  .item-1 {
    grid-column: 1/span 2;
  }
  .item-1 h1 {
    font-size: 24px;
  }
}
.projects_links {
  border: 0.2em;
  text-decoration: none;
  display: inline-block;
  align-items: center;
  text-align: center;
  font-size: 18px;
  margin-left: .75em;
  padding-top: auto;
&:hover{
  border: 0.2em;
  color: var(--light-hover-active-colour);
  text-decoration: none;
  display: inline-block;
  align-items: center;
  text-align: center;
  font-size: 18px;
  margin-left: .75em;
  padding-top: auto;
}
@media (prefers-color-scheme: dark) {
  &:hover{
    color: var(--hover-active-colour);
  }
}
}
.projects_text{
  text-align: center;
  color: var(--light-nav-text-colour);
@media (prefers-color-scheme: dark) {
    color: var(--nav-text-colour);
}
}

.project_h1{
margin: auto;
text-align: center;
padding-top: 5em;
color: var(--light-nav-text-colour);
@media (prefers-color-scheme: dark) {
  color: var(--nav-text-colour);
  
}
}
.link_placement{
  margin: auto;
  display: flex;
  padding-top: auto;
  align-items: center;
  text-align: center;
  padding-top: .35em;
  }
  .source_code_links {
    border: 0.2em;
    color: var(--light-sorce-code-svg-fill-colour);
    text-decoration: none;
    display: inline-block;
    align-items: center;
    text-align: center;
    font-size: 18px;
    margin-left: .75em;
    padding-top: auto;
  &:hover{
    border: 0.2em;
  color: var(--light-hover-active-colour);
  text-decoration: none;
  display: inline-block;
  align-items: center;
  text-align: center;
  font-size: 18px;
  margin-left: .75em;
  padding-top: auto;
  }
  @media (prefers-color-scheme: dark) {
    &:hover{
      color: var(--hover-active-colour);
    }
  }
  }
  svg{
    fill: var(--light-svg-fill-colour);
    width: 2.5em;
    height: 2.5em;
    padding-left: .9em;
    padding-right: auto;
    @media (prefers-color-scheme: dark) {
        fill: var(--svg-fill-colour);
    }
    }
    .source_code_svg{
      fill: var(--light-sorce-code-svg-fill-colour);
      width: 2em;
      height: 2em;
      padding-left: .7em;
      padding-right: auto;
      }
      .head_text_projects {
        margin: 0.1em 1em;
        margin-left: 2em;
        padding-bottom: 0.3em;
        }
        .project_links_placement{
        display: flex;
        margin: auto;
        }
        .projects_img{
          width: 100%;
          margin: 0;
          padding: 0;
          margin-bottom: 1em;
        }
 

/*---------6:blog.html styling----------*/

/*blog homepage*/
.blog_page_main{
  padding-bottom: .7em;
  margin-bottom: .7em;
}
.h1{
  margin: auto;
  text-align: center;
  padding-top: 4em;
  padding-bottom: 1em;
  color: var(--light-nav-text-colour);
  @media (prefers-color-scheme: dark) {
    color: var(--nav-text-colour);
  }
}

.band {
  width: 85%;
  max-width: 1500px;
  margin: 0 auto;
  
  display: grid;
  
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
  @media screen and (max-width: 800px){
    margin-bottom: 1.5em;
  }
  @media (min-width: 30em) {
    grid-template-columns: 1fr 1fr;
  }
  
  @media (min-width: 60em) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.blog_card {
  background: var(--light-card-bg-colour);
  text-decoration: none;
  color: var(--light-nav-text-colour);
  box-shadow: 0 2px 5px var(--light-card-box-shadow-colour);
  display: flex;
  flex-direction: column;
  min-height: 100%;

  @media (prefers-color-scheme: dark) {
    background: var(--card-bg-colour);
  text-decoration: none;
  color: var(--nav-text-colour);
  box-shadow: 0 2px 5px var(--card-box-shadow-colour);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
  // sets up hover state
  position: relative;
  top: 0;
  transition: all .1s ease-in;
  @media (prefers-color-scheme: dark) {
    background-color: var(--card-bg-colour);
}
  &:hover {
    top: -2px;
    box-shadow: 0 4px 5px var(--light-card-box-shadow-hover-colour);
    @media (prefers-color-scheme: dark) {
      box-shadow: 0 4px 5px var(--card-box-shadow-hover-colour);
  }
  }
  
  article {
    padding: 20px;
    flex: 1;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  h1 {
    font-size: 20px;
    margin: 0;
    color: var(--light-card-title-span-colour);
    @media (prefers-color-scheme: dark) {
      color: var(--card-title-span-colour);
    }
  }
  
  p {
    flex: 1;
    line-height: 1.4;
  }
  
  span {
    font-size: 12px;
    font-weight: bold;
    color: var(--light-card-title-span-colour);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 2em 0 0 0;
    padding-right: 3em;
    @media (prefers-color-scheme: dark) {
      color: var(--card-title-span-colour);
    }
  }
  .span_flex{
    display: flex;
  }
  
  .thumb {
    padding-bottom: 60%;
    background-size: cover;
    background-position: center center;
  }
}

.item-1 {
  @media (min-width: 60em) {
    grid-column: 1 / span 2;
    
    h1 {
      font-size: 24px;
    }
  }
}
  /*-----------blog postpage--------*/

  .blog_post_main {
    padding-top: 2em;
    margin: auto;
    align-items: center;
    background-color: var(--light-body-bg-colour);
    width: 100%;
    padding-left: 40em;
    margin-bottom: 0;
    padding-bottom: 2em;
    width: 100%;
    display: block;
    @media (max-width: 1390px) {
          padding-top: 6em;
          margin: auto;
          align-items: center;
          background-color: var(--light-body-bg-colour);
          width: 100%;
          padding-left: 3em;
          width: calc(100% - 320px);
      }
    @media (max-width: 991px) {
        padding-top: 1.5em;
        margin-left: 0;
        padding: 20px 10px;
        width: 100%;
  }
  @media (max-width: 767px) {
   padding: 60px 10px;
    padding-top: 1.5em;
  }
  @media (max-width: 709px) {
  padding: 0px 20px;
    padding-top: 1.5em;
    padding-bottom: 1em;
  }
  @media (prefers-color-scheme: dark) {
    background-color: var(--body-bg-colour);
  }
  }

.blog_post_p{
  margin-top:0;
  margin-bottom:1rem;
  max-width: 50%;

    color: var(--light-nav-text-colour);
    @media (max-width: 991px) {
      margin-top:0;
      padding-top: 0;
      margin-left: 1em;
      max-width: 100%;
  margin-bottom:1rem;
    }
    @media (prefers-color-scheme: dark) {
        color: var(--nav-text-colour);
      }
}
p a{
  color: var(---light-nav-text-colour);
  &:hover{
      color: var(--light-hover-active-colour);
  }
  @media (prefers-color-scheme: dark) {
    a{
      color: var(--nav-text-colour);
      &:hover{
          color: var(--hover-active-colour);
      }
  }
}
}
.blog_card_bg{
  background-color: var(--light-body-bg-colour);
  padding-top: 0;
  margin-top: -1em;
  @media screen and (max-width: 700px) {
    margin-bottom: 1em;
    padding-bottom: 1em;
  }
  @media (prefers-color-scheme: dark) {
    background-color: var(--body-bg-colour);
  }
}


.blog_hr_primary { 
  border-top: 5px solid var(--light-top-border-colour); 
width: 96%;
margin: auto;
align-items: center;
@media (prefers-color-scheme: dark) {
  border-top: 5px solid var(--top-border-colour);
}
}
.blog_hr_bg{ 
  background-color: var(--light-body-bg-colour);
  @media (prefers-color-scheme: dark) {
    background-color: var(--body-bg-colour);;
    }
}
.blog_hr_secondary { 
  border-top: 5px solid var(--light-top-border-colour); 
width: 70%;
margin: auto;
align-items: center;
margin-top: 1em;
@media (prefers-color-scheme: dark) {
border-top: 5px solid var(--top-border-colour);
}
}    
.blog_span_hr { 
  border-top: 1px solid var(--blog-span-hr-colour); 
max-width: 30%;
margin-top: 1em;
@media (prefers-color-scheme: dark) {
border-top: 1px solid var(--blog-span-hr-colour);
}
}  
.blog_span_hr_border{
  flex-wrap: wrap;
  span{
    flex-wrap: wrap;
  }
max-width: 70%;
}  

.blog_svg{
  fill: var(--light-svg-fill-colour);
  width: 2.5em;
  height: 2.5em;
  margin-left: 2em;
  padding: 0;
  padding-right: auto;
  &:hover {
    fill: var(--light-hover-active-colour);
  }
  @media (prefers-color-scheme: dark) {
    fill: var(--svg-fill-colour);
    &:hover{
    fill: var(--hover-active-colour);
    }
  }
}
.blog_color_primary, span.blog_color_primary { 
  color: var(--light-nav-text-colour); 
  @media screen and (max-width: 700px) {
    margin-left: 1em;
  }
  @media (prefers-color-scheme: dark) {
  color: var(--nav-text-colour);
  }
 }
 .h2{
  margin: auto;
  text-align: center;
  padding-top: .7em;
  padding-bottom: 1em;
  color: var(--light-nav-text-colour);
  @media (prefers-color-scheme: dark) {
    color: var(--nav-text-colour);
    }
}

.blog_link_bg{
  background-color: var(--light-body-bg-colour);
  @media (prefers-color-scheme: dark) {
    background-color: var(--body-bg-colour);
    }
}
  .blog_link_placement{
    display: flex;
    padding-top: auto;
    align-items: center;
    text-align: center;
    margin-top: 1em;
  }
    .blog_links_placement{
      display: flex;
      }

      .blog_post_img_placement{
        display: flex;
        margin-right: 4em;
        
        @media screen and (max-width: 800px){
          margin-left: 1.5em;
          margin-right: 1.5em;
        }
        @media (max-width: 709px) {
          display: block;
    }
    @media (max-width: 480px) {
          display: block;
    }
    }


.blog_post_img{
  width: 30%;
  padding-right: 1em;
  display: flex;
  @media (max-width: 709px) {
        display: block;
        width: 25%;
        margin: auto;
        align-items: center;
        padding-right: 1em;
    }
    @media (max-width: 480px) {
          display: block;
          width: 100%;
          margin: auto;
          align-items: center;
          padding-bottom: 1em;
          padding-right: 0;
      }
}

/*--------7:footer styling------------*/
footer {
    background-color: var(--light-nav-footer-bg-colour);
    padding-left: auto;
    padding-top: 1px;
    padding-bottom: 0;
    margin-bottom: 0;
    padding-right: auto;
    width: 100vw;
    height: auto;
    margin-left: 0;
    bottom: 60px;
    color: var(--footer-link-colour);
    @media screen and (max-width: 800px){
        background-color: var(--light-nav-footer-bg-colour);
        display: grid;
        padding-left: auto;
        padding-top: 1px;
        height: auto;
        padding:auto;
        margin: auto;
        padding-right: auto;
        width: 100%;
        margin-left: 0;
        bottom: 60px;
        margin-top: -1em;
        color: var(--footer-link-colour);
       
       }
       @media (prefers-color-scheme: dark) {
        background-color: var(--nav-footer-bg-colour);
        color: var(--footer-link-colour);
        @media screen and (max-width: 800px){
                background-color: var(--nav-footer-bg-colour);
                color: var(--footer-link-colour);
      }
       }
    
    h1{
        font-weight: 700;
        text-align: center;
      }
      p.desktop{
        font-weight: 700;
        text-align: center;
        @media screen and (max-width: 800px){
          display: none;
          opacity: 0;
     }
        }  
        p.mobile{
          font-weight: 700;
        text-align: center;
        opacity: 0;
        @media screen and (max-width: 800px){
          opacity: 1;
          margin: auto;
          padding: 1em;
          margin-top: 1em;
          margin-bottom: 1em;
     }
        }
        a{
            margin-left: 2em;
            float: right;
            padding-left: .2em;
            padding-right: .2em;
            align-items: center;
            text-align: center;
            color: var(--footer-link-colour);
            @media screen and (max-width: 800px){
                  padding: 1em;
                  margin-top: -2em;
                  margin: auto;
             }
          }       
          .footer_display{
            display: flex;
            margin-left: 1em;
            align-items: center;
            @media screen and (max-width: 800px){
                display: grid;
                background-color: var(--light-nav-footer-bg-colour);
          }
          @media (prefers-color-scheme: dark) {
            background-color: var(--nav-footer-bg-colour);
            @media screen and (max-width: 800px){
                  display: grid;
                  background-color: var(--nav-footer-bg-colour);
                  }
           }
        }
           /*Styling logo*/
  .footer_logo{
    padding: 1vh 1vw;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0;
    margin-right: 0;
    img {
        height: 5rem;
        width: 5rem;
      }
      @media screen and (max-width: 800px){
        margin: auto;
        align-items: center;
        padding: 0%;
      }
  }
}
/*--------8:header image styliing--------*/
img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1920px;
    opacity: 70%;
    z-index: -10;
                          
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
                          
    /* Set up positioning */
    position: fixed;
    background-position: center center;
    
    top: -10;
    left: 0;
    @media screen and (max-width: 1024px) {
        /* Specific to this particular image */ 
        left: 50%;
        margin-left: -512px; /* 50% */
        }
    }
                          
    img.blog_bg {
      /* Set rules to fill background */
      min-height: 20%;
      min-width: 1920px;
      opacity: 70%;
      z-index: -10;
                            
      /* Set up proportionate scaling */
      width: 100%;
      height: auto;
                            
      /* Set up positioning */
      position: fixed;
      top: -70%;
      left: 0;
      @media screen and (max-width: 1024px) {
          /* Specific to this particular image */ 
          left: 50%;
          margin-left: -512px; /* 50% */
          }
      }
      img.blog_post_3_bg {
        /* Set rules to fill background */
        min-height: 20%;
        min-width: 1920px;
        opacity: 70%;
        z-index: -10;
                              
        /* Set up proportionate scaling */
        width: 100%;
        height: auto;
                              
        /* Set up positioning */
        position: fixed;
        top: -10%;
        left: 0;
        @media screen and (max-width: 1024px) {
            /* Specific to this particular image */ 
            left: 50%;
            margin-left: -512px; /* 50% */
            }
        }
        img.blog_post_4_bg {
          /* Set rules to fill background */
          min-height: 20%;
          min-width: 1920px;
          opacity: 70%;
          z-index: -10;
                                
          /* Set up proportionate scaling */
          width: 100%;
          height: auto;
                                
          /* Set up positioning */
          position: fixed;
          top: -130%;
          left: 0;
          @media screen and (max-width: 1024px) {
              /* Specific to this particular image */ 
              left: 50%;
              margin-left: -512px; /* 50% */
              }
          }
          img.blog_post_6_bg {
            /* Set rules to fill background */
            min-height: 20%;
            min-width: 1920px;
            opacity: 70%;
            z-index: -10;
                                  
            /* Set up proportionate scaling */
            width: 100%;
            height: auto;
                                  
            /* Set up positioning */
            position: fixed;
            top: -20%;
            left: 0;
            @media screen and (max-width: 1024px) {
                /* Specific to this particular image */ 
                left: 50%;
                margin-left: -512px; /* 50% */
                }
            }
    img.about_bg {
      /* Set rules to fill background */
      min-height: 100%;
      min-width: 1024px;
      opacity: 75%;
      
      z-index: -10;
    
                            
      /* Set up proportionate scaling */
      width: 100%;
      height: auto;
                            
      /* Set up positioning */
      position: fixed;
      top: -3em;
      left: 0;
      @media screen and (max-width: 1024px) {
        /* Specific to this particular image */
        left: 50%;
        margin-left: -512px; /* 50% */
        }
      }


      /*----------9:404.html styling-------*/
      .error_h1{
        margin: auto;
        text-align: center;
        padding-top: 5em;
        color: var(--light-nav-text-colour);
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
          }
      .error_h2{
        margin: auto;
        text-align: center;
        padding: 5em;
        padding-top: 5em;
        padding-bottom: 10em;
        @media screen and (max-width: 800px){
         margin: auto;
         text-align: center;
         padding-top: 0;
         padding-bottom: 0;
         padding-left: .5em;
         padding-right: .5em;
        
        }
        @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
          }
        }

        /*-----------10:terms.html styling---------*/
        .terms_h1{
            padding-top: 5em;
            margin: auto;
            text-align: center;
            color: var(--light-nav-text-colour);
            @media (prefers-color-scheme: dark) {
                color: var(--nav-text-colour);
            }
        }
        .terms_text{
            margin: auto;
            text-align: center;
            padding-bottom: 2em;
            color: var(--light-nav-text-colour);
            @media (prefers-color-scheme: dark) {
                color: var(--nav-text-colour);
            }
        }
        .terms_section{
            background-color: var(--light-section-4-bg-colour);
            padding-top: .7em;
            @media (prefers-color-scheme: dark) {
                background-color: var(--section-4-bg-colour);
            }
          }
        .terms_text_p{
            color: var(--light-nav-text-colour);
            padding-left: 4em;
            padding-right: 10em;
            @media (prefers-color-scheme: dark) {
                color: var(--nav-text-colour);
          }    
        }
        .terms_a{
          color: var(--light-nav-text-colour);
          &:hover{
            color: var(--light-hover-active-colour);
          }
          @media (prefers-color-scheme: dark) {
            color: var(--nav-text-colour);
            &:hover{
                color: var(--hover-active-colour);
            }
            
        }
        }