* {
  font-family: 'Noto Sans KR', sans-serif;
  color: whitesmoke;
  text-align: center;
}


h3 {
  color: black;
  font-size: 1.8em;
  margin : 0px;
  padding : 20px 0px 25px 0px;
}


p {
  color: rgb(19, 16, 16);
  font-weight: bold;
  font-size: 20px;
}

span {
  font-size: 20px;
  color: rgba(245, 245, 245, 0.848);
}

input {
  margin: 5px;
  border: 0px;
  border-radius: 5px;
  color: black;
  padding: 3px;
  padding-left: 12px;
  width: 50%;
  justify-content: center;
}

table {
  margin-left: auto;
  margin-right: auto;
  width: 15em;
  font-size: 20px;
}

.container {
  font-size: 1.1em;
  margin: auto;
  margin-top: 20px;
  background-color: rgba(72, 57, 57, 0.345);
  padding: 15px;
  display: block;
  justify-content: center;
  border-radius: 10px;
}

#dnaButton,
#proteinButton {
  font-size: 1.1em;
  color: black;
  border: 10px;
  background-color: rgba(138, 216, 208, 0.532);
  padding: 3px;
  border-radius: 3px;
  padding-right: 10px;
  padding-left: 10px;
}

#main {
  color : black;
  margin: auto;
  margin-top: 3%;
  margin-bottom: 3%;
  padding: 40px 30px 40px 30px;
  background-color: whitesmoke;
  width: 80%;
  text-align: center;
  border-radius: 20px;
  justify-content: center;

}

#dna,
#protein {
  display: none;
  justify-content :center;
  margin: 20px;
  color: black;
}


#dnasubmit, #proteinsubmit {
  background-color: whitesmoke;
  width : 5em;
  font-size : 1em;
  text-align: center;
  border-radius: 10px;
  color: black;
  border: 0px;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 20px;
}


#dnasubmit:hover, #proteinsubmit:hover {
  background-color: rgb(36, 37, 39);
  color: white;
}

#proteinButton:hover,
#proteinButton:focus,
#dnaButton:hover,
#dnaButton:focus {
  background-color: rgb(36, 37, 39);
  color: white;
}

#result{
  justify-content: center;
  text-align: center;
}


#inputtbl td:nth-child(1){
  text-align: left;
}

#forms {
  width : 35em;
}

#forms td:nth-child(1){
  color : whitesmoke;
  font-weight: bolder;

}

[type="text"]{
  width : 28em;
  font-size : 17px;
}
[type="text"]::placeholder {
  color : rgba(87, 87, 91, 0.211);
}



#rst{
  color : whitesmoke;
  font-size : 20px;
  background-color: rgba(36, 49, 48, 0.44);
  padding : 2px 10px 2px 10px;
  font-weight : lighter;
  border-radius: 6px;
}

#resulttbl tr, #resulttbl td{
  color : black;
}

#resultBox{
  position: relative;
  top: 30px;
  margin: auto;
  margin-bottom: 8%;
  padding : 0px 10px 10px 10px;
  background-color: rgba(35, 43, 42, 0.253);
  border : 2px solid rgba(245, 245, 245, 0.778);
  width: 80%;
  text-align: center;
  border-radius: 20px;
  justify-content: center;
}

@media all and (max-width: 760px) {
  *{
    font-size : 12px;
  }
  #forms{
    width : 300px;
    font-size: 13px;
  }
  #forms td:nth-child(1) {
      color: whitesmoke;
  }
  [type="text"] {
      width: 180px;
      font-size: 12px;
  }

  span{
    font-size : 13px;
  }

  #rst{
    font-size : 14px;
  }
  #resulttbl{
    width : 80%;
  }

  #proteinsubmit, #dnasubmit{
    font-size : 12px;
    width : 80px;
  }
}