@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html, body {
  background-color: #78b1e6; }

ul, ol {
  list-style: none; }

a, img {
  text-decoration: none;
  outline: none; }

.wrapper {
  width: 100%;
  max-width: 460px;
  padding: 24px;
  display: flex;
  flex-flow: column;
  gap: 24px;
  margin: 0 auto; }
  .wrapper .logo {
    width: 100%;
    text-align: center; }
    .wrapper .logo img {
      display: inline-block;
      width: 100%;
      max-width: 250px; }
  .wrapper .heading {
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: 8px; }
    .wrapper .heading b {
      display: block;
      width: 100%;
      text-align: center;
      font: 400 44px 'dk_au_revoirregular', serif;
      color: #fff;
      margin: 0 0 -12px 0; }
    .wrapper .heading p {
      text-align: center;
      font: 500 24px "Rubik", sans-serif;
      color: #fff; }
  .wrapper .schoolcode {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .wrapper .schoolcode b {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font: 400 18px "Rubik", sans-serif;
      color: #202020;
      padding: 6px 16px;
      background-color: #FFE03B;
      border-radius: 40px; }
      .wrapper .schoolcode b span {
        display: inline-block;
        width: auto;
        font: 500 18px "Rubik", sans-serif;
        color: #202020; }
  .wrapper h3 {
    text-align: center;
    font: 500 16px "Rubik", sans-serif;
    color: #F99E1B; }
  .wrapper .icons {
    width: 100%;
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wrapper .icons .iconCon {
      width: 100%;
      min-height: 112px;
      height: auto;
      display: flex;
      flex-flow: column;
      gap: 16px;
      align-items: center;
      padding: 20px 4px 12px 4px;
      background-color: #fff;
      border-radius: 8px; }
      .wrapper .icons .iconCon span {
        display: block;
        width: 36px; }
        .wrapper .icons .iconCon span img {
          display: block;
          width: 100%; }
      .wrapper .icons .iconCon b {
        display: block;
        width: 100%;
        text-align: center;
        font: 400 12px "Rubik", sans-serif;
        color: #202020; }
  .wrapper .downloadApp {
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: 12px; }
    .wrapper .downloadApp b {
      display: block;
      width: 100%;
      text-align: center;
      font: 500 16px "Rubik", sans-serif;
      color: #fff; }
    .wrapper .downloadApp .appLinks {
      width: 100%;
      display: grid;
      grid-gap: 12px;
      grid-template-columns: repeat(2, 1fr);
      align-items: center; }
      .wrapper .downloadApp .appLinks a {
        display: block;
        width: 100%;
        border-radius: 8px;
        overflow: hidden; }
        .wrapper .downloadApp .appLinks a img {
          display: block;
          width: 100%; }
  .wrapper small {
    display: block;
    width: 100%;
    text-align: center;
    font: 400 14px "Rubik", sans-serif;
    color: #fff;
    padding: 12px 0 0 0; }
    .wrapper small a {
      display: inline;
      font: 500 14px "Rubik", sans-serif;
      color: #fff; }
      .wrapper small a:hover {
        color: #F99E1B; }