$palette1-color1: #212A3E;
$palette1-color2: #394867;
$palette1-color3: #9BA4B5;
$palette1-color4: #F1F6F9;

$palette2-color1: #1B262C;
$palette2-color2: #0F4C75;
$palette2-color3: #3282B8;
$palette2-color4: #BBE1FA;

$cur-color1: $palette1-color1;
$cur-color2: $palette1-color2;
$cur-color3: $palette1-color3;
$cur-color4: $palette1-color4;

body {
  background-color: $cur-color1;

  .block-out {
    display: flex;
    flex-direction: column;

    @media only screen and (min-width: 768px) {
      margin: 0rem 5rem;
    }

    align-self: center;

    .block-in {
      background-color: adjust-color($color: $cur-color1, $red: -10, $green: 12, $blue: 20, $alpha: 0.8);
      color: $cur-color4;

      border-radius: 10px;
      border-style: groove;

      padding: 1rem 0;
      margin: 1rem 0;

      .list-header {
        text-align: center;
      }

      .basic-list {
        list-style-type: none;
        display: flex;
        flex-direction: column;

        align-items: center;
        padding: 0px;


        >.block-list-in {
          padding: 0rem 0;
          margin: 0.5rem 0;

          text-align: center;

          background-color: $cur-color2;
          border-radius: 10px;
          border-style: dotted;

          width: fit-content;
          min-width: 50%;

          @media only screen and (max-width: 768px) {
            min-width: 90%;
          }

          .in-p {
            margin: 0px;
            padding: 1rem;
            font-size: x-large;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
          }



          >a {
            color: $cur-color4;

            &:hover {
              color: $cur-color3;
            }

            &:visited {
              color: adjust-color($color: $cur-color3, $red: 10, $green: -100, $blue: -100, $alpha: 1.0);
            }
          }

        }

        &.block-hover:hover {
          transition: all;
        }
      }
    }

  }

}