@import url("font-faces.css");
* 
{
  box-sizing: inherit;
}
body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #0D0D15;
  background-repeat: no-repeat;
  background-image: url("../images/bg.png");
  background-size: cover;
  background-position: center;
}
.content {
  justify-content: center;
  display: flex;
  gap: 50px;
  margin: auto 300px;
  flex-direction: column;
}
.header {
  margin-top: 50px;
  justify-content: center;
  display: flex;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-group {
  border: 1px solid #34344E;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  gap: 20px;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.input-group.active {
  border: 1px solid #E0E0FE;
}
.input-group:empty {
  border: 1px solid #34344E;
}
.input-group:focus-within {
  border: 1px solid #E0E0FE;
}
.input-group:not(:focus-within):empty {
  border: 1px solid #34344E;
}
.oksize {
  width: 10%;
}
#pxInputtext {
  color: #fff;
  font-size: 34px;
  font-family: Gotham-Bold;
}
#pxInput {
  color: #fff;
  font-size: 50px;
  font-family: Gotham-Bold;
  background-color: transparent;
  border: none;
  text-align: center;
  width: 100%;
}
.conicon {
  height: 100%;
}
#remInput {
  color: #fff;
  font-size: 50px;
  font-family: Gotham-Bold;
  background-color: transparent;
  border: none;
  text-align: center;
  width: 100%;
}
.resultcopy {
  justify-content: center;
  display: flex;
}
.result {
  text-align: center;
  border: dashed 1px #fff;
  width: 100%;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.copy {
  display: flex;
  gap: 20px;
  align-items: center;
}
.text {
  font-family: Gotham-Bold;
  color: #fff;
  font-size: 32px;
}
#resultText {
  font-family: Gotham-Bold;
  color: #fff;
  font-size: 32px;
}
#copyButton {
  height: 44px;
}
.alert {
  font-family: Gotham-Bold;
  font-size: 16px;
  position: fixed;
  width: 350px;
  color: #34344E;
  background: #19E3FF;
  border-radius: 20px;
  text-align: center;
  padding: 15px 25px;
  left: 50%;
  transform: translate(-50%, 0);
  transition: 0.3s ease 0.3s;
  bottom: -60px;
  z-index: 99;
}
.line {
  border: solid 1px #34344E;
  width: 100%;
}
.about {
  background-color: #0E1725;
  border: 1px solid #18263B;
  padding: 30px;
  margin: auto auto;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%
}
.group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.abouttext {
  display: flex;
  gap: 5px;
  flex-direction: column;
}
.h5 {
  font-size: 24px;
  font-family: Gotham-Bold;
  color: #fff;
}
.h4 {
  font-size: 14px;
  font-family: Gotham-Book;
  color: #fff;
}
.h3 {
  font-size: 12px;
  font-family: Gotham-Book;
  color: #fff;
}
.pxrem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pxremtext {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.textgroup {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.T01 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.h7 {
  font-size: 16px;
  font-family: Gotham-Bold;
  color: #BABAE0;
}
.h6 {
  font-size: 14px;
  font-family: Gotham-Book;
  color: #BABAE0;
  line-height: 20px;
}
.footer {
  font-size: 12px;
  font-family: Gotham-Book;
  color: #fff;
  margin-bottom: 50px;
  text-align: center;
}
.footer a {
  font-family: Gotham-Bold;
  color: #fff;
}

@media only screen and (max-width: 1441px), (max-width: 1281px) {
.content {
  margin: auto 150px;
}
}

@media only screen and (max-width: 1025px), (max-width: 961px) {
.content {
  margin: auto 50px;
}
}

@media only screen and (max-width: 861px), (max-width: 811px),(max-width: 781px) {
.content {
  margin: auto 50px;
}
.oksize {
  width: 20%;
}
}

@media only screen and (max-width: 541px), (max-width: 431px), (max-width: 429px), (max-width: 391px), (max-width: 376px), (max-width: 361px), (max-width: 321px) {
.content {
  gap: 20px;
  margin: auto 10px;
}
.header {
  margin-top: 20px;
}
.input-group {
  padding: 10px;
  gap: 10px;
}
#pxInputtext {
  font-size: 24px;
}
.oksize {
  width: 30%;
}
.about {
  padding: 10px;
}
.group {
  display: grid;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-direction: column;
}
.footer {
  margin-bottom: 20px;
}
}