@import url('https://fonts.googleapis.com/css?family=Roboto');

:root{
--night-red:#aa1400;
--night-orange:#d15900;
--night-yellow:#d1bb00;
--night-green:#24aa00;
--night-cyan:#00a0aa;
--night-blue:#0054aa;
--night-violet:#7800aa;
--night-pink:#d100b1;
--night-grey:#1d1d1d;
--night-grey2:#212121;
--night-grey3:#262626;

font-family: 'Roboto', sans-serif;
}
#pi{
  width: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 40%;
  left: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}
body, #pi{
transition: fill 0.2s;
transition: background 0.2s;
}
.main{
  transform: translate(-50%, -50%);
  position: absolute;
  top: 65%;
  left: 50%;
  resize: both;
  overflow: auto;
  color:#ededed;
  letter-spacing: 1px;
  text-align: center;
  line-height: 30px;
}
a:link, a:visited{
color: #ededed;
text-decoration: none;
transition: color 0.2s;
}

@media only screen and (max-width: 600px) {
  .hide-on-small-only, .hide-on-small-and-down {
    display: none !important;
  }
}

@media only screen and (max-width: 992px) {
  .hide-on-med-and-down {
    display: none !important;
  }
}

@media only screen and (min-width: 601px) {
  .hide-on-med-and-up {
    display: none !important;
  }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
  .hide-on-med-only {
    display: none !important;
  }
}

@media only screen and (min-width: 993px) {
  .hide-on-large-only {
    display: none !important;
  }
}

@media only screen and (min-width: 993px) {
  .show-on-large {
    display: block !important;
  }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
  .show-on-medium {
    display: block !important;
  }
}

@media only screen and (max-width: 600px) {
  .show-on-small {
    display: block !important;
  }
}

@media only screen and (min-width: 601px) {
  .show-on-medium-and-up {
    display: block !important;
  }
}

@media only screen and (max-width: 992px) {
  .show-on-medium-and-down {
    display: block !important;
  }
}