@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

*{
  padding: 0px;
  margin: 0px;
}

:root{
  --font: "Noto Sans", sans-serif;
  --Neutral900: hsl(227, 75%, 14%);
  --Neutral800: hsl(226, 25%, 17%);
  --Neutral700: hsl(225, 23%, 24%);
  --Neutral600: hsl(226, 11%, 37%);
  --Neutral300: hsl(0, 0%, 78%);
  --Neutral200: hsl(217, 61%, 90%);
  --Neutral100: hsl(0, 0%, 93%);
  --Neutral0: hsl(200, 60%, 99%);

  /* red */

  --Red400: hsl(3, 86%, 64%);
  --Red500: hsl(3, 71%, 56%);
  --Red700: hsl(3, 77%, 44%);

  --LightGradient: linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);
  --DarkGradient: linear-gradient(180deg, #040918 0%, #091540 100%);
}

body{
  font-family: var(--font);
  height: 100vh;
}

/* Header */
.header-image-switch{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px;
  margin: 10px;

  border-radius: 15px;
}

.logo-image{
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch-dark-light{
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px;

  border-radius: 10px;
}

.switch-dark-light:hover{
  background-color: hsla(227, 14%, 55%, 0.267);
  cursor: pointer;
  border:solid 1px var(--Red700);

  transition: 0.3s;
}

.switch-dark-light-input{
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

/* active, inactive, all */

.extension-list-actives{
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  flex-flow: row wrap;
}

.extension-list-toggles{
  margin: 20px;
}

input[type="checkbox"]{
  clip-path: inset(50%);
}

.identifier{
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 5px;

  border-radius: 20px;
}

.identifier:hover{
  background-color: var(--Red400);
  color: var(--Neutral900);

  font-weight: bold;

  transition: 0.5s;

  cursor: pointer;
}

.extensions{
  display: grid;
}