@import url("./css.css?family=PT+Sans|Oswald");
@import url("./css2.css?family=Bebas+Neue&family=Fira+Sans+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;300;400;700;900&family=Oswald:wght@200;300;400;500;600;700&family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@100;300;400;500;700;900&display=swap");
* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  padding: 1rem;
  background: #eee;
  font-size: 16px;
  line-height: 1.5em;
  font-family: "PT Sans";
}

.artbord {
  display: flex;
  justify-content: space-evenly;
}
.artbord .screen {
  width: 350px;
  height: 500px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2), inset 1px 1px 1px rgba(255, 255, 255, 0.6), inset -1px -1px 1px rgba(12, 13, 18, 0.06), -1px -1px 1px 0px rgba(255, 255, 255, 0.6), -1px -1px 4px 0px rgba(255, 255, 255, 0.6), -2px -2px 8px 0px rgba(255, 255, 255, 0.6), 1px 1px 1px 0px rgba(12, 13, 18, 0.06), 1px 1px 4px 0px rgba(12, 13, 18, 0.06), 2px 2px 8px 0px rgba(12, 13, 18, 0.06), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.19), 0 0.3rem 0.3rem -0.1rem rgba(0, 0, 0, 0.23);
  background: #f0f2f4;
}
.artbord .screen .top {
  width: 100%;
  background-image: linear-gradient(to top right, #ea0095, #ff1ead, #ff51c0);
  height: 40%;
  display: flex;
  flex-direction: column-reverse;
  padding: 0em 1em 0.5em 1.5em;
}
.artbord .screen .top h3 {
  font-size: 1.5em;
  font-family: "Oswald";
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffe2f4;
  text-shadow: 0.5px 0.5px 0.5px rgba(77, 77, 77, 0.45);
}
.artbord .screen .bottom {
  overflow: auto;
  width: 100%;
  padding: 0em 1em 0.5em 1.5em;
}
.artbord .screen .bottom dt {
  color: #292929;
  /*font-size: 1.15em;*/
  position: relative;
  letter-spacing: 0.2em;
  color: #787878;
  text-transform: uppercase;
}
.artbord .screen .bottom dt::before {
  content: "";
  position: absolute;
  bottom: -2px;
  border-bottom: 3px solid #ff99f3;
  width: 1.25em;
}
.artbord .screen .bottom dd {
  margin-left: 0.5em;
  margin-right: 1.5em;
  padding-left: 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-left: 3px dotted #ffccf9;
}
.artbord .screen .bottom .flight {
  color: #787878;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}
.artbord .screen .bottom .flight .time {
  font-size: 1.5em;
}
.artbord .screen .bottom .flight .location {
  letter-spacing: 0.2em;
}
.artbord .screen .bottom ul {
  flex-grow: 3;
  height: 2px;
  background-color: #ffe2f4;
  list-style: none;
  padding-left: 0px;
}
.artbord .screen .bottom ul li {
  margin-left: 50%;
  margin-top: calc(-1.5em / 2 + 2px);
}
.artbord .screen .bottom i {
  color: #ff51c0;
  padding-left: 3px;
  padding-right: 3px;
  background: #fff;
}

.artbord .screen .top {
  width: 100%;
  background-image: linear-gradient(to top right, #ea0095, #ff1ead, #ff51c0);
  height: 40%;
  display: flex;
  flex-direction: column-reverse;
  padding: 0em 1em 0.5em 1.5em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2), inset 1px 1px 1px rgba(255, 255, 255, 0.6), inset -1px -1px 1px rgba(12, 13, 18, 0.06), -1px -1px 1px 0px rgba(255, 255, 255, 0.6), -1px -1px 4px 0px rgba(255, 255, 255, 0.6), -2px -2px 8px 0px rgba(255, 255, 255, 0.6), 1px 1px 1px 0px rgba(12, 13, 18, 0.06), 1px 1px 4px 0px rgba(12, 13, 18, 0.06), 2px 2px 8px 0px rgba(12, 13, 18, 0.06);
  border-color: #b70074;
  background-image: url(../img/mybg2.jpg);
  background-position: 0% 5%;
}

li {
  counter-increment: cupcake;
  margin-left: -2pt;
  line-height: 17pt;
  margin-bottom: 10pt;
  margin-top: 2pt;
  font-size: 11pt;
}

ol li::marker {
  content: none;
}

ol li::before {
  content: counter(cupcake);
  display: inline-flex;
  width: 18pt;
  height: 18pt;
  border-radius: 20px;
  align-items: center;
  font-weight: 700;
  font-size: 15px;
  justify-content: center;
  margin-left: -24pt;
  margin-right: 4.5pt;
  vertical-align: bottom;
  margin-bottom: -2px;
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 700;
  color: #ff99f8;
  box-shadow: 0.125em 0.125em 0.125em 0px rgba(255, 230, 247, 0.75) inset, -0.125em -0.125em 0.125em -0.125px rgba(85, 27, 126, 0.75) inset, 0.025em 0.1em 0.25em -0.5px #515152, -0.1em -0.1em 0.125em 1.25px white;
  background: linear-gradient(145deg, rgba(252, 252, 253, 0.5), rgba(229, 230, 235, 0.5));
  text-shadow: 0.5px 0.5px 0.5px rgba(77, 77, 77, 0.75), 0 0 1px rgba(255, 26, 56, 0.5), 0 0 0.5px rgba(255, 26, 143, 0.5), 0.25px 0.25px 2px #333333;
  color: white !important;
  font-family: "Fira Sans Condensed";
  font-family: "Lato";
  font-weight: 800;
  font-size: 11pt !important;
  background-image: url(../img/raindrops-5470467_1280.jpg);
  background-size: 540%;
  background-position: 45% 83%;
  border: 1px solid rgba(241, 242, 244, 0.5);
}

.artbord .screen .top h3 {
  font-size: 32px;
  font-family: "Oswald";
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffe2f4;
  text-shadow: 1.5px 2.5px 2.5px #0e101a;
  color: #ff3da1;
  text-shadow: -1px -1px 0 rgba(242, 242, 242, 0.85), 1px 1px 0 rgba(0, 0, 0, 0.25), 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.25), 1.5px 1.5px 2.5px rgba(0, 0, 0, 0.5), 2.5px 5px 5px rgba(0, 0, 0, 0.5), 1.5px 1.5px 2.5px #1a1a1a;
  line-height: 36px;
  font-family: "Roboto";
  font-weight: 900;
}