@media screen and (max-width: 425px) {
  main {
    flex: 1;
    padding: 20px 20px 0;
    position: relative;
  }

  .main-container h1{
    text-align: center;
    color: rgb(0, 0, 63);
    margin-bottom: 10px;
  }

  .setting-container {
    overflow-y: scroll;
    position: relative;
    padding: 10px 5px 0;
  }

  .setting-item{
    width: 100%;
    border: 1.5px solid rgb(20, 20, 143);
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 10px;
  }

  .setting-item div{
    color: rgb(221, 221, 245);
  }

  .setting-item input{
    height: 30px;
    border-radius: 5px;
    border: none;
    outline: none;
    padding: 0 5px;
    display: block;
  }

  .setting-item span{
    color: rgb(255, 255, 146);
    display: block;
  }

  .subset-container h3{
    color: rgb(0, 0, 172);
  }

  .action-container{
    position: fixed;
    left: 0;
    bottom: 65px;
    width: 100%;
    justify-self: center;
  }

  .action-container button{
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    width: 80%;
    display: block;
    justify-self: center;
    color: rgb(157, 255, 157);
    background-color: rgb(0, 114, 0);
    font-size: large;
  }

  .action-container button:active{
    color: rgb(234, 255, 234);
    border: 1px solid rgb(234, 255, 234);
  }
}