html {
     scroll-padding-top: 1.3rem;
     /* Required to offset nav bar height when linking to anchor */
 }

 body {
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
     font-family: "Bulmer MT", Serif;
 }

 p {
     letter-spacing: 0.05rem;
 }

 p a {
     color: white;
 }

 .menu-bar {

     width: 100%;
     min-width: 100%;
     top: 0;
     padding: 1% 0% 1% 0%;
     text-align: centre;
     display: inline-block;
     position: sticky;
     /* Keep menu on screen despite scrolling */
     z-index: 10;
     /*ensure contents belows scrolls under the menu */
     white-space: normal;
     background-color: black;
     border-bottom: 1px solid white;
 }

 .screen_res{
     color: white;
     font-size: clamp(1.1rem, 1.6vw, 1.6rem);
     /*1 rem is default font size value */
     padding-left: 3%;
     padding-right: 3%;
 }

 .menu-text a {
     color: white;
     font-size: clamp(1.1rem, 1.6vw, 1.6rem);
     /*1 rem is default font size value */
     padding-left: 3%;
     padding-right: 3%;
     text-decoration: none;
 }

 .menu-text a:hover{
    text-decoration:underline;
 }

 /* Style The Dropdown Button */
 .dropbtn {

     color: white;
     background-color: black;
     border: none;
     cursor: pointer;
     font-family: FontAwesome;
     font-size: 1.2rem;
 }



 /* LARGE SCREENS */
 @media screen and (min-width: 521px) {
     /*Point where menu items are too close or overlap */

     /* Hide drop down menu and show menu text if large screen */
     .dropdown {
         width: max-content;
         display: none;
     }

     .menu-text {
         padding-right: 2%;
         /* text didn't look in the centre */
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .logo_break {
         display:none;
     }

     img.home_background_laptop
     {
        width: 100%;
        padding: 0px;
        margin: 0px;
        border: 0px;
        clear: none;
        display: block;
        /*Removes white space below image */
     }

     img.home_background_mobile
     {
        display:none;
     }

    .home_container {
        display:block;
        position: relative;
        text-align: center;
    }

    div.home_logo_container {
        position: absolute;
        top: 11%;
        right: 5%;
        width: 50%;
        /*Change back to 50% */
        text-align: center;
    }

    img.home_logo {
        width: 30%;
        display: block;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:0px;
        padding: 0px;
    }

     .home_text_laptop {
        display: block;
        font-weight: normal;
        text-align: center;
        color: white;
        font-size: clamp(1.1rem, 1.6vw, 1.6rem);
        padding: 0px;
        margin-top: 0%;
        width:80%;
        margin:auto;
        line-height:1.1;
     }
     
     .home_text_mobile
     {
        display:none;
     }

    .home_logo_text {
        display: inline-block;
        text-align: center;
        margin-left: 0px;
        font-weight: normal;
        font-size: clamp(1rem, 5vw, 100vw);
        color: white;
        margin-top:3%;
    }

     img.page_photo1 {
         display: block;
         float: right;
         margin: 20px;
     }

     img.page_photo1_mobile {
         display: none;
     }

      /* To limit horizontal spread of text on large screens*/
    div.horizontal_limiter {
        margin: auto;
        /*centers the content */
        padding-left:8%;
        padding-right:8%;
      
    }
 }

 /* SMALL SCREENS */
 @media screen and (max-width: 520px) {
     /*Point where menu items are too close or overlap */

     /* Hide menu text and show drop down if small screen */
     .dropdown {
         display: inline;
         width: max-content;
     }

     .menu-text {
         display: none;
     }

     .logo_break {
         display: block;
     }

     .home_container{
        display:block;
        position: relative;
        text-align: center;
        width:100%;
        min-height:650px;
     }


     img.home_background_laptop
     {
        display:none;
     }

     img.home_background_mobile
     {
        width: 100%;
        padding: 0px;
        margin: 0px;
        border: 0px;
        clear: none;
        display: block;
        /*Removes white space below image */
     }
     
    div.home_logo_container {
        position: absolute;
        top: 4%;
        width:100%; /* If 100%, centered child elements will be centered in the page */
        text-align: center;
    }

     img.home_logo {
        width: 35%;
        display: inline-block;
        margin: 0px;
        padding: 0px;
     }

  .home_logo_text {
        padding:0px;
        margin: 4% 0 0 0;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin-left: 0px;
        font-weight: normal;
        font-size: clamp(1.5rem, 12vw, 100vw);
        color: white;
    }

     .home_text_mobile {
        display: block;
        font-weight: normal;
        color: white;
        font-size: clamp(1rem, 7vw, 100vw);
        line-height:1.3;
        position:absolute;
        bottom:18%;
        right:5%;
        width:35%;
        text-align: right;
        /*border:solid 1px yellow;*/
     }

     .home_text_laptop
     {
        display:none;
     }


  

     img.page_photo1 {
         display: none;
     }

     img.page_photo1_mobile {
         display: block;
         width: 70%;
         /* 50%; clamp( 200px, 50%, 450px);*/
       
         margin: 20px;
     }
    
     /* To limit horizontal spread of text on large screens*/
    div.horizontal_limiter {
        margin: auto;
        /*centers the content */
        padding-left:0%;
        padding-right:0%;
        
    }

 }

 /* ================= */





 

 /* Vary sizes on large screen on each page */
 img.about_photo1 {
     /* width: 50%; */
     width: clamp( 200px, 50%, 600px);
 }

 img.about_photo5{
     /* width: 50%; */
     width: clamp( 200px, 25%, 300px);
 }

 img.contact_photo1 {
     width: 40%;
     /* 50%; clamp( 200px, 50%, 450px);*/
 }

 /* Dropdown Content (Hidden by Default) */
 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     z-index: 1;
 }

 /* Links inside the dropdown */
 .dropdown-content a {
     color: black;
     padding: 8px;
     text-decoration: none;
     display: block;
     font-size: 1.2rem;
 }

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

 /* 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: #f1f1f1;
     color: black;
 }






 /* Attributes shared on all pages (exc home page) */
 div.page_container {
     position: relative;
     color: white;
     background-size: 100%;
     width: 90%;
     margin: 0px;
     padding: 5% 5% 5% 5%;
     clear: none;
     border-top: solid 1px white;
     min-height: max-content;
 }

 /* Page specific container attributes */
 div.about_container {
     background-image: url('../images/bk_green.gif');
     background-color: #839d97;
 }

 div.portfolio_container {
     background-image: url('../images/bk_brown.gif');
     background-color: #839d97;
 }

 div.contact_container {
     background-image: url('../images/bk_blue.gif');
     background-color: #4c9ab6;
 }



 /* To limit horizontal spread of text on large screens*/
 div.horizontal_limiter_portfolio {
     margin: auto;
     /*centers the content */
     max-width: 730px;

 }

 h2 {
     font-weight: normal;
     text-align: left;
     color: white;
     font-size: clamp(4rem, 7vw, 7rem);
     padding: 0px;
     margin: 0px;
 }

 p.intro_text {
     font-size: clamp(1.6rem, 3vw, 3rem);
     letter-spacing: 0rem;
       
 }

.portfolio_intro_text {
     font-size: clamp(1.6rem, 3vw, 3rem);
     letter-spacing: 0rem;
     margin-top:0px;
     font-weight:normal;
 }

 p.about_text {
     font-size: clamp(1.1rem, 1.6vw, 1.6rem);
     line-height:1.3;
     /*margin-bottom: 5%;*/
 }
 
 p.portfolio_text {
     font-size: clamp(1.1rem, 1.6vw, 1.6rem);
     line-height:1.3;
     /*margin-bottom: 5%;*/
 }

 p.contact_text {
     font-size: clamp(1.1rem, 2vw, 1.6rem);
     line-height:1.3;
     margin: 15px 0px 0px 0px;
 }

 p.contact_text:last-child {
     margin-bottom: 6%;
 }

 .text_icons {
     font-family: FontAwesome;
     margin-right: 5px;
 }

 div.center_icons {
     margin: auto;
     /*auto centers the content */
     border: solid 0px black;
     text-align: center;
 }

 div.portfolio_icon_container {
     text-align: center;
     display: inline-block;
     border: solid 0px red;
     width: 150px;
     margin-right: 15px;
     vertical-align: top;
 }

 div.portfolio_icon_container:last-child {
     margin-right: 0px;

 }

 img.portfolio_icon {
     width: 150px;
     border: solid 2px #bfae99;
 }

 p.portfolio_icon_text {
     /*font-size: 1.1rem;*/
     font-size: clamp(1.1rem, 1.3vw, 1.3rem);
     color: white;
     border: solid 0px yellow;


 }


 div.small_logo_container {
     margin: auto;
     /*auto centers the content */
     padding-top: 2%;
     text-align: center;
     display: block;
     border: solid 0px red;
     width: max-content;
 }

 img.small_logo {
     width: 50px;
 }

 .small_logo_text {
     font-size: 1.1rem;
     color: white;
     border: solid 0px yellow;
     margin: 10px 0px 0px 0px;
 }

 .small_logo_text a{
    text-decoration:none;
 }

 img.portfolio_large {
     /* width:clamp(350px, 50%, 1000px);  */
     object-fit: cover;
     /* Crop rather than resize the image to dimensions */
     width: 345px;
     height: 345px;
     border: solid 2px #bfae99;
     margin-bottom: 10px;
     margin-right: 10px;

 }

 a.port_img_link {
     text-decoration: none;
 }