:root {
  --dark-green: #1b2c11;
  --lawn-green: #97fb57;
  --night: #121212;
  --battleship-gray: #909090;
  --snow: #f6f2f2;

  --modal: #00000070;

  --dark-green-50: #e4e6e2;
  --dark-green-100: #bbc0b8;
  --dark-green-200: #8d9688;
  --dark-green-300: #5f6b58;
  --dark-green-400: #3d4c35;
  --dark-green-500: #1b2c11;
  --dark-green-600: #18270f;
  --dark-green-700: #14210c;
  --dark-green-800: #101b0a;
  --dark-green-900: #081005;
  --dark-green-A100: #6cff53;
  --dark-green-A200: #41ff20;
  --dark-green-A400: #22ec00;
  --dark-green-A700: #1ed300;

  --lawn-green-50: #f3ffeb;
  --lawn-green-100: #e0fecd;
  --lawn-green-200: #cbfdab;
  --lawn-green-300: #b6fc89;
  --lawn-green-400: #a7fc70;
  --lawn-green-500: #97fb57;
  --lawn-green-600: #8ffa4f;
  --lawn-green-700: #84fa46;
  --lawn-green-800: #7af93c;
  --lawn-green-900: #69f82c;
  --lawn-green-A100: #ffffff;
  --lawn-green-A200: #ffffff;
  --lawn-green-A400: #deffd1;
  --lawn-green-A700: #cbffb8;

  --night-50: #e3e3e3;
  --night-100: #b8b8b8;
  --night-200: #898989;
  --night-300: #595959;
  --night-400: #363636;
  --night-500: #121212;
  --night-600: #101010;
  --night-700: #0d0d0d;
  --night-800: #0a0a0a;
  --night-900: #050505;
  --night-A100: #ff4e4e;
  --night-A200: #ff1b1b;
  --night-A400: #e70000;
  --night-A700: #ce0000;

  --battleship-gray-50: #f2f2f2;
  --battleship-gray-100: #dedede;
  --battleship-gray-200: #c8c8c8;
  --battleship-gray-300: #b1b1b1;
  --battleship-gray-400: #a1a1a1;
  --battleship-gray-500: #909090;
  --battleship-gray-600: #888888;
  --battleship-gray-700: #7d7d7d;
  --battleship-gray-800: #737373;
  --battleship-gray-900: #616161;
  --battleship-gray-A100: #fbdada;
  --battleship-gray-A200: #f6acac;
  --battleship-gray-A400: #ff7070;
  --battleship-gray-A700: #ff5757;

  --snow-50: #fefdfd;
  --snow-100: #fcfbfb;
  --snow-200: #fbf9f9;
  --snow-300: #f9f6f6;
  --snow-400: #f7f4f4;
  --snow-500: #f6f2f2;
  --snow-600: #f5f0f0;
  --snow-700: #f3eeee;
  --snow-800: #f2ecec;
  --snow-900: #efe8e8;
  --snow-A100: #ffffff;
  --snow-A200: #ffffff;
  --snow-A400: #ffffff;
  --snow-A700: #ffffff;

  --scaler: 1px;

  --size-base: 1rem;

  --size-l1: 1.25rem;
  --size-l2: 1.563rem;
  --size-l3: 1.953rem;
  --size-l4: 2.441rem;
  --size-l5: 3.052rem;
  --size-l6: 3.815rem;
  --size-l7: 4.769rem;
  --size-l8: 5.961rem;

  --size-s1: 0.8rem;
  --size-s2: 0.64rem;
  --size-s3: 0.512rem;
  --size-s4: 0.41rem;
  --size-s5: 0.328rem;
  --size-s6: 0.262rem;
  --size-s7: 0.201rem;
  --size-s8: 0.168rem;

  --font-default-size: calc(var(--scaler) * 12);

  --default-transition-duration: 0.25s;
  --default-transition-method: linear;
  --default-transition-target: all;
  --default-transition: var(--default-transition-target) var(--default-transition-duration) var(--default-transition-method);

  --field-rate-height: 601;
  --field-rate-width: 960;

  --app-black: #000000;
  --app-blue: #0d6efd;
  --app-indigo: #6610f2;
  --app-purple: #6f42c1;
  --app-pink: #d63384;
  --app-red: #dc3545;
  --app-orange: #fd7e14;
  --app-yellow: #ffc107;
  --app-green: #198754;
  --app-teal: #20c997;
  --app-cyan: #0dcaf0;
  --app-white: #ffffff;
  --app-gray: #6c757d;
  --app-gray-dark: #343a40;
  --app-gray-light: #adb5bd;
  --app-light: #f8f9fa;
  --app-dark: #212529;
  --app-transparent: #00000000;

  --material-red-50: #ffebee;
  --material-red-100: #ffcdd2;
  --material-red-200: #ef9a9a;
  --material-red-300: #e57373;
  --material-red-400: #ef5350;
  --material-red-500: #f44336;
  --material-red-600: #e53935;
  --material-red-700: #d32f2f;
  --material-red-800: #c62828;
  --material-red-900: #b71c1c;
  --material-red-A100: #ff8a80;
  --material-red-A200: #ff5252;
  --material-red-A400: #ff1744;
  --material-red-A700: #d50000;

--material-pink-50: #fce4ec;
--material-pink-100: #f8bbd0;
--material-pink-200: #f48fb1;
--material-pink-300: #f06292;
--material-pink-400: #ec407a;
--material-pink-500: #e91e63;
--material-pink-600: #d81b60;
--material-pink-700: #c2185b;
--material-pink-800: #ad1457;
--material-pink-900: #880e4f;
--material-pink-A100: #ff80ab;
--material-pink-A200: #ff4081;
--material-pink-A400: #f50057;
--material-pink-A700: #c51162;

--material-purple-50: #f3e5f5;
--material-purple-100: #e1bee7;
--material-purple-200: #ce93d8;
--material-purple-300: #ba68c8;
--material-purple-400: #ab47bc;
--material-purple-500: #9c27b0;
--material-purple-600: #8e24aa;
--material-purple-700: #7b1fa2;
--material-purple-800: #6a1b9a;
--material-purple-900: #4a148c;
--material-purple-A100: #ea80fc;
--material-purple-A200: #e040fb;
--material-purple-A400: #d500f9;
--material-purple-A700: #aa00ff;

--material-deep-purple-50: #ede7f6;
--material-deep-purple-100: #d1c4e9;
--material-deep-purple-200: #b39ddb;
--material-deep-purple-300: #9575cd;
--material-deep-purple-400: #7e57c2;
--material-deep-purple-500: #673ab7;
--material-deep-purple-600: #5e35b1;
--material-deep-purple-700: #512da8;
--material-deep-purple-800: #4527a0;
--material-deep-purple-900: #311b92;
--material-deep-purple-A100: #b388ff;
--material-deep-purple-A200: #7c4dff;
--material-deep-purple-A400: #651fff;
--material-deep-purple-A700: #6200ea;

--material-indigo-50: #e8eaf6;
--material-indigo-100: #c5cae9;
--material-indigo-200: #9fa8da;
--material-indigo-300: #7986cb;
--material-indigo-400: #5c6bc0;
--material-indigo-500: #3f51b5;
--material-indigo-600: #3949ab;
--material-indigo-700: #303f9f;
--material-indigo-800: #283593;
--material-indigo-900: #1a237e;
--material-indigo-A100: #8c9eff;
--material-indigo-A200: #536dfe;
--material-indigo-A400: #3d5afe;
--material-indigo-A700: #304ffe;

--material-blue-50: #e3f2fd;
--material-blue-100: #bbdefb;
--material-blue-200: #90caf9;
--material-blue-300: #64b5f6;
--material-blue-400: #42a5f5;
--material-blue-500: #2196f3;
--material-blue-600: #1e88e5;
--material-blue-700: #1976d2;
--material-blue-800: #1565c0;
--material-blue-900: #0d47a1;
--material-blue-A100: #82b1ff;
--material-blue-A200: #448aff;
--material-blue-A400: #2979ff;
--material-blue-A700: #2962ff;

--material-light-blue-50: #e1f5fe;
--material-light-blue-100: #b3e5fc;
--material-light-blue-200: #81d4fa;
--material-light-blue-300: #4fc3f7;
--material-light-blue-400: #29b6f6;
--material-light-blue-500: #03a9f4;
--material-light-blue-600: #039be5;
--material-light-blue-700: #0288d1;
--material-light-blue-800: #0277bd;
--material-light-blue-900: #01579b;
--material-light-blue-A100: #80d8ff;
--material-light-blue-A200: #40c4ff;
--material-light-blue-A400: #00b0ff;
--material-light-blue-A700: #0091ea;

--material-cyan-50: #e0f7fa;
--material-cyan-100: #b2ebf2;
--material-cyan-200: #80deea;
--material-cyan-300: #4dd0e1;
--material-cyan-400: #26c6da;
--material-cyan-500: #00bcd4;
--material-cyan-600: #00acc1;
--material-cyan-700: #0097a7;
--material-cyan-800: #00838f;
--material-cyan-900: #006064;
--material-cyan-A100: #84ffff;
--material-cyan-A200: #18ffff;
--material-cyan-A400: #00e5ff;
--material-cyan-A700: #00b8d4;

--material-teal-50: #e0f2f1;
--material-teal-100: #b2dfdb;
--material-teal-200: #80cbc4;
--material-teal-300: #4db6ac;
--material-teal-400: #26a69a;
--material-teal-500: #009688;
--material-teal-600: #00897b;
--material-teal-700: #00796b;
--material-teal-800: #00695c;
--material-teal-900: #004d40;
--material-teal-A100: #a7ffeb;
--material-teal-A200: #64ffda;
--material-teal-A400: #1de9b6;
--material-teal-A700: #00bfa5;

--material-green-50: #e8f5e9;
--material-green-100: #c8e6c9;
--material-green-200: #a5d6a7;
--material-green-300: #81c784;
--material-green-400: #66bb6a;
--material-green-500: #4caf50;
--material-green-600: #43a047;
--material-green-700: #388e3c;
--material-green-800: #2e7d32;
--material-green-900: #1b5e20;
--material-green-A100: #b9f6ca;
--material-green-A200: #69f0ae;
--material-green-A400: #00e676;
--material-green-A700: #00c853;

--material-light-green-50: #f1f8e9;
--material-light-green-100: #dcedc8;
--material-light-green-200: #c5e1a5;
--material-light-green-300: #aed581;
--material-light-green-400: #9ccc65;
--material-light-green-500: #8bc34a;
--material-light-green-600: #7cb342;
--material-light-green-700: #689f38;
--material-light-green-800: #558b2f;
--material-light-green-900: #33691e;
--material-light-green-A100: #ccff90;
--material-light-green-A200: #b2ff59;
--material-light-green-A400: #76ff03;
--material-light-green-A700: #64dd17;

--material-lime-50: #f9fbe7;
--material-lime-100: #f0f4c3;
--material-lime-200: #e6ee9c;
--material-lime-300: #dce775;
--material-lime-400: #d4e157;
--material-lime-500: #cddc39;
--material-lime-600: #c0ca33;
--material-lime-700: #afb42b;
--material-lime-800: #9e9d24;
--material-lime-900: #827717;
--material-lime-A100: #f4ff81;
--material-lime-A200: #eeff41;
--material-lime-A400: #c6ff00;
--material-lime-A700: #aeea00;

--material-yellow-50: #fffde7;
--material-yellow-100: #fff9c4;
--material-yellow-200: #fff59d;
--material-yellow-300: #fff176;
--material-yellow-400: #ffee58;
--material-yellow-500: #ffeb3b;
--material-yellow-600: #fdd835;
--material-yellow-700: #fbc02d;
--material-yellow-800: #f9a825;
--material-yellow-900: #f57f17;
--material-yellow-A100: #ffff8d;
--material-yellow-A200: #ffff00;
--material-yellow-A400: #ffea00;
--material-yellow-A700: #ffd600;

--material-amber-50: #fff8e1;
--material-amber-100: #ffecb3;
--material-amber-200: #ffe082;
--material-amber-300: #ffd54f;
--material-amber-400: #ffca28;
--material-amber-500: #ffc107;
--material-amber-600: #ffb300;
--material-amber-700: #ffa000;
--material-amber-800: #ff8f00;
--material-amber-900: #ff6f00;
--material-amber-A100: #ffe57f;
--material-amber-A200: #ffd740;
--material-amber-A400: #ffc400;
--material-amber-A700: #ffab00;

--material-orange-50: #fff3e0;
--material-orange-100: #ffe0b2;
--material-orange-200: #ffcc80;
--material-orange-300: #ffb74d;
--material-orange-400: #ffa726;
--material-orange-500: #ff9800;
--material-orange-600: #fb8c00;
--material-orange-700: #f57c00;
--material-orange-800: #ef6c00;
--material-orange-900: #e65100;
--material-orange-A100: #ffd180;
--material-orange-A200: #ffab40;
--material-orange-A400: #ff9100;
--material-orange-A700: #ff6d00;

--material-deep-orange-50: #fbe9e7;
--material-deep-orange-100: #ffccbc;
--material-deep-orange-200: #ffab91;
--material-deep-orange-300: #ff8a65;
--material-deep-orange-400: #ff7043;
--material-deep-orange-500: #ff5722;
--material-deep-orange-600: #f4511e;
--material-deep-orange-700: #e64a19;
--material-deep-orange-800: #d84315;
--material-deep-orange-900: #bf360c;
--material-deep-orange-A100: #ff9e80;
--material-deep-orange-A200: #ff6e40;
--material-deep-orange-A400: #ff3d00;
--material-deep-orange-A700: #dd2c00;

--material-brown-50: #efebe9;
--material-brown-100: #d7ccc8;
--material-brown-200: #bcaaa4;
--material-brown-300: #a1887f;
--material-brown-400: #8d6e63;
--material-brown-500: #795548;
--material-brown-600: #6d4c41;
--material-brown-700: #5d4037;
--material-brown-800: #4e342e;
--material-brown-900: #3e2723;

--material-grey-50: #fafafa;
--material-grey-100: #f5f5f5;
--material-grey-200: #eeeeee;
--material-grey-300: #e0e0e0;
--material-grey-400: #bdbdbd;
--material-grey-500: #9e9e9e;
--material-grey-600: #757575;
--material-grey-700: #616161;
--material-grey-800: #424242;
--material-grey-900: #212121;

--material-blue-grey-50: #eceff1;
--material-blue-grey-100: #cfd8dc;
--material-blue-grey-200: #b0bec5;
--material-blue-grey-300: #90a4ae;
--material-blue-grey-400: #78909c;
--material-blue-grey-500: #607d8b;
--material-blue-grey-600: #546e7a;
--material-blue-grey-700: #455a64;
--material-blue-grey-800: #37474f;
--material-blue-grey-900: #263238;

}

a {
  text-decoration: none;
}

body {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

h1 {
  font-size: var(--size-l6);
}

h2 {
  font-size: var(--size-l5);
}

h3 {
  font-size: var(--size-l4);
}

h4 {
  font-size: var(--size-l3);
}

h5 {
  font-size: var(--size-l2);
}

h6 {
  font-size: var(--size-l1);
}

html {
  background-color: var(--night);
  color: var(--snow);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-default-size);
  height: 100%;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  min-height: 100%;
  min-width: 100%;
  padding: 0;
  overflow: hidden;
  width: 100%;
}

input {
  background-color: var(--dark-green);
  border: 0.01rem solid var(--lawn-green);
  border-radius: 1rem;
  color: var(--lawn-green);
  font-size: var(--font-default-size);
  outline: 0px;
  padding: 0.25rem 1rem 0.25rem 1rem;
  transition: var(--default-transition);
}

input:disabled {
  background-color: var(--night-400);
  border: 0.01rem solid var(--night-200);
  color: var(--night-200);
}

input:disabled:hover {
  background-color: var(--night-400);
  border: 0.01rem solid var(--night-200);
  color: var(--night-200);
}

input:focus {
  background-color: var(--dark-green-400);
  border: 0.01rem solid var(--lawn-green-400);
  color: var(--lawn-green-400);
  outline: none;
}

input:hover {
  background-color: var(--dark-green-400);
  border: 0.01rem solid var(--lawn-green-400);
  color: var(--lawn-green-400);
}

select {
  background-color: var(--dark-green);
  border: 0.01rem solid var(--lawn-green);
  border-radius: 1rem;
  color: var(--lawn-green);
  font-size: var(--font-default-size);
  outline: 0px;
  padding: 0.25rem 1rem 0.25rem 1rem;
  transition: var(--default-transition);
}

select:disabled {
  background-color: var(--night-400);
  border: 0.01rem solid var(--night-200);
  color: var(--night-200);
}

select:disabled:hover {
  background-color: var(--night-400);
  border: 0.01rem solid var(--night-200);
  color: var(--night-200);
}

select:focus {
  background-color: var(--dark-green-400);
  border: 0.01rem solid var(--lawn-green-400);
  color: var(--lawn-green-400);
}

select:hover {
  background-color: var(--dark-green-400);
  border: 0.01rem solid var(--lawn-green-400);
  color: var(--lawn-green-400);
}

textarea:focus {
  outline: none;
}

.dapp-background {
  background-color: var(--dark-green-600);
  height: calc(var(--field-rate-height) * var(--scaler));
  max-height: calc(var(--field-rate-height) * var(--scaler));
  max-width: calc(var(--field-rate-width) * var(--scaler));
  min-height: calc(var(--field-rate-height) * var(--scaler));
  min-width: calc(var(--field-rate-width) * var(--scaler));
  position: absolute;
  user-select: none;
  width: calc(var(--field-rate-width) * var(--scaler));
  z-index: 10;
}

.dapp-btn {
  background-color: var(--lawn-green);
  border-radius: var(--size-base);
  color: var(--dark-green);
  cursor: default;
  font-size: var(--font-default-size);
  font-weight: bold;
  padding: var(--size-base) calc(2 * var(--size-base));
  transition: var(--default-transition);
  user-select: none;
}

.dapp-btn:hover {
  background-color: var(--lawn-green-200);
  color: var(--dark-green-900);
}

.dapp-btn-l3 {
  font-size: var(--size-l3);
}

.dapp-btn-s2 {
  display: inline-block;
  padding: var(--size-s2) calc(2 * var(--size-s2));
  font-size: var(--size-s2);
}

.dapp-btn-screen-match-strategy {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  max-width: 80%;
  min-width: 80%;
  padding-bottom: var(--size-s3);
  padding-top: var(--size-s3);
  width: 80%;
}

.dapp-btn-screen-match-strategy span {
  background-color: var(--lawn-green-900);
  border-radius: 1rem;
  font-size: var(--size-s1);
  margin-left: 1rem;
  padding: 0.25rem 1rem 0.25rem 1rem;
}

.dapp-btn-screen-team-bottom {
  max-width: 15rem;
  min-width: 15rem;
  overflow: hidden;
  text-align: center;
  width: 15rem;
}

.dapp-btn-screen-team-strategy {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  max-width: 60%;
  min-width: 60%;
  padding-bottom: var(--size-s3);
  padding-top: var(--size-s3);
  width: 60%;
}

.dapp-btn-screen-team-strategy span {
  background-color: var(--lawn-green-900);
  border-radius: 1rem;
  font-size: var(--size-s1);
  margin-left: 1rem;
  padding: 0.25rem 1rem 0.25rem 1rem;
}

.dapp-btn-screen-title {
  font-size: var(--size-s1);
  max-width: 7rem;
  min-width: 7rem;
  overflow: hidden;
  padding-bottom: var(--size-s3);
  padding-top: var(--size-s3);
  text-align: center;
  width: 7rem;
}

.dapp-content-nest {
  background-color: #081005a0;
  bottom: 10%;
  left: 7%;
  overflow: hidden;
  padding: 2rem;
  position: absolute;
  right: 7%;
  top: 10%;
}

.dapp-level-up {
  align-items: center;
  border-radius: 50%;
  bottom: 91%;
  color: var(--lawn-green);
  cursor: default;
  display: flex;
  justify-content: center;
  position: absolute;
  right: 7%;
  transition: var(--default-transition);
  user-select: none;
}

.dapp-level-up:hover {
  color: var(--lawn-green-200);
}

.dapp-level-up span {
  font-size: 2.5rem;
  font-weight: 200;
}

.dapp-menu-banner {
  align-items: center;
  background-color: var(--dark-green-400);
  bottom: 2rem;
  display: flex;
  justify-content: center;
  left: 2rem;
  overflow: hidden;
  position: absolute;
  right: 60%;
  top: 75%;
}

.dapp-menu-icon {
  align-items: center;
  bottom: 30%;
  display: flex;
  justify-content: center;
  left: 2rem;
  overflow: hidden;
  position: absolute;
  right: 60%;
  top: 2rem;
  user-select: none;
}

.dapp-menu-item {
  align-items: center;
  background-color: var(--dark-green);
  border-radius: 1rem;
  color: var(--lawn-green);
  cursor: default;
  display: flex;
  flex-direction: column;
  font-size: 2rem;
  height: 100%;
  justify-content: center;
  max-height: 100%;
  max-width: 100%;
  min-height: 100%;
  min-width: 100%;
  transition: var(--default-transition);
  user-select: none;
  width: 100%;
}

.dapp-menu-item:hover {
  background-color: var(--dark-green-400);
  color: var(--lawn-green-400);
}

.dapp-menu-item span {
  font-size: 3rem;
}

.dapp-menu-items {
  bottom: 2rem;
  column-gap: 10%;
  display: grid;
  grid-template-columns: 45% 45%;
  grid-template-rows: auto auto auto auto;
  left: 45%;
  overflow: hidden;
  position: absolute;
  right: 2rem;
  row-gap: 2rem;
  top: 2rem;
}

.dapp-menu-icon img {
  max-width: 100%;
}

.dapp-modal {
  align-items: center;
  background-color: var(--modal);
  display: none;
  height: calc(var(--field-rate-height) * var(--scaler));
  justify-content: center;
  max-height: calc(var(--field-rate-height) * var(--scaler));
  max-width: calc(var(--field-rate-width) * var(--scaler));
  min-height: calc(var(--field-rate-height) * var(--scaler));
  min-width: calc(var(--field-rate-width) * var(--scaler));
  position: absolute;
  width: calc(var(--field-rate-width) * var(--scaler));
  z-index: 20;
}

.dapp-modal-box {
  background-color: var(--dark-green-900);
  border: 0.01rem solid var(--lawn-green);
  border-radius: 1rem;
  height: 90%;
  max-height: 90%;
  max-width: 90%;
  min-height: 90%;
  min-width: 90%;
  padding: 1rem;
  width: 90%;
}

.dapp-modal-box-small {
  height: 50%;
  max-height: 50%;
  max-width: 50%;
  min-height: 50%;
  min-width: 50%;
  width: 50%;
}

.dapp-modal-color-grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-gap: 0.5rem;
  margin-top: 1rem;
  min-height: 80%;
  max-width: 100%;
  min-width: 100%;
  width: 100%;
}

.dapp-modal-color-sample {
  background-color: var(--app-white);
  border-radius: 1rem;
}

.dapp-modal-head {
  align-items: center;
  border-bottom: 0.01rem solid var(--lawn-green);
  color: var(--lawn-green);
  cursor: default;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  user-select: none;
}

.dapp-not-yet {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dapp-screen {
  display: none;
  height: calc(var(--field-rate-height) * var(--scaler));
  max-height: calc(var(--field-rate-height) * var(--scaler));
  max-width: calc(var(--field-rate-width) * var(--scaler));
  min-height: calc(var(--field-rate-height) * var(--scaler));
  min-width: calc(var(--field-rate-width) * var(--scaler));
  position: absolute;
  width: calc(var(--field-rate-width) * var(--scaler));
  z-index: 20;
}

.dapp-screen-box {
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  left: 0;
  padding: 2rem;
  position: absolute;
  right: 0;
  top: 0;
}

.dapp-screen-box-section {
  align-items: center;
  border-bottom: 0.01rem solid var(--dark-green-200);
  border-top: 0.01rem solid var(--dark-green-200);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 0 2rem 0;
  max-width: 100%;
  min-width: 100%;
  width: 100%;
}

.dapp-screen-box-section-title {
  color: var(--dark-green-200);
  text-align: center;
}

.dapp-screen-connect-login-btn {
  margin-top: 1rem;
  max-width: 25%;
  min-width: 25%;
  text-align: center;
  width: 25%;
}

.dapp-screen-install-message {
  background-color: var(--app-red);
  color: var(--app-white);
  display: inline-block;
  max-width: 75%;
  min-width: 75%;
  text-align: center;
  width: 75%;
}

.dapp-screen-left {
  border-right: 0.01rem solid var(--dark-green-200);
  bottom: 2rem;
  left: 2rem;
  overflow: hidden;
  padding: 0 2rem 0 0;
  position: absolute;
  right: 50%;
  top: 17.5%;
}

.dapp-screen-left-with-bottom {
  bottom: 17.5%;
}

.dapp-screen-login {
  height: 20rem;
  max-height: 20rem;
  max-width: 100%;
  min-height: 20rem;
  min-width: 100%;
  margin-top: 0.5rem;
  position: relative;
  width: 100%;
}

.dapp-screen-login-btn span {
  background-color: var(--lawn-green-900);
  border-radius: 0.5rem;
  margin-left: 1rem;
  padding: 0.25rem 0.5rem;
}

.dapp-screen-login-label {
  display: inline-block;
  max-width: 35%;
  min-width: 35%;
  padding-right: 1rem;
  text-align: right;
  width: 35%;
}

.dapp-screen-login-left {
  border-right: 0.01rem solid var(--dark-green-200);
  bottom: 0;
  left: 0;
  padding-right: 2rem;
  position: absolute;
  right: 50%;
  top: 0;
}

.dapp-screen-login-right {
  bottom: 0;
  left: 50%;
  padding-left: 2rem;
  position: absolute;
  right: 0;
  top: 0;
}

.dapp-screen-login-row {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.dapp-screen-login-row-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 1rem;
}

.dapp-screen-login-value {
  display: inline-block;
  max-width: 60%;
  min-width: 60%;
  width: 60%;
}

.dapp-screen-match-bottom {
  align-items: center;
  bottom: 2rem;
  cursor: default;
  display: flex;
  flex-direction: row;
  font-size: var(--size-l3);
  font-weight: bold;
  justify-content: center;
  left: 2rem;
  padding: 0.5rem 0 0.5rem 0;
  position: absolute;
  right: 2rem;
  user-select: none;
}

.dapp-screen-match-bottom span {
  font-size: var(--size-l3);
  margin-right: 1rem;
}

.dapp-screen-match-bottom-ok {
  background-color: var(--lawn-green-900);
  color: var(--dark-green-900);
}

.dapp-screen-match-bottom-ok span {
  background-color: var(--lawn-green);
  border-radius: 2rem;
  padding: 0.5rem;
}

.dapp-screen-match-strategy-btn-row {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

.dapp-screen-match-strategy-label {
  display: inline-block;
  max-width: 35%;
  min-width: 35%;
  padding-right: 1rem;
  text-align: right;
  width: 35%;
}

.dapp-screen-match-strategy-row {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.dapp-screen-match-strategy-value {
  display: inline-block;
  max-width: 60%;
  min-width: 60%;
  width: 60%;
}

.dapp-screen-match-strategy-value select {
  max-width: 100%;
  min-width: 100%;
  width: 10%;
}

.dapp-screen-right {
  bottom: 2rem;
  left: 50%;
  overflow: hidden;
  padding: 0 0 0 2rem;
  position: absolute;
  right: 2rem;
  top: 17.5%;
}

.dapp-screen-right-with-bottom {
  bottom: 17.5%;
}

.dapp-screen-section-title {
  color: var(--dark-green-200);
}

.dapp-screen-tab {
  background-color: var(--dark-green);
  border-left: 0.01rem solid var(--dark-green-200);
  border-right: 0.01rem solid var(--dark-green-200);
  color: var(--lawn-green);
  padding: 0.25rem 0.6rem 0.25rem 0.6rem;
  transition: var(--default-transition);
}

.dapp-screen-tab:hover {
  background-color: var(--dark-green-400);
  color: var(--lawn-green-400);
}

.dapp-screen-tab-active {
  background-color: var(--lawn-green);
  color: var(--dark-green);
  transition: var(--default-transition);
}

.dapp-screen-tab-active:hover {
  background-color: var(--lawn-green-200);
  color: var(--dark-green-900);
}

.dapp-screen-tabs {
  border-bottom: 0.01rem solid var(--dark-green-200);
  cursor: default;
  display: flex;
  padding: 0.5rem 0 0 0;
}

.dapp-screen-team-bottom {
  bottom: 2rem;
  cursor: default;
  display: flex;
  flex-direction: row;
  font-size: var(--size-l5);
  gap: 2rem;
  justify-content: center;
  left: 2rem;
  position: absolute;
  right: 2rem;
  user-select: none;
}

.dapp-screen-team-color {
  background-color: var(--snow);
  border-radius: 0.75rem;
  color: var(--night);
  height: 2rem;
  max-height: 2rem;
  max-width: 2rem;
  min-height: 2rem;
  min-width: 2rem;
  width: 2rem;
}

.dapp-screen-team-demo {
  color: var(--battleship-gray);
  font-size: var(--size-l2);
  font-weight: 300;
  text-align: center;
}

.dapp-screen-team-jersey-nest {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  max-width: 5rem;
  min-width: 5rem;
  width: 5rem;
}

.dapp-screen-team-jersey-shirt {
  background-color: var(--snow);
  height: 2.5rem;
  mask-image: url('./src/shirt.png');
  mask-repeat: no-repeat;
  mask-size: contain;
  max-height: 2.5rem;
  max-width: 3rem;
  min-height: 2.5rem;
  min-width: 3rem;
  width: 3rem;
}

.dapp-screen-team-jersey-short {
  background-color: var(--snow);
  height: 2.5rem;
  mask-image: url('./src/short.png');
  mask-repeat: no-repeat;
  mask-size: contain;
  max-height: 2.5rem;
  max-width: 3rem;
  min-height: 2.5rem;
  min-width: 3rem;
  width: 3rem;
}

.dapp-screen-team-logo {
  align-items: center;
  background-color: var(--snow);
  border-radius: 0 0 2rem 2rem;
  color: var(--night);
  cursor: default;
  display: inline-flex;
  justify-content: center;
  height: 4rem;
  max-height: 4rem;
  max-width: 4rem;
  min-height: 4rem;
  min-width: 4rem;
  user-select: none;
  width: 4rem;
}

.dapp-screen-team-logo span {
  font-size: 3rem;
}

.dapp-screen-team-section-nest {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.dapp-screen-team-strategy-btn-row {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}

.dapp-screen-team-strategy-label {
  display: inline-block;
  max-width: 35%;
  min-width: 35%;
  padding-right: 1rem;
  text-align: right;
  width: 35%;
}

.dapp-screen-team-strategy-row {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.dapp-screen-team-strategy-value {
  display: inline-block;
  max-width: 60%;
  min-width: 60%;
  width: 60%;
}

.dapp-screen-team-strategy-value select {
  max-width: 100%;
  min-width: 100%;
  width: 10%;
}

.dapp-screen-title {
  align-items: center;
  cursor: default;
  display: flex;
  font-size: var(--size-l5);
  user-select: none;
}

.dapp-screen-title-buttons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  position: absolute;
  right: 2rem;
  top: 3rem;
}

.dapp-screen-title-symbol {
  align-items: center;
  border: 0.15rem solid var(--lawn-green);
  border-radius: 50%;
  color: var(--lawn-green);
  display: flex;
  font-size: var(--size-l2);
  height: var(--size-l3);
  justify-content: center;
  max-height: var(--size-l3);
  max-width: var(--size-l3);
  min-height: var(--size-l3);
  min-width: var(--size-l3);
  transition: var(--default-transition);
  width: var(--size-l3);
}

.dapp-screen-title-symbol:hover {
  border: 0.15rem solid var(--lawn-green-200);
  color: var(--lawn-green-200);
}

.dapp-screen-title-value {
  color: var(--lawn-green);
  margin-left: 1rem;
  margin-right: 1rem;
}

.rixel-cover {
  background-color: #00000080;
  height: 100%;
  left: 0;
  max-height: 100%;
  min-height: 100%;
  max-width: 100%;
  min-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  visibility: hidden;
  width: 100%;
  z-index: 200000;
}

.rixel-cursor-default {
  cursor: default;
}

.rixel-disable-select {
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.rixel-flip-horizontally {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.rixel-flip-vertically {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

.rixel-full-height {
  height: 100%;
  max-height: 100%;
  min-height: 100%;
}

.rixel-full-width {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}

.rixel-image-nest img {
  max-height: 100%;
  max-width: 100%;
}

.rixel-justify-text {
  text-align: justify;
}

.rixel-no-margin-and-padding {
  margin: 0;
  padding: 0;
}

.rixel-overflow-hidden {
  overflow: hidden;
}

.rixel-toast {
  background-color: #ffffff;
  border-radius: 0.5vmin;
  bottom: 5%;
  color: #000000;
  cursor: default;
  font-size: 0.5vmin;
  left: 50%;
  max-width: 33vw;
  min-width: 33vw;
  position: absolute;
  transform: translate(-50%, 0px);
  width: 33vw;
  z-index: 300000;
}

.rixel-toast-body {
  font-size: 1vw;
  font-weight: 600;
  padding: 1vmin;
}

/** -sm **/
@media (min-width: 576px) {

}

/** -md **/
@media (min-width: 768px) {

}

/** -lg **/
@media (min-width: 992px) {

}

/** -xl **/
@media (min-width: 1200px) {

}

/** -xxl **/
@media (min-width: 1440px) {

}