.learn_chess {
  margin-top: 20vh;
  height: calc(100vh - 20vh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }
  .learn_chess .desc {
    width: 400px;
    height: 500px;
    background: black;
    color: white;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px; }
    .learn_chess .desc .sub_title {
      width: 90%;
      text-align: right;
      font-family: 'Fasthand', cursive;
      font-size: 40px; }
    .learn_chess .desc a {
      text-decoration: underline;
      color: white; }
    .learn_chess .desc img {
      float: left;
      width: 200px;
      margin: 10px; }
  .learn_chess .form {
    width: 400px;
    height: 500px;
    background: white;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px; }
    .learn_chess .form .sub_title {
      width: 90%;
      text-align: left;
      font-family: 'Fasthand', cursive;
      font-size: 40px;
      color: black;
      margin: 35px 20px; }
    .learn_chess .form form {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      .learn_chess .form form label {
        display: grid;
        width: 90%;
        margin: 10px;
        background: #ECE9E6; }
        .learn_chess .form form label input {
          outline: none;
          border: none;
          width: 100%;
          border-bottom: 2px solid black;
          padding: 10px;
          background: transparent; }
      .learn_chess .form form button {
        width: 90%;
        margin: 10px;
        padding: 10px;
        background: black;
        color: white;
        border: none;
        outline: none;
        cursor: pointer;
        transition: all 0.3s ease; }
        .learn_chess .form form button:hover {
          border-bottom: 1px solid black;
          background: #ECE9E6;
          color: black; }