body {
      font-family: Arial, sans-serif;
      /* margin: /*20px*/1.25em;*/
      background-color: #f9f9f9;
      color: #333;
    }
    /*h1 {
      color: #4CAF50;
    }
    h2 {
      color: #333;
    }
	*/
	
	
    .faq-section {
      margin-bottom: /*15px*/10px;
      padding: 10px 5px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #fff;
    }
	
    .faq-question {
      font-weight: bold;
	  /*font-size: 24px;*/
	  font-size: 16px;
    }
    .faq-answer {
      margin-top: 5px;
	  /*font-size: 24px;*/
	  font-size: 16px;
	  margin-top: 10px;
    }


.serif {
  font-family: "Libre Baskerville", serif;
}

body {
  display: block;
  overflow: auto;
  padding: 0;
  margin: 1.25em;
}
body #app {
  height: /*100*/50vh;
  /*width: 100vw;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: /*100*/40vh;
  background: #202225;
  color: white;
  font-family: "Poppins", sans-serif;
  padding-top: 10px;
}
body #app #input {
  margin-bottom: 2rem;
  font-size: /*1.5rem*/ 3rem;
}
body #app #input input {
  border: none;
  background: none;
  text-align: center;
  width: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  background: #2f3136;
  color: white;
  outline: none;
  box-shadow: inset 0 0 0px #565960;
  transition: 0.25s -0.1s;
  text-transform: uppercase;
  font-size: 56px;
}
body #app #input input:focus {
  box-shadow: inset 0 0 2px #565960;
}

body #app #romannumerals {
    display: flex;
    font-size: 4rem;
    padding: 0 0 0.5em 0;
}


body #app #romannumerals > div {
  --color: white;
  position: relative;
  border: 2px solid var(--color);
  padding: 0 0.5rem;
  border-radius: 1rem;
  margin: 0 0.25rem;
  margin-bottom: 1rem;
}
body #app #romannumerals > div:nth-last-child(1) {
  --color: #ffce54;
}
body #app #romannumerals > div:nth-last-child(2) {
  --color: #2ecc71;
}
body #app #romannumerals > div:nth-last-child(3) {
  --color: #5d9cec;
}
body #app #romannumerals > div:nth-last-child(4) {
  --color: #ed5565;
}
body #app #romannumerals > div.error {
  --color: #d8334a;
}
body #app #romannumerals > div[data-title] {
  border-bottom-left-radius: 0;
}
body #app #romannumerals > div[data-title][data-title="0"] {
  display: none;
}
body #app #romannumerals > div[data-title]:after {
  content: attr(data-title);
  position: absolute;
  font-size: 1rem;
  top: 100%;
  left: -2px;
  padding: 0.1rem 0.5rem;
  border-radius: 0 0 0.25rem 0.25rem;
  background: var(--color);
  color: #202225;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}
body #app #result {
  margin-top: 1rem;
  font-size: 2rem;
}
body #app #result:before {
  content: "= ";
}

h1 {
  /* height: 50vh;*/
  /*width: /*100vw;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*min-height: /*40vh;*/
  background: #202225;
  color: white;
  /*font-family: "Poppins", sans-serif;*/
  font-family: "Libre Baskerville", serif;
  padding: 1rem 1rem;
  font-size: 1.5em;
}



h2 {
    font-size: 1.25em;
}



/* Mobil cihazlar için */
@media screen and (max-width: 768px) {
body #app {
    height: 30vh; /* Mobil cihazlar için daha küçük bir yükseklik */
    min-height: 20vh; /* Minimum yüksekliği azaltıldı */
    background: #202225;
    color: white;
    font-family: "Poppins", sans-serif;
	padding: 20px 10px 20px 10px;
  }
  
  body #app #input input {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
  font-size: 32px;
  width: 98%;
  
}

body #app #romannumerals {
    font-size: 1.75rem;
}

body #app #result {
    font-size: 1.75rem;
	padding-bottom: 10px;
    margin-bottom: 5px;
}


h2 {
    font-size: 1em;
}


h1 {

    padding: 0.5rem 0.5rem;
}

body {
    margin: 0.25em 0.5em;

}


}

/*erişilebililik için*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}