:root {
                          --color_1: #b0e0e6;
                          --color_1_b: 176, 224, 230;
                          --color_name_1: #234FA3;
                          --border_1: #00a3e0;
                          --color_2: #e7f5ed;
                          --color_2_b: 231, 245, 237;
                          --color_name_2: #0E376C;
                          --border_2: #00c048;
                          --border_3: #2f63a4;
                          --color_3: #3891af;
                          --color_3_b: 222, 239, 244;
                      }

                      html {
                          font-size: 62.5%
                      }

                      body {
                          color: #535353;
                          margin: 0 auto;
                          padding: 0;
                          text-align: center;
                          font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
                          font-size: 14px;
                      }

                      html, body {
                          height: 100%;
                      }

                      img {
                          max-width: 100%;
                          vertical-align: top
                      }

                      a {
                          text-decoration: none;
                          border: none;
                          outline: none
                      }

                      a:focus, a:hover, a:active {
                          outline: 0;
                      }

                      .outer {
                          margin: 0 auto;
                          height: 100%;
                          background-image: url(../img/cy_main_bg.png);
                          background-repeat: no-repeat;
                          background-size: cover;
                      }

                      .main_container {
                          background-color: rgba(106, 193, 189, 0.459);
                          height: 100%;
                      }

                      .m_table {
                          display: table;
                          width: 100%;
                      }

                      .m_tablecell {
                          display: table-cell;
                          vertical-align: middle;
                      }

                      .school_1 {
                          color: var(--color_1);
                          background-color: rgba(255, 255, 255, 0.8)
                          /* background: linear-gradient(to bottom, rgba(158, 131, 150, 0) 0%, rgb(241, 163, 220) 100%); */
                      }

                      .school_1:active, .school_1:focus {
                          outline: 0;
                          background-color: rgba(var(--color_1_b), 0.3);
                          transform: scale(1.02);
                      }

                      .school_1 .name_1 {
                          color: var(--color_name_1);
                      }

                      .school_2 {
                          color: var(--color_2);
                          background-color: rgba(255, 255, 255, 0.8);
                          /* background: linear-gradient(to bottom, rgba(158, 131, 150, 0) 0%, rgb(179, 232, 195) 100%); */
                      }

                      .school_2:active, .school_2:focus {
                          outline: 0;
                          background-color: rgba(var(--color_2_b), 0.3);
                          transform: scale(1.02);
                      }

                      .school_2 .name_2 {
                          color: var(--color_name_2);
                      }

                      .school_3 {
                          color: var(--color_3);
                          background-color: rgba(var(--color_3_b), 0.8);
                          /* background: linear-gradient(to bottom, rgba(158, 131, 150, 0) 0%, rgb(161, 227, 249) 100%) */
                      }

                      .school_3:active, .school_3:focus {
                          outline: 0;
                          background-color: rgba(var(--color_3_b), 0.3);
                          transform: scale(1.02);
                      }

                      .logo_main {
                          height: 34%;
                          position: relative;
                      }

                      .logo_container {
                          position: absolute;
                          bottom: 15%;
                          width: 100%;
                          text-align: center;
                      }

                      .logo_main img {
                          height: 24vh;
                      }

                      .main_heading {
                          padding-top: 24px;
                          font-weight: bold;
                          font-size: 20px;
                          margin-bottom: 4px;
                          color: #ffda80;
                      }

                      .block {
                          height: 19%;
                          display: table;
                          width: 92vw;
                          margin: 24px auto;
                          max-width: 500px;
                      }

                      .block .main {
                          display: table-cell;
                          vertical-align: middle;
                          margin: 4px 0px;
                          font-size: 18px;
                          padding: 0px 8px;
                          line-height: 1.3em;
                          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
                          border-radius: 5px;
                          border-left: 6px solid;
                          border-right: 6px solid;
                          font-weight: 600;
                          line-height: 1.6em;
                      }

                      .block .main img {
                          height: 20vh;
                          width: auto;
                          padding: 20px 0px;
                      }

                      .block .main.school_1 {
                          border-color: var(--border_1);
                      }

                      .block .main.school_2 {
                          border-color: var(--border_2);
                      }

                      .block .main.school_3 {
                        border-color: var(--border_3);
                    }

                      .logo img {
                          border-radius: 50%;
                          border: 1px solid white;
                          /* box-shadow: 0px 0px 0px 8px #a03b85, 0px 0px 0px 16px #366e47, 0px 0px 0px 24px #3a93b0; */
                      }

                      

                      @media (max-width:400px) {
                          .block .main {
                              font-size: 17px;
                          }
                      }