@import url(fonts/fonts.css);

* {
    box-sizing: border-box;
}

body {
    font-family: LexingtonGothic, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

button {
  font-family: LexingtonGothic, sans-serif;
  font-size: 14px;
  padding: 7px;
}

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 1024px;
}

a {
    color: white;
}

#card {
    font-family: "Apple Color Emoji", AppleColorEmoji, Emoji;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 20px;
    font-size: 40px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    animation: bounce 2s normal;
    width: 512px;
    height: 512px;
    overflow: hidden;
    margin: 1rem;
}

@media screen and (orientation: portrait) and (max-width: 512px) {
  #card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.panel {
  margin: 1rem;
  overflow: hidden;
  text-align: center;
  border: 1px solid black;
  width: 512px;
}

@media screen and (max-width: 512px) {
  .panel {
    width: 100%;
    min-height: 342px;
    height: auto;
  }
  .title {
    width: 100%;
  }
}

.title {
  border-bottom: 1px solid black;
  color: white;
  background: linear-gradient(
    to right,
    white 0px 145px,
    black 145px 146px,
    white 146px 147px,
    black 147px 148px,
    white 148px 149px,
    black 149px 151px,
    white 151px 152px,
    black 152px 155px,
    white 155px 156px,
    black 156px 356px,
    white 356px 357px,
    black 357px 360px,
    white 360px 361px,
    black 361px 363px,
    white 363px 364px,
    black 364px 365px,
    white 365px 366px,
    black 366px 367px,
    white 367px 512px
  );
  background-size: 512px 100%;
  background-position: center;
  padding: 4px;
}

.controls {
  border-top: none;
  min-height: 342px;
  text-align: left;
}

.controls label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 2rem;
  padding-bottom: 0;
  color: #333;
}

.controls label span {
  width: 96px;
}

.controls button {
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}


input[type="number"] {
  width: 5em;
}


dialog {
  text-align: center;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 7pt;
}