* {
     box-sizing: border-box;
     margin: 0;
}

.dark {
     background: linear-gradient(180deg, #040918 0%, #091540 100%);
     color: hsl(217, 61%, 90%);
}

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

p {
     font-size: 16px;
}

.top-panel {
     margin: 5%;
     padding: 3%;
     border-radius: 20px;
     position: relative;
     box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
}

.main-container .light {
     background: hsl(200, 60%, 99%);
}

.main-container .dark {
     background: #2f364b;
     color: white;
}

.top-panel #logo {
     fill: white;
     height: 100%;
}

.top-panel #theme {
     background-color: #ededed;
     padding: 2.5%;
     position: absolute;
     right: 0;
     margin-right: 15px;
     border-radius: 15px;
     width: fit-content;
     height: fit-content;
     border: none;
}

.top-panel #theme.dark{
     background-color: #545969ff;
}

.button-container {
     margin: 0 auto;
     text-align: center;
     width: 80%;
}

.button-container .button {
     border: none;
     font-size: 1.3rem;
     margin-top: 5%;
     padding-top: 3%;
     padding-bottom: 3%;
     padding-left: 6%;
     padding-right: 6%;
     border-radius: 20px;
     background-color: hsl(200, 60%, 99%);
     box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
     margin-right: 2%;
}

.button-container .buttons .dark {
     background-color: #2f364b;
     color: white;
}

.button-container .buttons .active-light {
     background-color: #c7221a;
     color: white;
}

.button-container .buttons .active-dark {
     background-color: #c7221a;
     color: black;
}

.extension-container {
     margin: 5%;
}

.extension-card {
     background-color: hsl(200, 60%, 99%);
     margin-bottom: 5%;
     box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
     padding: 8%;
     border-radius: 25px;
}

.extension-container .dark {
     background-color: #2f364b;
     color: white;
}

.extension-card .top-part {
     display: flex;
     margin-bottom: 5%;

}

.extension-card .top-part .top-left {
     margin-right: 7%;
}

.extension-card .top-part .top-right {
     margin: 0;
}

.extension-name {
     margin-bottom: 3%;
     text-align: start;
}

.extension-card .bottom-part {
     position: relative;
     display: flex;
}

.extension-card .bottom-part .remove-button {
     padding: 2%;
     padding-left: 5%;
     padding-right: 5%;
     border-radius: 20px;
     font-size: 1.1rem;
     border: none;
     align-items: center;
     background-color: rgb(251, 253, 254);
     border: 1px solid rgba(0, 0, 0, 0.268);
}

.extension-card .bottom-part .remove-button.dark {
     background-color: #2f364b;
     color: white;
     border-color: hsl(226, 11%, 37%);
}

.extension-card .bottom-part .switch {
     position: absolute;
     right: 0;
     align-self: center;
     display: inline-block;
     width: 15%;
     height: 65%;
}

.extension-card .bottom-part .switch input{
     opacity: 0;
     width: 0;
     height: 0;
}

.extension-card .bottom-part .switch .slider{
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: hsl(226, 11%, 37%);
     transition: .4s;
     border-radius: 25px;
     display: flex;
     align-items: center;
}

.extension-card .bottom-part .switch .slider::before{
     position: absolute;
     content: '';
     height: 80%;
     width: 50%;
     left: 5%;
     background-color: white;
     transition: .4s;
     border-radius: 60%;
}

.extension-card .bottom-part .switch input:checked + .slider{
     background-color: hsl(3, 71%, 56%);
}

/* .extension-card .bottom-part .switch input:focus + .slider{
} */

.extension-card .bottom-part .switch input:checked + .slider::before{
     transform: translateX(80%);
}

*:focus {
     outline: 2px solid hsl(3, 86%, 64%);
}

.extension-card .bottom-part .remove-button:hover{
     cursor: pointer;
     background-color: hsl(3, 71%, 56%);
}

.button.dark:hover{
     background-color: rgba(255, 255, 255, 0.357);
     cursor: pointer;
}

.button.dark.active-dark{
     background-color: #c7221a;
     cursor: pointer;
}

#theme:hover{
     cursor: pointer;
     background-color: hsla(226, 11%, 37%, 0.486);
}

.button-container .button.light:hover{
     opacity: .5;
     cursor: pointer;
}

.button-container .button.light.active-light{
     opacity: 1;
}

@media (min-width: 768px) {
     body{
          font-size: 1.2rem;
     }

     .button-container{
          display: flex;
          width: 90%;
          position: relative;
          align-items: center;
     }

     .buttons{
          position: absolute;
          width: 50%;
          padding: 0;
          margin: 0;
          right: 0;
     }

     .button-container .button{
          margin-top: 0;
     }

     .extension-section{
          display: flex;
          padding: 0;
     }

     .extension-container{
          display: flex;
          flex-wrap: wrap;
     }

     .extension-card{
          width: 48%;
          padding: 2.5%;
          margin-right: 1%;
          margin-bottom: 1.5%;
     }
}

@media (min-width: 992px) { 
     body{
          font-size: 1.2rem;
     }
     .main-container{
          display: flex;
          flex-direction: column;
          align-items: center;
     }

     .top-panel{
          width: 70%;
          margin: 0;
          margin-bottom: 3.5%;
          padding: 1.5%;
          margin-top: 2.5%;
     }

     .button-container{
          width: 70%;
     }

     .buttons{
          text-align: right;
     }

     #inactive-button{
          margin: 0;
     }

     .top-panel #theme{
          padding: 1%;
     }

     .extension-section{
          width: 80%;
          justify-content: center;
          position: relative;
     }

     .extension-container{
          width: 100%;
     }

     .extension-card{
          width: 32%;
          margin-bottom: 1%;
     }

     .button-container .button{
          padding-top: 2%;
          padding-bottom: 2%;
          padding-left: 3%;
          padding-right: 3%;
     }
 }