*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Noto Sans";
}

body, html{
    width: 100%;
    height:auto;
    min-height: 100vh;
    background: linear-gradient(180deg, #040918 0%, #091540 100%);
     transition: 0.4s ease;
}



header {
    width: 100%;
    height: auto; 
    padding: 40px 120px;
        transition: 0.4s ease;
}

nav{
    width: 100%;
    height: 100%;
  background-color: rgba(235, 242, 252, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    justify-content: space-between;
    transition: 0.4s ease;
}

nav img{
    height: 35px;
 transition: 0.4s ease;
}

.nav_box{
    width: 40px;
    height: 40px;
    background-color: hsl(226, 11%, 37%);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    border: none;
     transition: 0.4s ease;
}


.nav_box img{
height: 35px;
 padding: 8px;
}



.extensions{
    width: 100%;
    height: 100%;
    height: calc(100% - 150px);
      padding: 40px 120px;
       transition: .4s ease;
}

.entention-cont{
    width: 100%;
    height: 100%;
}

.cont-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cont-header h2{
    font-size: 30px;
    color: #fff;
  line-height: 1;
    transition: 0.4s ease;
}

.toggle_btns{
    display: flex;
    gap: 10px;
}

.toggle_btns button{
    font-size: 15px;
    font-weight: 600;
    padding: 10px 16px;
    border: none;
  background-color: hsl(225, 23%, 24%);
  color: #fff;
border-radius: 16px;
cursor: pointer;
  transition: 0.4s ease;
}

.extension_cards {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 10px;
    row-gap: 10px;
    width: 100%;
     transition: .4s ease;
}

.extension-card{
width: 100%;
    height: 200px;
    background-color: hsl(225, 23%, 24%);
     margin: 0 auto; 
     border-radius: 20px;
     border: 1px solid hsl(226, 11%, 37%);
     padding: 20px;
     display: flex;
     flex-direction: column;
    justify-content: space-between;
    transition: .4s ease;
}

.extension-card .upper{
    display: flex;
    gap: 20px;
    align-items: start;
    
}

.extension-card .upper_inner{
display: flex;
flex-direction: column;
gap: 5px;
}

.extension-card .upper_inner h3{
    color: #fff;
}

.extension-card .upper_inner p{
    font-size: 15px;
    color: hsl(0, 0%, 78%);
}

.lower{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lower button{
    padding: 6px 10px;
    border-radius: 15px;
    background: transparent;
    border: none;
       outline: 2px solid hsl(226, 11%, 37%);
    color: #fff;
    transition: 0.4s ease;
    cursor: pointer;
    transition: 0.4s ease;
}




.switch{
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;
}

.switch input{
    opacity: 0;
    width: 0;
    height: 0;
}

.slider{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
}

.slider::before{
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
      left: 3px;
  bottom: 2.5px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: hsl(3, 86%, 64%); 
}


.slider.round {
  border-radius: 34px;
}


.slider.round::before{
    border-radius: 50%;
}

input:checked +.slider::before{ 
    transform: translateX(14px);
}

/* dark mode */

.body-light{
        background: linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);

}

.nav-light{
      background-color: hsl(0, 0%, 100%);
      box-shadow: 4px 3px 10px rgba(0, 0, 0, 0.1);
}

.nav-box-light{
    background-color: hsl(0, 0%, 93%);
}

.extensions .extensions-cont-p-light{
color: hsl(226, 25%, 17%);
}


.extensions .entention-cont .toggle_btns .toggle-btn-light{
    background-color: #fff;
    color: hsl(226, 25%, 17%);
}

.card-light{
         border: 1px solid hsl(226, 11%, 37%);

    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
    background-color: #fff;
}

.upper .upper_inner h3.lightmode{
    color: hsl(226, 25%, 17%);
}

.lower button.light-mode{

      color: hsl(226, 25%, 17%);
}

/* focus mode */
.nav_box:focus{
   outline-offset: 2px;
    outline: 2px solid hsl(3, 86%, 64%);   
}

.toggle_btns button:focus{
    outline-offset: 2px;
   outline: 2px solid hsl(3, 86%, 64%);  
}

input:focus + .slider{
  box-shadow: 0 0 1px #2196F3;

}

.lower button:focus{
        outline-offset: 2px;
   outline: 2px solid hsl(3, 86%, 64%);
   background-color: hsl(226, 11%, 37%);
}

.lower button.light-mode:focus{
            outline-offset: 2px;
   outline: 2px solid hsl(3, 86%, 64%);
   background-color: hsl(0, 0%, 78%);
}
/* reponsive */

@media (max-width:1000px) {
    .extension_cards {
    grid-template-columns: repeat(2,1fr);
}

.extensions{
      padding: 40px 40px;
}
}

@media (max-width:710px) {
    .extension_cards {
    grid-template-columns: repeat(1,1fr);
}
.cont-header{
    flex-direction: column;
    gap: 20px;
}


}




@media (max-width:500px) {
header{
       padding: 40px 20px;
}
  .extensions{
      padding: 40px 10px;
}
}


@media (max-width:300px) {
    .extensions{
      padding: 40px 10px;
}
}