/* light mode */
:root{
  --padding-inline-def: 20px;
}
@media (prefers-color-scheme: light) {
    :root {
      --bg-color: white;
      --main-color:black;
      /* Changes all icons to white that shares this filter*/
      --icon-color:invert(0%) sepia(0%) saturate(7471%) hue-rotate(122deg) brightness(101%) contrast(109%)
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
      --bg-color: black;
      --main-color:white;
      /* Changes all icons to white that shares this filter*/
      --icon-color:invert(100%) sepia(7%) saturate(0%) hue-rotate(73deg) brightness(116%) contrast(106%)
    }
  #github-repo img{
    filter:invert(100%)
  }
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

body {
  background-color: var(--bg-color);
  color: var(--main-color);
  margin: 0;
  font-family: sans-serif
}

a{
  color: var(--main-color)
}
noscript{
  text-align: center;
}
noscript p{
  font-size:30px
}

#menubar {
  background-color: var(--bg-color);
  color: var(--main-color);
  margin: 0;
  height: 42px;
  text-align: right;
  display: grid;
  padding-top: 7px;
  padding-inline: var(--padding-inline-def)
}
#github-repo {
  height:87%;
}
#github-repo img {
  height:inherit;
  
}
#main-detector{
  --padding-lat: 12vw;
  background-color: 0;
  display: grid;
  height: auto;
  padding-right: var(--padding-lat);
  padding-left: var(--padding-lat);
  text-align: center;
  opacity: 0%;
  padding-top: 30px;
  padding-bottom: 60px;
  
}
#main-detector.fade-in-main-detector{
  opacity: 100%;
  transition: opacity 1s;
}

#main-question{
  font-size: 29px;
  font-weight: bold;
}

#main-answer {
  font-size: 86px;
  font-family: monospace;
  /*! border: 3px solid; */
  border-radius: 22px;
  border-collapse: separate;
  font-weight: bold;
}
.main-symbols{
  
  align-self: center;
  
}
.main-symbols img{
  scale: 28vw;
  filter: var(--icon-color);
}
#main-codes-div{
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 15px;
}
.codes-div{
  display: grid;
}
.code-ids{
  text-decoration: none;
  font-size: xx-large;
  font-weight: lighter;
}

#troubleshoot-footer {
  color: var(--main-color);
  height: 0;
  font-weight: lighter;
}

#about{
  padding-inline: 172px;
}
#about h2{
  margin-top: 45px;
  font-size: 41px;
}
#about h3{
  margin-top: 45px;
  font-size: 26px;
}
#about p{
  font-size: 21px;
  line-height: 26px;
  font-weight: lighter;
  text-indent: 24px;
  padding-left: 28px;
}