/*
Dimensions: 
Footer + Header = 90px total (Dynamically loaded).
*/
* {
     touch-action: manipulation;
}
 ::selection {
     background: rgba(255, 232, 0, 0.322);
}
 body { 
     background-color: rgba(20, 20, 0, 1);
     overflow-y: scroll;
     text-align: center;
     vertical-align: middle;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     /*font-family: Arial, Helvetica*/
     font-family: Calibri, Candara, Segoe, Optima, sans-serif;
     color: rgb(255, 255, 255);
     margin: 0;
     padding: 0;
     min-height: calc(100dvh + 90px);
     text-decoration: none;
}
.Inner_Sub_Page{
     width: 100%;
}
.Central_Background{
     position: fixed; 
     z-index: -1; 
     top: 0; 
     background-color: rgba(16, 16, 0, 1); 
     width: 80vw; 
     height: 100dvh;
     border-left: 4px solid #000000;
     border-right: 4px solid #000000;
}
.Blog{
     font-size: 14px;
     width: 100%;
     display: block;
     text-align: center;
     margin: ;
}
 .Button_Projects_Container{
     display: flex;
     gap: 30px;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     text-align: center;
     margin-top: 10px;
     margin-bottom: 15px;
     width: 60%;
}
.Button_Projects_Container_SubPage{
     display: flex;
     gap: 30px;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     text-align: center;
     margin-top: 10px;
     margin-bottom: 15px;
}
.Button_Projects_Container_Parent_Div{
     width: 100%;
     display: flex;
     gap: 30px;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     text-align: center;
     margin-top: 10px;
}
 .Button_Projects{
     color: #000000;
     background-color: #FFCC00;
     border-color: #FFCC20;
     outline: none;
     cursor: pointer;
     border-radius: 2px;
     text-align: center;
     font-size: 18px;
     width: 210px;
     height: 30px;
     /*word-break: break-all; */
     overflow-wrap: break-word;
     max-width: 100%;
     box-sizing: border-box;
     overflow: hidden;
}
 .intro{
     margin-top: 1px;
     margin-bottom: 1px;
     font-size: 24px;
    /*overflow: hidden;
     Ensures the content is not revealed until the animation border-right: .1em solid #ffffff;
     white-space: nowrap;
     margin: 0 auto;
     animation: typing 2s steps(40), blink-caret .75s step-end infinite;
    */
     color: rgb(255, 255, 255);
     font-weight: normal;
}
.intro_founder{
     margin-top: 1px;
     margin-bottom: 1px;
     font-size: 24px;
     color: rgb(255, 255, 255);
     font-weight: normal;
}
.intro_founder_container{ 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     margin-top: 15px;
     font-weight: bold;
     width: 250px; 
     height: 35px; 
     background-color: #FFCC00;
}
.skill_div_container{
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}
.skill_div{
     width: 100%;
}
 .Badges{
     padding-right: 0%;
     color: #ffffff;
     background-color: rgba(119, 20, 20, 0);
     border-color: #ffffff;
     border-radius: 1%;
     text-align: center;
     position: relative;
}
 .Button_Text_Alignment{
     text-align: center;
}
.Footer_div{
     display: flex; 
     height: 100%;
     align-items: center; 
     justify-content: center;
     width: 80vw;
}
.Footer_div_column{
     flex: 0 0 50%;
     max-width: 50%;
     text-align: right;
     margin-bottom: 15px;
     margin-top: 15px;
}
 .landing_logo{
     vertical-align: center;
     -webkit-user-drag: none;
     width: 170px;
     height: 170px;
     margin-top: 25px;
     margin-bottom: 25px;
     cursor: pointer;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #111;
    /* Dark background enhances the glow */
     border-radius: 16px;
     overflow: hidden;
    /* Clips the sharp corners of the rotating gradient */
}
 .contact_buttons_container{
     display: flex;
     gap: 30px;
     flex-direction: row;
     align-items: center;
    /* Aligns text vertically */
     justify-content: center;
     flex-wrap: wrap;
     text-align: center;
}
 .Home_Screen_Div{
     width: 100%;
     height: 100%;
     align-items: center;
     justify-content: center;
     display: flex;
}
 .Image_Fill{
     width: 50%;
     -webkit-user-drag: none;
     cursor: pointer;
}
 .contact_buttons{
     width: 50px;
     height: 50px;
     cursor: pointer;
     -webkit-user-drag: none;
}
 .container{
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     align-content: center;
     flex-wrap: wrap;
     width: 80vw;
     margin-bottom: 10px;
}
.container_paragraph{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     align-content: center;
     flex-wrap: wrap;
     width: 60%;
     margin-bottom: 10px;
}
 .about_me{
     width: 75%;
     text-align: center;
     font-size: 18px;
     color: rgb(255, 255, 255);
}
 .SubHeader{
     font-size: 24px;
     color: rgb(255, 255, 255);
     font-weight: normal;
     border-bottom: 4px solid #FFCC00;
     margin-bottom: 5px;
     width: 100%;
}
.Header_1{
     font-size: 18px;
     color: rgb(255, 255, 255);
     font-weight: normal;
     width: 100%;
}
 .Header_2{
     font-size: 14px;
     color: rgb(255, 255, 255);
     font-weight: normal;
     width: 100%;
}
 .Paragraph{
     text-align: left;
     color: rgb(255, 255, 255);
     width: 100%;
}
.Paragraph_Image{
     width: 50%;
     cursor: pointer;
     -webkit-user-drag: none;
      margin-bottom: 5px;
}
 .General_Header_1{
     font-size: 20px;
     color: rgb(255, 255, 255);
     font-weight: normal;
     /*word-break: break-all;*/
     overflow-wrap: break-word;
     max-width: 100%;
     box-sizing: border-box;
     overflow: hidden;
     margin: 5px;
     width: 100%;
}
 .General_Header_2{
     font-size: 16px;
     color: rgb(255, 255, 255);
     font-weight: normal;
     /*word-break: break-all;*/
     overflow-wrap: break-word;
     overflow-wrap: break-word;
     max-width: 100%;
     box-sizing: border-box;
     overflow: hidden;
     margin: 5px;
     width: 100%;
}
 .General_Header_1_L{
     font-size: 20px;
     color: rgb(255, 255, 255);
     font-weight: normal;
     text-align: left;
}
 .General_Header_2_L{
     font-size: 16px;
     color: rgb(255, 255, 255);
     font-weight: normal;
     text-align: left;
}
 .Product_Logo{
     cursor: pointer;
     width: 100px;
     height: 100px;
     -webkit-user-drag: none;
}
 .Product_Logo_Large{
     cursor: pointer;
     width: 20%;
     -webkit-user-drag: none;
      margin-bottom: 5px;
}
 .SubProduct_Logo{
     cursor: pointer;
     width: 5%;
     background-color: rgba(36, 36, 36, 0);
     -webkit-user-drag: none;
}
.Founder_Image_Frame{
     cursor: pointer;
     width: 20%;
     -webkit-user-drag: none;
     border: 4px solid #FFCC00;
}
 .Body_Logo{
     cursor: pointer;
     width: 150px;
     height: 150px;
     -webkit-user-drag: none;
}
 .Employment_Logo{
     cursor: pointer;
     width: 100px;
     height: 100px;
     -webkit-user-drag: none;
}
 .Education_Logo{
     cursor: pointer;
     width: 100px;
     height: 100px;
     -webkit-user-drag: none;
}
 .Education_Logo_CWU{
     cursor: pointer;
     width: 150px;
     height: 70px;
     -webkit-user-drag: none;
}
 .Certification_Logo{
     cursor: pointer;
     width: 100px;
     height: 100px;
     -webkit-user-drag: none;
}
 .Sub_Head_Page{
     display: flex;
     width: 100%;
     justify-content: center;
     flex-direction: column;
     align-items: center;
}
.Sub_Head_Page_Hidden{
     display: none;
     width: 100%;
     justify-content: center;
     flex-direction: column;
     align-items: center;
}
 .Skills_H1{
     font-size: 20px;
     word-break: break-all;
     overflow-wrap: break-word;
     color: rgb(255, 255, 255);
}
 .Skills_H2{
     font-size: 18px;
     word-break: break-all;
     overflow-wrap: break-word;
     color: rgb(255, 255, 255);
}
 .Skills_H2_L{
     font-size: 18px;
     float: left;
     color: rgb(0, 0, 0);
}
 .Skills_H2_R{
     font-size: 18px;
     float: right;
     color: rgb(0, 0, 0);
}
 .Project_Button_Style{
     border-radius: 50%;
     cursor: pointer;
     -webkit-user-drag: none;
     width: 100px;
     height: 100px;
}
 .Project_Button_Style:hover{
     box-shadow: 0px 0px 5px rgb(255, 255, 255);
}
 .Horizontal_Line{
     width: 100%;
     display: none;
}
 .Top_Header{
     background-color: rgba(0, 0, 0, 1);
     width: 100%;
     height: 45px;
     /*height: 45px;*/
}
 .top_header_logo{
     -webkit-user-drag: none;
     width: 190px;
     height: 45px;
     float: none;
     cursor: pointer;
}
.Bottom_Footer{
     background-color: rgb(0, 0, 0); 
     width: 100%; 
     display: flex;
     justify-content: center;
     /*height: 45px;*/
     font-size: 14px;
}
.Footer_Filler{
     width: 100%; 
     flex: 1 0 auto;
}
.Sliced_Div{
     border-top: 4px solid #FFCC00;
     border-bottom: 4px solid #FFCC00;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     width: 100%;
}
 .PDF_Embed{
     width: 60%;
     /*height: 800px;*/
     margin-bottom: 10px;
}
 .sliced_div_container{
     align-items: center;
     justify-content: center;
     flex-direction: column;
     display: flex;
}
 .sliced_div_F{
     border-bottom: 4px solid #FFCC00;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     width: 100%;
}
.Complete{
     color: rgb(0, 207, 21);
}
.In_Progress{
     color: rgb(232, 148, 2);
}
.Download_Link{
     color: rgb(74, 155, 255);
     cursor: pointer;
     text-decoration: none;
}
.Footer_Links{
     flex-direction: row;
     flex-wrap: wrap;
     display: flex;
     margin: 0;
     padding: 0;
}
.Footer_Copyright_Text{
     text-align: left;
     margin: 0;
}
.Footer_Link_Starter{
     color: rgb(74, 155, 255);
     cursor: pointer;
     text-align: right;
     text-decoration: none;
}
.Footer_Link{
     color: rgb(74, 155, 255);
     cursor: pointer;
     text-align: right;
     padding-left: 1rem;
     text-decoration: none;
}

 @media (max-width: 1200px) {
     .Paragraph_Image{
          width: 95%;
     }
      .SubProduct_Logo{
           width: 10%;
      }
      .Founder_Image_Frame{
           width: 50%;
      }
      .Product_Logo_Large{
           width: 50%;
      }
      .Image_Fill{
          width: 100%;
     }
      .container_paragraph{
           width: 96%;
      }
     
      .Footer_Link{
           padding-left: .6rem;
      }
      .Bottom_Footer{
           font-size: 11px;
      }
      .Footer_div_column {
           max-width: 100%;
           flex: 0 0 0%;
      }
      .Central_Background{
           width: 100vw;
      }
     .container_paragraph{
          width: 95%
     }
      .Footer_div{
           width: 100vw;
           flex-direction: column;
      }
     .about_me{
         font-size: 14px;
    }
      .Blog{
         font-size: 14px;
         width: 100%;
    }
      .PDF_Embed{
         width: 97%;
         /*height: 500px;*/
    }
     .Button_Projects_Container{
         display: flex;
         gap: 12px;
         flex-direction: row;
         align-items: center;
        /* Aligns text vertically */
         justify-content: center;
         flex-wrap: wrap;
         margin-top: 5px;
         width: 100%;
    }
     .Button_Projects{
         border-radius: 2px;
         font-size: 12px;
         width: 100px;
         height: 35px;
    }
     body {
         overflow-y: scroll;
         text-align: center;
         vertical-align: middle;
    }
     .intro{
         font-size: 22px;
    }
     
    .intro_founder{
         font-size: 22px;
    }
     .landing_logo{
         /*
         width: 85px;
         height: 85px;*/
         width: 170px;
         height: 170px;
         cursor: pointer;
         -webkit-user-drag: none;
    }
     .contact_buttons_container{
         display: flex;
         gap: 12px;
         flex-direction: row;
         align-items: center;
        /* Aligns text vertically */
         justify-content: center;
         flex-wrap: wrap;
    }
     .contact_buttons{
         width: 40px;
         height: 40px;
         cursor: pointer;
         -webkit-user-drag: none;
    }
     .Skills_H2_L{
         font-size: 12px;
         float: left;
          font-weight: bold;
    }
     .Skills_H2_R{
         font-size: 12px;
         float: right;
         font-weight: bold;
    }
     .container{
         width: 100%;
    }
     .top_header_logo{
         /*width: 110px;
         height: 25px;*/
         width: 190px;
         height: 45px;
    }
}
 .Skill_Style{
     background-color: #FFCC00;
     margin-bottom: 5px;
}
/* Keeps the image on top of the background animations */
 .landing_logo img {
     position: relative;
     width: calc(100% - 6px);
    /* Creates space for a 3px border */
     height: calc(100% - 6px);
     object-fit: cover;
     border-radius: 13px;
    /* Slightly less than to fit perfectly */
     z-index: 2;
}
/* The underlying rotating gradient (Creates the sharp border) */
 .landing_logo::after {
     content: '';
     position: absolute;
     width: 150%;
    /* Oversized to ensure corners are fully covered while rotating */
     height: 150%;
     background: conic-gradient( #FFCC00, #FFCC00, #f5a142, #f5a142 );
     animation: rotateGlow 4s linear infinite;
     z-index: 1;
}
/* The blurred duplicate (Creates the soft outer atmospheric glow) */
 .landing_logo::before {
     content: '';
     position: absolute;
     width: 150%;
     height: 150%;
     background: conic-gradient( #ff007f, #7f00ff, #00f0ff, #ff007f );
     animation: rotateGlow 4s linear infinite;
     filter: blur(25px);
    /* Adjust this value to make the glow wider or softer */
     opacity: 0.8;
    /* Tones down the glow intensity */
     z-index: 0;
}
/* Keyframe animation to spin the gradient */
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }

/*CookieBot Div Styling*/
a#CybotCookiebotDialogPoweredbyCybot, div#CybotCookiebotDialogPoweredByText {
  display: none;
}

/* Branding on the Privacy trigger */
#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo {
    display: none;
}
#CybotCookiebotDialogPoweredbyImage{
     height: auto;
     width: 100%;
     max-height: 1000em;
}
.CookieDeclarationLastUpdated{
     margin: 0;
}
.CookieDeclarationTypeDescription{
     margin: 0;
}
.CookieDeclarationTable{
     margin: 0;
}
.CookieDeclarationType{
     margin: 0;
}
.CookieDeclarationDialogText{
     margin: 0;
}
.CookieDeclarationIntro{
     margin: 0;
}
.CookieDeclarationUserStatusPanel{
     margin: 0;
}
.CookieDeclarationUserStatusLabel{
     margin: 0;
}
.CookieDeclarationUserStatusLabelOff{
     margin: 0;
}
.CookieDeclarationUserStatusLabelOffDoNotSell{
     margin: 0;
}
.CookieDeclarationUserStatusLabelMulti{
     margin: 0;
}
.CookieDeclarationUserStatusLabelMultiSettingsPref{
     margin: 0;
}
.CookieDeclarationConsentIdAndDate{
     margin: 0;
}
.CookieDeclarationUserStatusLabelOn{
     margin: 0;
}
.CookieDeclarationChangeConsent{
     margin: 0;
}
.CookieDeclarationUserStatusLabelWithdraw{
     margin: 0;
}
.CookieDeclarationDoNotSell{
     margin: 0;
}
.CookieDeclarationChangeConsentDoNotSell{
     margin: 0;
}