body{
   margin: 0;
   font-family: "Saira", sans-serif;
   background-color: rgb(30,30,30);
}

.off-screen-menu {
   background-color: black;
   height: 100vh;
   width: 20%;
   max-width: 450px;
   position: fixed;
   top: 8vh;
   right: -450px;
   display: flex;
   flex-direction: column;
   justify-content: top;
   align-items: center;
   text-align: left;
   font-size: 3rem;
   transition: .3s ease;
   color: white;
   text-decoration: none;
}

.off-screen-menu a{
   color: white;
   text-decoration: none;
   transition: color 0.5s;
}

.off-screen-menu a:hover{
   color: orange;
   text-decoration: underline;
}

.off-screen-menu.active {
   right: 0;
}

.off-screen-menu li {
   margin: 10px;
   list-style: none;
   font-size: 0.5em;
}

nav {
   padding: 1rem;
   display: flex;
   background-color: black;
}

.logo{
   font-weight: 800;
   font-size: 50px;
   color: orange;
}

.ham-menu {
   height: 50px;
   width: 50px;
   margin-left: auto;
   position: relative;
}

.ham-menu span {
   height: 5px;
   width: 100%;
   background-color: orange;
   border-radius: 25px;
   position: absolute;
   top: 75%;
   left: 50%;
   transform: translate(-50%, -50%);
   transition: .3s ease;
}

.ham-menu span:nth-child(1) {
   top: 50%;
}

.ham-menu span:nth-child(3) {
   top: 100%;
}

.ham-menu.active span:nth-child(1) {
   top: 50%;
   transform: translate(-50%, -50%) rotate(45deg);
}

.ham-menu.active span:nth-child(2) {
   opacity: 0;
}

.ham-menu.active span:nth-child(3) {
   top: 50%;
   transform: translate(-50%, -50%) rotate(-45deg);
}

/* Home */

#total_content{
   margin-left: 5%;
   margin-top: 5%;
}

.introduction{
   margin: 0;
   padding: 0;
   color: white;
   display: flex;
   flex-direction: column;
}

#intro_name{
   font-size: 2em;
   font-weight: bold;
   margin: 0;
   padding: 0;
}

#intro_title{
   margin: 0;
   margin-bottom: 7px;
   padding: 0;
   font-style: italic;
}

.intro_info{
   list-style: none;
   margin: 0;
   padding: 0;
}

.about_me{
   color: white;
   padding-top: 20%;
   width: 40vw;
}

#about_title{
   font-size: 2em;
   font-weight: bold;
   padding: 0;
   margin: 5px 0px;
}

#about_text{
   padding: 0;
   margin: 0;
}

#proficiencies{
   display: flex;
   width: 70px;
   list-style: none;
   gap: 10px;
   position: relative;
   left: -40px; 
}

#proficiencies li{
   flex: 1;
   font-size: 0.75em;
   text-align: center;
   padding: 3px;
   border-radius: 4px;
   border: 1px solid orange;
   box-shadow: 5px 5px 5px black;
}


/* Experience */
.jobs{
   list-style: none;
   gap: 50px;
   margin: 10px;
   padding: 10px;
}

.jobobject {
   background-color: rgb(40,40,40);
   border: 1px solid orange;
   border-radius: 10px;
   box-shadow: 5px 5px 5px black;
   padding: 10px;
   margin: 30px;
   color: white;
}

.jobtitle{
   font-size: 2em;
   font-weight: bold;
   padding: 0;
   margin: 0;
   color: orange;
}

.company_and_year{
   font-style: italic;
   padding: 0;
   margin: 0;
}

.joblist{
   padding: 0;
   margin: 0;
}

.joblistitem{
   list-style-type: disc;
   list-style-position: inside;
   padding: 10px;
   margin: 0;
}

/* Education */

.education{

}

.school{
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: rgb(40,40,40);
   color: white;
   padding: 30px 30px;

   border: 1px solid orange;
   border-radius: 10px;
   box-shadow: 10px 10px 5px black;
   margin: 30px;
}

.school_name{
   font-size: 2em;
   font-weight: bold;
   padding: 0;
   margin: 0;
   color: orange;
}

.school_type_and_year{
   font-size: 1.2em;
   font-style: italic;
   margin: 0;
   padding: 0;
}

.school_location{
   margin: 0;
   padding: 0;
}

#pa_cyber_logo{
   image: "Pa_cyber_logo.jpg";
   border-radius: 10px;
   width: 5em;
   height: 5em;
   max-width: 100px;
   max-height: 100px;
}

#wgu_logo{
   image: "WGU_logo.png";
   border-radius: 10px;
   width: 5em;
   height: 5em;
   max-width: 100px;
   max-height: 100px;
}

/* Skills */

.skill_card{
   margin: 0px;
   padding: 0px;
}

.skill_section{
   border: 1px solid orange;
   border-radius: 10px;
   box-shadow: 5px 5px 5px black;
   color: white;
   background-color: rgb(40,40,40);
   margin: 20px;
   padding: 20px;
   list-style-position: inside;
}

.skill_title{
   list-style: none;
   font-size: 2em;
   font-weight: bold;
   color: orange;
}

#project_description{
   list-style: none;
}

/* Contact */

h1{
   color: orange;
   text-align: center;
   font-size: 3em;
   font-weight: 800;
}

#contact_body{
   background-color: rgb(40,40,40);
   border-radius: 10px;
   color: white;
   margin: 10px;
   height: 45em;
   padding: 10px;
}

.contact_info li{
   list-style: none;
   font-weight: 500;
   font-size: 1.5em;
   text-align: center;
   margin: 15px;
}

/* Projects */

.Div_Project{
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: rgb(40,40,40);
   color: white;
   padding: 30px 30px;

   border: 1px solid orange;
   border-radius: 10px;
   box-shadow: 10px 10px 5px black;
   margin: 30px;
}

.Div_Project_Text{

}

.Div_Project_Image{

}

.Project_Name{
   font-size: 2em;
   font-weight: bold;
   padding: 0;
   margin: 0;
   color: orange;
}

.Project_Link{
   text-decoration: none;
   margin-right: 1em;
   color: orange;
   transition: color 1s;
}

.Project_Link:hover{
   color: blue;
   text-decoration: underline; 
}

.Project_Image{
   image: "snake_game.png";
   border-radius: 10px;
   width: 5em;
   height: 5em;
   max-width: 100px;
   max-height: 100px;
}