@import "@/common/styles/colors"

.analyse-area
  margin-top: 2rem
  display: flex
  padding: 3rem 2rem
  border: $darker-white 1px solid
  border-radius: 15px
  width: 80rem
  flex-wrap: wrap
  transition: all 0.5s
  animation: fadeIn 0.5s

.pulse
  border: $green 2px solid
  animation: pulse 2s infinite

@keyframes pulse
  0%
    box-shadow: 0 0 0 0 #14AB37FF
  70%
    box-shadow: 0 0 0 10px #CCA92C00
  100%
    box-shadow: 0 0 0 0 #CCA92C00

.inner-container
  margin-left: 2rem
  margin-right: 2rem
  transition: all 0.5s
  animation: fadeIn 0.5s

.container-header
  display: flex

.tests-paused
  border: $orange 2px solid

.container-text
  margin: 0 0 0 25px
  color: $white
  font-weight: 700
  font-size: 24pt

.container-subtext
  color: $subtext
  font-size: 16pt
  margin-left: 5px

.container-main
  text-align: center
  color: $darker-white

  h2
    font-size: 28pt
    font-weight: 900
    margin: 1rem

@media (max-width: 1351px)
  .inner-container
    margin-left: 1rem
    margin-right: 1rem
  .analyse-area
    width: 70rem

@media (max-width: 1200px)
  .mobile-break
    width: 100%
  .analyse-area
    justify-content: space-evenly
    width: 60rem

@media (max-width: 1050px)
  .analyse-area
    width: 40rem

@media (max-width: 730px)
  .analyse-area
    flex-direction: column
    width: 32rem

@media (max-width: 605px)
  .analyse-area
    width: 25rem

@media (max-width: 475px)
  .analyse-area
    padding-left: 1rem
    padding-bottom: 1rem
    padding-top: 1rem
    width: 18rem
  .inner-container
    margin: 0

@media (max-width: 360px)
  .analyse-area
    width: 16rem