style.css

* {
  color: #0e8a0e;
  margin: 0;
  padding: 0;
  font-family: 'Roboto Mono';
  /* font-family: 'NeoDunggeunmo'; */
}

body {
  margin: 3% 3% 50% 3%; /*바닥에 여백 주기*/
  background-color: black;
}

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  border-bottom: 1px solid #0e8a0e;
}

header h1 {
  padding: 10px;
}

header #version {
  font-size: 1.4em;
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

header .menu {
  background-color: #000;
  border: 1px solid #0e8a0e;
  height: 25px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

header #translatebtn {
  margin: 10px 5px;
  padding: 2px 6px 3px 6px;
  font-family: 'NeoDunggeunmo';
}

header #addbtn {
  font-size: 0.8em;
  margin: 10px;
  padding: 0 7px 1px 7px;
  font-family: 'Roboto Mono';
}

header #commentbtn {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #0e8a0e;
  height: 22px;
  cursor: pointer;
  padding: 0px 6px 1px 6px;
  margin: 10px 0 10px 10px;
  font-size: initial;
  background-color: #0e8a0e;
}

#commentTxt {
  width: 85%;
  margin: 0;
  color: #fff;
  padding: 0px 8px 2px 4px;
}

#commentcheck {
  width: 15%;
  color: #fff;
  font-size: initial;
  padding: 0px 4px 0px 0px;
}

#toggle:checked ~ #commentbtn {
  background: #000;
}

#toggle:checked ~ #commentbtn #commentTxt {
  color: #0e8a0e;
}

#toggle:checked ~ #commentbtn #commentcheck {
  color: #0e8a0e;
}

#commentbtn, #commentbtn #commentcheck, #commentbtn #commentTxt {
  transition: all 0.2s ease-in;
}

header .menu:active {
  background-color: #0e8a0e;
  color: white;
  
}

/* 알림 */

#addmenu {
  padding: 15px;
  border: 1px solid #0e8a0e;
  background-color: #000;
  position: fixed;
  width: 400px;
  height: 270px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

  display: none;
  flex-direction: column;
  /* flex: 1 5 1; */
}

#Edlgheader {
  width: 100%;
  height: 25%;
  box-sizing: border-box;
  justify-content: center;
}

#Edlgheader h3 {
  font-size: 1.3em;
  /* padding: 5px 0 3px 3px; */
}

#Edlginput {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid #0e8a0e;
  border-bottom: 1px solid #0e8a0e;
}

#Edlginput label {
  font-size: 1.1em;
  flex: 0 0 150px; /*부모요소가 아닌 자식 요소에다 쓸것*/
}

#Edlginput input {
  font-size: 1.1em;
  width: 250px;
  height: 23px;
  margin: 0 20px 0 0;
}

/* #Edlginput .lang {
  background-color: #000;
  border: 1px solid #0e8a0e;
  height: 27px;
  cursor: pointer;
  font-size: 0.3em;
  padding: 0 7px; 
  font-family: 'Roboto Mono';
} */

#Edigword {
  padding: 10px;
  display: flex;
  flex-direction: row;
}
#Edigword input{
  text-transform: uppercase;
}

#Edlgeng {
  padding: 10px;
  display: flex;
  flex-direction: row;
}

#Edlgkor {
  padding: 10px;
  display: flex;
  flex-direction: row;
}

#Edlgsave {
  padding: 15px 0 0 0;
  display: flex;
  flex-direction: row;
}

#Edlgsave .choose {
  background-color: #000;
  color: #0e8a0e;
  font-size: 1em;
  cursor: pointer;
}

#Edlgcancel {
 width: 100%;
 height: 100%;
 border-right: 1px solid #0e8a0e;
}

#Edlgconfirm {
  width: 100%;
  height: 100%;
}

#addmenu button:active {
  background-color: #0e8a0e;
  color: white;
}


/* 영어 명령 */

.orderbox {
  width: 100%;
  height: 10%;
}

.divisionline {
  font-size: 1.8em;
  font-weight: 500;
  padding: 7px 0 0 0;
}

.order {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.textstart {
  font-size: 1.8em;
  font-weight: 300;
  margin: 0px 10px 7px 0;
}

.ordercontent {
  font-size: 1.3em;
  font-weight: 300;
  padding: 3px 10px 10px 0;
  display: inline-block;
}

/*한국어 명령*/

.ordercontentkor {
  display: none;
  font-family: 'NeoDunggeunmo';
  font-size: 1.2em;
}  

/*입력*/

.input {
  width: 100%;
  caret-color: #0e8a0e;
  font-size: 1.1em;
  height: 35px;
  border: #000;
  background-color: #000;
  text-transform: uppercase;
  padding: 5px 0;
}

.input:focus {
  outline: none;
}

@media screen and (max-width: 1000px) {

  header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  header h1 {
    text-align: center;
  }

  header #version {
    padding: 0 10px 15px 15px;
  }
}

@media screen and (max-width: 760px) {
  header h1 {
    font-size: 1.6em;
  }
  
  header #translatebtn {
    margin: 5px;
    font-size: 0.5em;
  }

  .divisionline {
    font-size: 1.5em;
  }
  
  .textstart {
    font-size: 1.5em;
  }
  
  .ordercontent {
    font-size: 1em;
  }
  
  .input {
    font-size: 1em;
  }

  /*알림*/

  #addmenu {
    padding: 10px;
    width: 300px;
    height: 220px;
  }

  #Edlginput {
    padding: 5px 0;
  }

  #Edlgheader h3 {
    font-size: 1em;
    padding: 0 0 10px 0;
    /* padding: 5px 0 3px 3px; */
  }

  #Edlginput label {
    font-size: 0.8em;
    flex: 0 0 110px; /*부모요소가 아닌 자식 요소에다 쓸것*/
  }

  #Edlginput input {
    font-size: 0.9em;
    width: 160px;
    height: 18px;
  }

  /* #Edlginput .lang {
    height: 22px;
  } */

  #Edlgsave {
    padding: 10px 0 0 0;
  }

  #Edlgsave .choose {
    font-size: 0.8em;
  }

}

@media screen and (max-width: 375px) {
  body {
    margin: 5% 5% 50% 5%;
  }
  header #version {
    padding: 0 5px 7px 5px;
    align-items: center;
    font-size: 0.8em;
  }
  header h1 {
    font-size: 1.4em;
  }
  header #versionTxt {
    padding: 10px 0;
  }
  #commentbtn {
    font-size: 0.5em;
  }
  #commentTxt {
    display: inline-block;
    font-size: 0.5em;
  }
  header button {
    margin: 3px;
    font-size: 0.2em;
    padding: 5px;
  }
  .ordercontent {
    font-size: 1em;
  }

  /*알림*/

  #addmenu {
    padding: 7px;
    width: 250px;
    height: 180px;
  }

  #Edlginput {
    padding: 3px 0;
  }

  #Edlgheader h3 {
    font-size: 0.8em;
    padding: 0 0 5px 0;
    /* padding: 5px 0 3px 3px; */
  }

  #Edlginput label {
    font-size: 0.8em;
    flex: 0 0 110px; /*부모요소가 아닌 자식 요소에다 쓸것*/
  }

  #Edlginput input {
    font-size: 0.9em;
    width: 110px;
    height: 15px;
    margin: 0 8px 0 0;
  }

  /* #Edlginput .lang {
    height: 17px;

  } */

  #Edlgsave {
    padding: 3px 0 0 0;
    box-sizing: border-box;
  }

  #Edlgsave .choose {
    margin: 0;
    font-size: 0.5em;
  }
}

@media (pointer:none), (pointer:coarse) {
  #Edlgsave .choose {
    background-color: #000;
    border: none;
    box-shadow: none;
  }
}