/* Typography */
body {
    zoom:0.9;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
  }
  
 /* Skills classes */



/* Dark mode base styles */
body.dark-mode {
  background-color: #08181b;
  color: #f0f0f0;
}

body.dark-mode a {
  color: #fcfcfc;
}

body.dark-mode #menu a {
  color: #ffffff;
}

body.dark-mode #menu {
  background-color: #000000;
}


body.dark-mode .Namn {
  color: #ffffff !important;
}
body.dark-mode header,
body.dark-mode footer {
  background-color: #08181b;
}



body.dark-mode #skills h2 {
  color: #fcfcfc;
}

body.dark-mode #graphicdesign h2 {
  color: #fcfcfc;
}

body.dark-mode #photography h2 {
  color: #fcfcfc;
}

/* Toggle Switch Styles */




.toggle-switch {
  display:block;
  margin:auto;
  
}

.toggle-switch-mobile{
  display:none;
}

.toggle-switch label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-switch .slider {
  width: 50px;
  height: 24px;
  background-color: #ccc;
  border-radius: 34px;
  position: relative;
  transition: 0.4s;
}

.toggle-switch .slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

.toggle-switch input:checked + .slider {
  background-color: #d89505;
}

.toggle-switch input:checked + .slider::before {
  transform: translateX(26px);
}


























 

  .skill { 
    background: #fff;
    color:c;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #dcd9d9;
  }


  /* Body classes */
  body.active {
    overflow: hidden;
    z-index: -1;
  }
  
  .no-js #experience-timeline > div {
    background: #fff;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #dcd9d9;
  }
  
  .no-js #experience-timeline > div h3 {
    font-size: 1.5em;
    font-weight: 300;
    color: #374054;
    display: inline-block;
    margin: 0;
  }
  
  .no-js #experience-timeline > div h4 {
    font-size: 1.2em;
    font-weight: 300;
    color: #7e8890;
    margin: 0 0 15px 0;
  }
  
  .no-js #experience-timeline > div p {
    color: #74808a;
    font-size: 0.9em;
    margin: 0;
  }
  
   /*Header styles */ 
  @keyframes dropHeader {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  header {
    position:fixed ;
    top: 0;
    left: 0;
    right: 0;
    text-align: left;
    z-index: 50;
    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 0.55s;
  }
  
  header ul {
    display: flex;
    align-items: center;  
    background: hsl(0, 0%, 95%);
    text-align: left;
    margin: 0;
    width: 100%;
    padding-inline-start: 15px;
    list-style-type: none;

  }
  
  header li {
    padding:15px;
    
  }

  .toggle-switch-li{
    margin-left:auto;
  }

  
  
  header a {
    display: block;
    color: #6D6262;
    padding: 1px;
    font-size: 20px; 
    text-decoration:none;
  }
  
  header a:hover {
    color: #ffffff;
    text-decoration:none;
    background: #FFA800;
    border-radius: 1px;
  }
  

  /* Header Mobile Styles */
  /* ... (Mobile menu styles) ... */
  
  /* Footer styles */
  footer {
    padding-bottom:40px;
  }
  
  .copyright {
    padding-top: 20px;
  }
  
  .copyright p {
    margin: 0;
    color: #74808a;
  }
  
  /* Top button styles */
  .top {
    text-align: center;
  }
  
  .top span {
    cursor: pointer;
    display: block;
    margin: 15px auto 0 auto;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 3px solid #b9bfc4;
    text-align: center;
  }
  
  .top i {
    color: #74808a;
  }
  
  /* Social media links */
  .social {
    text-align: right;
  }
  
  .social ul {
    margin: 5px 0 0 0;
    padding: 0;
  }
  
  .social li {
    display: inline-block;
    font-size: 1.25em;
    list-style: none;
  }
  
  .social a {
    display: block;
    color: #74808a;
    padding: 10px;
  }
  
  .social a:hover {
    color: #3498db;
  }

 /* About */
.about{
  text-align: left;
  font-size: 0.85em;
  font-weight: 30;

}


.about-headline{
  font-size: 50px;
}


.about-titles h1{
  color:orange;
  margin-bottom:2px;
  font-size: 3em;
}



.about-titles h2{
  color:orange;
  font-size: 1em;
  text-align: left;
  padding:0;
  margin:-5px;
}
  
  /* Buttons */
  .btn-rounded-white {
    display: inline-block;
    color: #000000;
    padding: 15px 25px;
    border: 3px solid #000000;
    border-radius: 30px;
    transition: 0.5s ease all;
  }
  
  .btn-rounded-white:hover {
    color: #3498db;
    background: #fff;
    text-decoration: none;
  }
  
  /* Box Shadows */
  .shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  
  .shadow-large {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.15);
  }
  


#mobile-menu {
  display:none;
}

  
  /* Headings */
  .heading {
    position: relative;
    display: inline-block;
    font-size: 2em;
    font-weight: 300;
    margin: 0 0 30px 0;
    
  }

  .heading h2 {
    color:#029aff;
    
  }
  
  




  .fullbody{

    background-color: #000000;
    overflow:hidden:
  }



  /* Background */
  .background-alt {
    background: #000000;
  }
  
  #lead {


  }

  
  
  #lead-content {
    display: flex; /* Use flexbox */
    z-index: 10;
    align-items: center; /* Vertically center the content */
    justify-content: center;
    padding: 1em;
    height:auto;
    margin-bottom: 30px;

}


/* Section Split */

.sectionsplit {

  height: 4px;
  background-color:rgba(61, 61, 61, 0.315);
  width:100%;
}


.lead-text {
    text-align: left; /* Align text to the left */
    max-width: 600px;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    margin-top:5%
    margin-bottom: 5%;
}

.lead-image {
    text-align: right; /* Align image to the right */
    margin-top:50;
    z-index: 1;
}

.lead-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto; /* Center the image horizontally */
    margin-right: auto; /* Center the image horizontally */
    margin-top: 50px;
    margin-bottom: 50px;
    max-width:500px;
    margin-left:75px;
}


#lead-content h1 {
    color: #000000;
    font-weight: 900;
    font-size: 3em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 0.9em;
    
}

#lead-content h2 {
    color: #a0cfee;
    font-weight: 700;
    font-size: 2em;
    color: orange;
    margin-top:10px;
}

#lead-content h3 {
  margin-top: -30px;
  font-weight: 400;
  font-size: 1.25em;
  color: rgb(196, 126, 22);
  
  
}

#lead-content p {
  font-size: 1.5em;
  
  
}


.civil {
  background-color: rgb(8, 8, 8);
  width: max-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* To align left */
  height: max-content;
  border-radius: 5px;


}


.download {
  display:flex;
  justify-content:center;
  text-align: justify;
  height:40px;
  padding:20px;

}

.download a{

  padding-left: 10px;
  padding-right: 20px;
  color:rgb(0, 0, 0);
  
  text-decoration: underline;
}

.download a:hover{
  color:rgb(219, 113, 52);
  text-d


}

  
#lead-down {
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    bottom: 15px;
    color: #fff;
    margin:
}

#lead-down span {
    cursor: pointer;
    display: block;
    margin: 0 auto;

}





/* About Section */

#about {
    border-bottom: 1px solid #dcd9d9;
    text-align: center;
  }
  
  #about h2 {
    color: #374054;
  }
  
  #about p {
    color: #74808a;
  }
  
  /* Photography Section */
  #photography,
  #graphicdesign {
    display:flex;
    border-bottom: 1px solid #dcd9d9;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 50px;
    

  }
  
  #photography h2,
  #graphicdesign h2 {
    color: #000000d6;
    text-decoration: none; /* Remove underline for h2 */

  }

  .photography {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 50px;
    max-width: 1400px ;
  }

  .photography-image {
    flex: 1 0 48%; /* Assuming you want a bit of margin between images */
    margin: 1%;

  }

  .photography-image img {
    width: 100%;
    height: auto;
    display: block;
    
  }


  /* Projects Section */




  .project-heading {
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .projects {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: #312b2b2c;
  

    
    

  }

  
  .project-image {
    flex: 1; 
    order: 1; 
    height: auto;
    overflow: hidden;

  }

  .project-image img {
    max-width: 100%; 
    height: auto; 
  }
  
  
  .no-image .project-info {
    position: relative;
    margin: 0;
    padding: 30px 15px;
    transform: none;
  }
  
  #more-projects {
    display: none;
  }





.project-boxes {
    display: flex;
    flex-grow: inherit;
    gap: 20px; 
    justify-content: center;
    padding: 10px;
    max-width: 1100px;

}



.projectbox {
  display:flex;
  flex: 0 0 25%; 
  height: 500px;
  background-color: grey;
  border-radius: 22px;
  transition: flex 0.5s ease, opacity 0.5s ease; 
  cursor: pointer;
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  align-items: center;
  justify-content: center;

}

.projectbox.expanded {
  flex: 0 0 70%; 
  z-index: 10; 
   transition: flex 0.5s ease, opacity 0.5s ease;*/ 
}

.projectbox.collapsed {
  flex: 0 0 10%;
  opacity: 0.5;
}

.projectboxred {
  background-color:rgba(10, 10, 10, 0.5);
  background-image: url("/images/Framsida_vaska_rod.jpg");


}

.projectboxblue{
  background-color:rgba(11, 11, 11, 0.5);
  background-image: url("/Bilder/Splitwise\ 1.png");


}

.projectboxgreen{
  background-image: url("/Bilder/ReEat.png");
  background-color:rgba(0, 0, 0, 0.4);
  

}


.projectboxyellow{
  background-image: url("/images/Booking_System.jpg");
  background-color:rgba(4, 4, 4, 0.5);
}

/*

.projectboxred {
  background-color:rgba(128, 0, 0, 0.8);
  background-image: url("/devportfolio/images/Framsida\ -\ väska\ \(röd-vit\).jpg");


}

.projectboxblue{
  background-color:rgba(0, 51, 128, 0.8);
  background-image: url("/Bilder/Splitwise\ 1.png");


}

.projectboxgreen{
  background-image: url("/Bilder/ReEat.png");
  background-color:rgba(212, 196, 48, 0.8);
  

}

.projectboxyellow{
  background-image: url("/devportfolio/images/Booking\ System.JPG");
  background-color:rgba(18, 87, 18, 0.932);
}*/


.projectboxgreen,
.projectboxred,
.projectboxblue,
.projectboxyellow {
    background-size: cover; 
    background-position: center; 
}


.alltext {
    align-items: center; 
    text-align: center; 
    height:25%;
    max-width:90%
}

.alltext h1 {
  pointer-events: none; 
  color: white;
  font-size:28pt;
}

.alltext h2 {
  opacity: 0;
  pointer-events: none; 
  color: white;
  font-size: 12pt;
  max-width: 80%;
  text-align: center;
  margin: 0 auto; 
  display: block; 

}

.alltext a {
  opacity: 0; 
  color: #025185;
  background-color: #f6f6f6;
  text-decoration: underline;
  padding:5px;
  width:160px;

}


.projectbox.expanded .alltext {
}

.projectbox.expanded .alltext h1,
.projectbox.expanded .alltext h2,
.projectbox.expanded .alltext h3 {
    opacity: 1; 
    pointer-events: auto; 
    transition: 1s ease;
    transition-delay: 0.35s;
    transform:translateY(-30px);


}

.projectbox.expanded .alltext a {
  opacity: 1; 
  pointer-events: auto; 
  transition: 1s ease;
  transition-delay: 0.35s;
  color: #025185;
  background-color: #f6f6f6;
  text-decoration: underline;
  padding:5px;
  width:160px;
}

.projectbox.expanded .alltext a:hover {
  opacity: 1; 
  pointer-events: auto; 
  color: #ffffff;
  text-decoration: underline;
  background-color: #ff9b19;
  transition-delay:0s;
  transition:0.3s;

}


.projectbox.expanded .alltext {
    opacity: 1; 
    pointer-events: auto; 
}


.projectbox.collapsed .alltext{
  opacity: 0; 
  pointer-events: auto; 
}



  
 /* Skills Section */
#skills {
    padding: 50px 15px;
    text-align: center;
  }
  
  #skills h2 {
    color: #000000;
    margin-bottom: 50px;
  }
  
  #skills ul {
    display: block;
    margin: 0 auto;
    padding: 0;
    max-width: 800px;
  }
  
  #skills li {
    display: inline-block;
    margin: 7px;
    padding: 5px 10px;
    color: #374054;
    list-style: none;
    cursor: default;
    font-size: 1.2em;
  }
  
  /* Contact Section */




  .contact-container{
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #contact {
    padding: 50px 15px;
    background: #1d2a2e;
    text-align: center;
    width:100%;
    max-width: 1400px;
    margin:20px;
  }
  
  #contact h2 {
    margin: 0 0 15px 0;
    color: #fff;
    font-weight: 500;
  }
  
  #contact-form {
    max-width: 800px;
    margin: 0 auto;
  }
  
  #contact-form input,
  #contact-form textarea {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: none;
    margin-bottom: 10px;
    background: #2a363b;
    color: #fff;
    transition: 0.5s ease all;
  }
  
  #contact-form input::-webkit-input-placeholder,
  #contact-form textarea::-webkit-input-placeholder {
    color: #fff;
  }
  
  #contact-form input:-moz-placeholder,
  #contact-form textarea:-moz-placeholder {
    color: #fff;
    opacity: 1;
  }
  
  #contact-form input::-moz-placeholder,
  #contact-form textarea::-moz-placeholder {
    color: #fff;
    opacity: 1;
  }
  
  #contact-form input:-ms-input-placeholder,
  #contact-form textarea:-ms-input-placeholder {
    color: #fff;
  }
  
  #contact-form input:focus,
  #contact-form textarea:focus {
    outline: none;
    background: #202122;
  }
  
  #contact-form textarea {
    height: 150px;
    resize: none;
  }
  
  #contact-form button {
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    padding: 5px 10px;
    border: none;
    color: #131313;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: 0.5s ease all;
  }
  
  #contact-form button:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    background: #4baeff;
    color: #ffffff;
    
    
  }
  
  /* Optional Section */
  .optional-section {
    padding: 50px 15px;
    text-align: center;
    border-top: 1px solid #dcd9d9;
  }
  
  .optional-section h2 {
    color: #374054;
  }
  
  .optional-section-block {
    max-width: 700px;
    margin: 0 auto 30px auto;
    padding: 15px;
    border: 1px solid #dcd9d9;
    background: #fff;
    text-align: left;
  }
  
  .optional-section-block h3 {
    font-weight: 500;
    margin: 0 0 15px 0;
    color: #374054;
  }
  
  .optional-section-block h4 {
    color: #74808a;
    clear: both;
    font-weight: 500;
    margin: 0 0 15px 0;
  }
  
  .optional-section-block p,
  .optional-section-block ul {
    margin: 0 0 15px 0;
    color: #74808a;
    font-size: 0.9em;
  }
  
  .optional-section-block ul {
    padding: 0 0 0 15px;
  }
  



  .wide {
    flex: 1 0 40%;
    height: 30vh
}

.wide-super{
  flex: 1 0 50%;
  height: 0vh
}

.wide-super-graphic{
  flex: 1 0 64%;
  height: 40vh
}

.wide-super-graphic-sticker {
  flex: 1 0 100%;

}

.wide-super-graphic-sticker img {
  max-width: 70%; 
  margin: 0 auto;
}
.wide-extra-super{
  flex: 1 0 80%;
  height: 60vh
}

.tall {
    flex: 1 0 15%;
    height: 30vh
} 

.tall-app {
  flex: 1 0
  
  
  20%;
  height: 40vh
}

.small {
    flex: 1 0 25%;
    height: 30vh
}

.medium {
    flex: 1 0 30%;
    height: 40vh
}

.small-graphic {
  flex: 1 0 25%;
  height: 30vh
}


.dummy {
    flex: 1 0 20%;
    height: 30vh
    color:white;
}


/* Media Queries for Medium-sized Screens (max-height: 800px) */
@media only screen and (max-height: 800px) {
  
  .photography {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 50px;
    max-width: 1000px ;
  }

  .wide {
    flex: 1 0 40%;
    height: 40vh
}

.wide-super{
  flex: 1 0 50%;
  height: 40vh
}

.wide-super-graphic{
  flex: 1 0 64%;
  height: auto;
}

.wide-super-graphic-sticker {
  flex: 1 0 100%;

}

.wide-super-graphic-sticker img {
  max-width: 70%;
  margin: 0 auto; 
  border:none;
}
.wide-extra-super{
  flex: 1 0 80%;
  height: 50vh
}

.tall {
    flex: 1 0 15%;
    height: 40vh
} 

.tall-app {
  flex: 1 0 20%;
  height: auto;
}

.small {
    flex: 1 0 25%;
    height: 40vh
}

.medium {
    flex: 1 0 30%;
    max-height: 60vh
}

.small-graphic {
  flex: 1 0 25%;
  height: 30vh
}


.dummy {
    flex: 1 0 20%;
    height: 30vh
    color:white;
}
}


  


/* Media Queries for Medium-sized Screens (max-width: 992px)   */
@media only screen and (max-width: 992px) { 
  #lead {
    height: auto;
    min-height: auto;
    max-height: auto;
  }

  #lead-content {
    position: relative;
    transform: none;
    left: auto;
    top: auto;
    
  }

  .civil {
    background-color: black;
    width: max-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: max-content;
  
  
  }

  .lead-image img {
    display: block;
    align-items: center;
}

  #lead-content h1 {
    font-size: 3em;
  }

  #lead-content h2 {
    font-size: 1.em;
    color: orange;
    text-align: cent;
  }

  #about {
    text-align: center;
  }

  #about p {
    text-align: left;
    font-size: 10px;
  }
}


/* Media Queries for Larger Screens (min-width: 751px)*/
@media only screen and (min-width: 751px) {
  #mobile-menu-open,
  #mobile-menu-close {
    display: none;
  }

  #mobile-menu {
    display:none;
  }
}
  
/* Media Queries for Smaller Screens (max-width: 850px) */
@media only screen and (max-width: 850px) {
  
  /* Hide header on mobile */
  header {
    position: fixed;
    display: none;
    z-index: 999;
    animation: none;
    bottom: 0;
    height: 100%;
    width: 100%;
  }

  .toggle-switch-mobile {
    display:block;
    height:50px;
    margin:4px;
    margin-left:auto;
  }

  #mobile-menu-open,
  #mobile-menu-close {
    display: block;
  }

  .hidden {
    display: none;
  }

  #menu {
    height: 100%;
    overflow-y: auto;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
    padding-inline-start:0px;
  }

  #menu li {
    display: block;
    margin-bottom: 10px;
    padding: 0px;
  }

  #menu:visited {
    text-decoration: none;
  }

  .lead-image {
    display: flex;
    justify-content: center;
    
  }

  .lead-image img {
    width: 50%; 
    display: flex;
    margin:0px;
      
  }


    #lead-content h1 {
    font-size: 2em;
    margin:10px;
  
  }

  #lead-content h2 {
    font-size: 1.3em;
  }

  #lead-content h3 {
    font-size: 1.3em;
    text-align: center;
    margin-top: -20px;
  }

  #lead-content a {
    padding: 10px 20px;
  }


  .lead-image img {
    margin-left:0px;
}

  #lead-down {
    display: none;
  }

  .project-image {
    display: none;
  }

  .project-info {
    position: relative;
    margin: 0;
    padding: 30px 15px;
    top: auto;
    transform: none;
  }

  footer, .social {
    text-align: center;
  }

  #lead-content {
  
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
  }

  .lead-text, .lead-image {
    width: 100%; 
    text-align: center;
  }


  .lead-image img {
    max-width: 100%;
  }


  #lead-content h1, #lead-content h2 {
    text-align: center;
  }

  
  .about-titles{

    font-size: 10px;
  }

  .about-title-item{
    padding:0px;
    margin:-15px;
    font-size: 10px;
  }


.project-boxes {
    flex-direction: column;
    gap: 15px; 
    align-items: center;
    padding-top: 35px;
    padding-bottom: 35px;
    width: 100%;
    height: 800px;
    min-width: 1px;
}

.projectbox {
    width: 90%; 
    height: 120px; 

}

h1 {
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  margin: 0 auto; 
  width: 100%; 
}

h2,
h3 {
  font-size: 12px;
}



.projectbox.expanded {
  flex: 0 0 40%; 
  z-index: 10; 
}

.projectbox.collapsed {
  flex: 0 0 20%;
  min-width: 100px;
  opacity: 0.5;
}



.wide {
  flex: 1 0 55%;
}

.tall {
  flex: 1 0 25%;

}

.small {
  flex: 1 0 60%;
}

.medium {
flex: 1 0 35%;
height:30vh;

}

.wide-super {
flex: 1 0 90%;

}

.tall-app {
flex: 1 0 40%;
height: 30vh
}

.wide-super-graphic {
flex: 1 0 80%;
height: 30vh;

}

.wide-super-graphic-sticker {
flex: 1 0 80%;
height:30vh;

}

.wide-super-graphic-sticker img {
max-width: 100%; 
margin: 0 auto; 
border:none;
}


.image-gallery li {
order: 0; 
}


.image-gallery li:nth-child(1) {
order: 4;
}

.image-gallery li:nth-child(2) {
order: 1;
}

.image-gallery li:nth-child(3) {
order: 5;
}

.image-gallery li:nth-child(4) {
order: 3;
}

.image-gallery li:nth-child(5) {
order: 7;
}

.image-gallery li:nth-child(6) {
order: 6;
}

.image-gallery li:nth-child(7) {
order: 8;
}

.image-gallery li:nth-child(8) {
order: 9;
}



#lead-content {
display: flex; 
flex-direction: column; /* Stack items vertically */
}

.download {
order: 1;
}

.lead-text {
order: 3; 
}

.lead-image {
order: 2;
}

.alltext h2,
.alltext a {
  opacity: 0; 
  pointer-events: none; 
  font-size: 10pt;
  max-width: 80%;
  text-align: center;
  margin: 0 auto; 
  display: block;
  font-size: 9pt;
}

.alltext h1 {
    opacity: 1; 
    font-size: 20pt;
}


.projectbox.expanded .alltext h1,
.projectbox.expanded .alltext h2,
.projectbox.expanded .alltext h3 {
    opacity: 1; 
    pointer-events: auto; 
    transform:translateY(-30px);

}

.projectbox.expanded .alltext a {
  opacity: 1; 
  pointer-events: auto; 
  opacity: 1; 
  color: #025185;
  background-color: #f6f6f6;
  text-decoration: underline;
  padding:5px;
  width:160px;
}
}






.download {
  display:flex;
  justify-content:center;
  text-align: justify;
  height:40px;
  padding:10px;
  margin-top:10px;
}









  
/* Media Queries for Very Small Screens (max-width: 450px) */
@media only screen and (max-width: 450px) {


  .lead-text {
    max-width: 90%; 
    min-width: auto; 
    padding: 0 10px; 
    text-align: center; 
  }

  #lead-content h1, #lead-content h2, #lead-content h3 {
    font-size: 1.2em; 
    line-height: 1.4em; 
  }

  #lead-content a {
    font-size: 0.4em;
    padding: 5px 10px; 
  }

  .a {
    font-size: 0.8em;
    padding: 5px 10px; 
  }


}


@media only screen and (max-width: 800px) and (max-height: 700px) {

  .lead-image {
  display:flex;
  align-items: ;
  }

  .lead-image img {
    margin:0px;

  }

  .footer {
    display: none;
  }

  .wide {
    flex: 1 0 55%;
  }
  
  .tall {
    flex: 1 0 25%;
  
  }
  
  .small {
    flex: 1 0 60%;
  }
  
  .medium {
  flex: 1 0 35%;
  min-height: 30vh;
  max-height:60vh;
  
  }
  
  .wide-super {
  flex: 1 0 90%;
  
  }
  
  .tall-app {
  flex: 1 0 40%;
  max-height: 60vh
  }
  
  .wide-super-graphic {
  flex: 1 0 80%;
  max-height: 55vh;
  
  }
  
  .wide-super-graphic-sticker {
  flex: 1 0 80%;
  max-height:70vh;
  
  }
  
  .wide-super-graphic-sticker img {
  max-width: 100%; 
  margin: 0 auto; 
  border:none;
  }



}

  

  .image-gallery {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 0px;
    padding-right:0px;
    width:100%;
    list-style-type: none;

}

.image-gallery > li {
    cursor: pointer;
    position: relative;
}

.image-gallery > ul {
  cursor: pointer;
  position: relative;
  list-style-type: none;
}

.image-gallery li img {
    object-fit: cover;
    width: 100%;        
    height: 100%;
    vertical-align: middle;
    border-radius: 5px;
}


/* Dark mode styles */
body.dark-mode .image-gallery {
  background-color: #08181b; 
  gap: 10px; 
}

body.dark-mode .image-gallery li img {
  border: 2px solid #08181b; 
  border-radius: 5px; 
}

body.dark-mode .image-gallery {
  background-color: #08181b; 
  gap: 10px; 
}

.menu-item {
  margin-right: 75px;
}

.menu-item:hover {
  background-color: black; 
}


.menu-item:not(:last-child) {
  border-right: 2px solid #000; 
  margin-right: 20px; 
  padding-right: 20px;
}

.menu-content {
  display: flex;
  align-items: center;
}

.menu-content:hover {
  display: flex;
  align-items: center;
  color:rgb(255, 255, 255);
}

.icon {
  margin-right: 1px;
}



.grid, .grid-item {
  padding: 0;
  margin: 0;
}


.grid {
  width: 80%; 


}

.grid-item { 
  width: 200px;
  box-sizing: border-box; 
  
} 

.grid-item--width2 { width: 400px; }


.grid-item img, .grid-item--width2 img {
    max-width: 100%;
    display: block;
    height: auto;
}


 /* Project*/

 .Aboutmetext{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; 
  flex-wrap: wrap; 
  text-align: center;
 }

 .about-titles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; 
  flex-wrap: wrap; 
  text-align: center;
}

.about-title-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:10px;

}

.divider {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0 10px;
}