#array {

  margin-top: 100px;

  min-width: min(300px, calc(100vw - 2rem));

  width: fit-content;

  max-width: calc(100vw - 2rem);

  min-height: min(300px, calc(100vw - 2rem));

  border: 0.25rem solid black;

  border-radius: 10%;

  font-size: clamp(3rem, 16vw, 8rem);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1rem 1.25rem;

  overflow: hidden;

  white-space: nowrap;

}



.ogrenme-display{

  min-width: min(300px, calc(100vw - 2rem));

  width: fit-content;

  max-width: calc(100vw - 2rem);

  min-height: min(300px, calc(100vw - 2rem));

  border: 0.25rem solid black;

  border-radius: 10%;

  font-size: clamp(3rem, 18vw, 10rem);

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1rem 1.25rem;

  overflow: hidden;

  white-space: nowrap;

}

.display{

  margin-top: 100px;

  min-width: min(300px, calc(100vw - 2rem));

  width: fit-content;

  max-width: calc(100vw - 2rem);

  min-height: min(300px, calc(100vw - 2rem));

  border: 0.25rem solid black;

  border-radius: 10%;

  visibility: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  overflow: hidden;
  flex: 0 0 auto;
}

.buttons-div{

  visibility: hidden;

}
.swiper-exercise-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}

.swiper-exercise-actions .btn {
  position: static !important;
  inset: auto !important;
  width: auto;
  height: auto !important;
  min-width: 92px;
  margin: 0 !important;
  transform: none !important;
}

.swiper-exercise-actions .btn::after {
  display: none;
}

.coming-soon-title {
  display: block;
  max-width: 100%;
  font-size: clamp(2.75rem, 12vw, 6rem);
  line-height: 1.15;
  overflow-wrap: break-word;
}



#showarray{

  margin-top: 0;

  font-size: clamp(3rem, 18vw, 150px);

  font-weight: bold;

  line-height: 1;

  white-space: nowrap;

  width: max-content;

  max-width: 100%;

}



#showarray-kelime{
  width: max-content;
  max-width: 100%;
  font-size: clamp(1.75rem, 10vw, 75px);
  line-height: 1.1;
  font-weight: bold;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}



.array-form {

  /* margin-top: 200px; */

  visibility: hidden;

}



.result {

  display: none;

}



@media (max-width: 460px) {

  .col-xs-4 {

    width: 33%;

  }

}



.fcl {

  width: auto;

  height: 2rem;

  line-height: 1.5rem;

  color: #932A48;

  font-size: large;

  font-weight: bolder;

  background-color: #DB91AA;

  border: 2px solid #932A48;

  border-radius: 0.5rem;

}



.fcs {

  width: auto;

  height: 2rem;

  line-height: 1.5rem;

  color: #932A48;

  font-size: large;

  font-weight: bolder;

  background-color: #DB91AA;

  border: 2px solid #932A48;

  border-radius: 1rem;

}



.fci {

  display: none;

}



.fch {

  text-align: initial;

  color: #932A48;

  font-size: large;

  font-weight: bolder;



}



.fci:checked+.fcl {

  background-color: #932A48;

  color: white;

}



.fcr {

  display: none;

}



.fcr:checked+.fcs {

  background-color: #932A48;

  color: white;

}

.result-correct{

  background-color: green;

  color: white;

  font-size: 36pt;

  font-weight: bold;

  padding: 10px;

  border-radius: 5%;

}

.result-wrong{

  background-color: red;

  color: white;

  font-size: 36pt;

  font-weight: bold;

  padding: 10px;

  border-radius: 5%;

}



.grey-bg{

  background-color: rgb(206, 206, 206);

  height: 33%;

}

.form-select {

  --bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);

  display: block;

  width: 100%;

  padding: .375rem 2.25rem .375rem .75rem;

  font-size: 1rem;

  font-weight: 600;

  line-height: 1.5;

  color: var(--bs-body-color);

  background-color: var(--bs-body-bg);

  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);

  background-repeat: no-repeat;

  background-position: right .75rem center;

  background-size: 16px 12px;

  border: var(--bs-border-width) solid #a52174;

  border-radius: var(--bs-border-radius);

  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}

img.img {
  max-width: min(220px, 70vw);
  height: auto;
}

@media (max-width: 576px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .container {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .row {
    margin-left: 0;
    margin-right: 0;
  }

  .row > * {
    padding-left: .35rem;
    padding-right: .35rem;
  }

  .row > [class*="col-"].m-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: .25rem !important;
    margin-bottom: .25rem !important;
  }

  .my-5 {
    margin-top: .85rem !important;
    margin-bottom: .85rem !important;
  }

  .mt-5 {
    margin-top: .85rem !important;
  }

  .mb-5 {
    margin-bottom: .85rem !important;
  }

  .mb-3 {
    margin-bottom: .45rem !important;
  }

  .py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  img.img {
    max-width: min(140px, 50vw);
  }

  h4 {
    font-size: .98rem;
    margin-bottom: .25rem;
    text-align: center;
  }

  h2 {
    font-size: 1.35rem;
  }

  .btn-lg {
    font-size: 1rem;
    padding: .5rem .75rem;
  }

  .btn {
    white-space: normal;
  }

  .row .col-4.text-center.mt-3 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row .col-4.text-center.mt-3 > .btn {
    min-width: 92px;
    white-space: nowrap;
  }

  .form-control,
  .form-select {
    max-width: 100%;
  }

  .text-center > .btn,
  .text-center > button.btn,
  .text-center > a.btn {
    margin-top: .25rem;
    margin-bottom: .25rem;
  }

  .fcl,
  .fcs {
    height: auto;
    min-height: 1.85rem;
    line-height: 1.2;
    padding: .25rem .48rem;
    margin: .15rem !important;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #array,
  .display,
  .ogrenme-display {
    margin-top: 1.25rem;
    min-width: min(260px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    min-height: min(260px, calc(100vw - 2rem));
    padding: .75rem 1rem;
    border-width: .2rem;
  }

  #showarray {
    font-size: clamp(2.5rem, 16vw, 120px);
  }

  #showarray-kelime {
    font-size: clamp(1.5rem, 9vw, 64px);
  }

  .result-correct,
  .result-wrong {
    font-size: clamp(1.5rem, 10vw, 2.4rem);
    margin: .5rem 0 !important;
  }

  .input-group-lg > .form-control,
  .input-group-lg > .input-group-text {
    font-size: 1rem;
  }

  .swiper-exercise-actions {
    gap: .4rem;
    margin-top: .75rem;
  }

  .swiper-exercise-actions .btn {
    flex: 1 1 42%;
    max-width: 160px;
    min-width: 0;
  }
}