* {
     touch-action: manipulation;
}
 ::selection {
     background: rgba(105, 0, 30, 0.99);
}
 body {
     background-color: rgb(0, 0, 0);
     overflow-y: scroll;
     text-align: center;
     vertical-align: middle;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 .Button_Projects_Container{
     display: flex;
     gap: 30px;
     flex-direction: row;
     align-items: center;
    /* Aligns text vertically */
     justify-content: center;
     flex-wrap: wrap;
     text-align: center;
     margin-top: 10px;
}
 .Button_Projects{
     color: #ffffff;
     outline: none;
     background-color: rgba(119, 20, 20, 0);
     border-color: #ffffff;
     border-radius: 2px;
     text-align: center;
     cursor: pointer;
     font-size: 18px;
     width: 210px;
     height: 30px;
     word-break: break-all;
     overflow-wrap: break-word;
     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;
    */
     font-family: Calibri, Candara, Segoe, Optima, Arial, sans-serif;
     color: rgb(255, 255, 255);
     font-weight: normal;
}
.intro_founder{
     margin-top: 1px;
     margin-bottom: 1px;
     font-size: 24px;
     font-family: Calibri, Candara, Segoe, Optima, Arial, sans-serif;
     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: rgb(217, 159, 0);
}
 .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 {
     position: relative;
     width: auto;
     height: 25px;
     bottom: 0 !important;
     background-color: transparent;
     text-align: center;
     display: grid;
     place-content: center;
     font-size: 18px;
     color: rgb(255, 255, 255);
     font-family: Calibri, Candara, Segoe, Optima, Arial, sans-serif;
     display: block;
}
 .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%;
}
 .Image_Fill{
     width: 100%;
     height: 100%;
     -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;
    /* Stacks elements vertically */
     align-items: center;
    /* Aligns text vertically */
     justify-content: center;
     align-content: center;
    /* Modern CSS: Vertically centers block elements */
     flex-wrap: wrap;
     font-family: Calibri, Candara, Segoe, Optima, Arial, sans-serif;
     width: 50%;
}
 .about_me{
     width: 75%;
     text-align: center;
     font-size: 18px;
     color: rgb(255, 255, 255);
}
 .SubHeader{
     font-size: 24px;
     color: rgb(255, 255, 255);
     text-decoration: none;
     font-weight: normal;
     border-bottom: 4px solid #69001E;
     margin-bottom: 5px;
}
 .General_Header_1{
     font-size: 20px;
     color: rgb(255, 255, 255);
     text-decoration: none;
     font-weight: normal;
     word-break: break-all;
     overflow-wrap: break-word;
     max-width: 100%;
     box-sizing: border-box;
     overflow: hidden;
}
 .General_Header_2{
     font-size: 16px;
     color: rgb(255, 255, 255);
     text-decoration: none;
     font-weight: normal;
     word-break: break-all;
     overflow-wrap: break-word;
     overflow-wrap: break-word;
     max-width: 100%;
     box-sizing: border-box;
     overflow: hidden;
}
 .General_Header_1_L{
     font-size: 20px;
     color: rgb(255, 255, 255);
     text-decoration: none;
     font-weight: normal;
     text-align: left;
}
 .General_Header_2_L{
     font-size: 16px;
     color: rgb(255, 255, 255);
     text-decoration: none;
     font-weight: normal;
     text-align: left;
}
 .Product_Logo{
     cursor: pointer;
     width: 100px;
     height: 100px;
     -webkit-user-drag: none;
}
 .Product_Logo_Large{
     cursor: pointer;
     width: 150px;
     height: 150px;
     -webkit-user-drag: none;
}
 .SubProduct_Logo{
     cursor: pointer;
     width: 40px;
     height: 40px;
     background-color: rgba(36, 36, 36, 1);
     -webkit-user-drag: none;
}
 .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: none;
     width: 100%;
     align-content: center;
     vertical-align: middle;
}
 .Skills_H1{
     font-size: 20px;
     color: rgb(255, 255, 255);
     text-decoration: none;
     word-break: break-all;
     overflow-wrap: break-word;
     overflow-wrap: break-word;
     max-width: 100%;
     box-sizing: border-box;
     overflow: hidden;
}
 .Skills_H2{
     font-size: 18px;
     color: rgb(255, 255, 255);
     text-decoration: none;
     word-break: break-all;
     overflow-wrap: break-word;
     overflow-wrap: break-word;
     max-width: 100%;
     box-sizing: border-box;
     overflow: hidden;
}
 .Skills_H2_L{
     font-size: 18px;
     color: rgb(255, 255, 255);
     float: left;
}
 .Skills_H2_R{
     font-size: 18px;
     color: rgb(255, 255, 255);
     float: right;
}
 .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: rgb(53, 53, 53, 0);
     width: 100%;
}
 .top_header_logo{
     -webkit-user-drag: none;
     width: 190px;
     height: 45px;
     float: none;
     cursor: pointer;
}
 .sliced_div{
     border-top: 4px solid #69001E;
     border-bottom: 4px solid #69001E;
}
 .sliced_div_F{
     border-bottom: 4px solid #69001E;
}
 @media (max-width: 1200px) {
     .about_me{
         font-size: 14px;
    }
     .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;
    }
     .Button_Projects{
         color: #ffffff;
         outline: none;
         background-color: rgba(119, 20, 20, 0);
         border-color: #ffffff;
         border-radius: 2px;
         cursor: pointer;
         font-size: 12px;
         width: 100px;
         height: 35px;
    }
     body {
         background-color: rgb(0, 0, 0);
         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;
         color: rgb(255, 255, 255);
         float: left;
    }
     .Skills_H2_R{
         font-size: 12px;
         color: rgb(255, 255, 255);
         float: right;
    }
     .container{
         width: 100%;
    }
     .top_header_logo{
         /*width: 110px;
         height: 25px;*/
         width: 190px;
         height: 45px;
    }
}
 .Skill_Style{
     background-color: #69001E;
     border: 1px solid rgb(166, 166, 166);
     margin-bottom: 5px;
}
/* The typing effect */
 @keyframes typing {
     from {
         width: 0ch 
    }
     to {
         width: 40ch 
    }
}
/* The typewriter cursor effect */
 @keyframes blink-caret {
     from, to {
         border-color: transparent 
    }
     50% {
         border-color: #ffffff;
    }
}
/* 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( #f5e042, #f5e042, #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);
    }
}