/* [ConnectEmo] - Jeu de cartes en ligne
 * Mina Pêcheux (2020)
 * ------------------------------------------------
 * export-screen.css - Styles for the export screen
 */

 .export-text {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  color: #f5f5f5;
}

.export-textarea {
  width: 100%;
  height: 120px;
  resize: none;
  margin-top: 8px;
  border-radius: 2px;
}

.export-grid-even {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.export-grid .export-img {
  margin: 0 auto !important;
}

.export-textarea-grid {
  grid-column: span 2;
  display: grid;
  place-items: center;
  font-size: 1.4em;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .export-img {
    width: 80vw;
    height: auto;
  }

  .export-text {
    font-size: 16px;
    top: calc(0.7012 * 80vw - 20px);
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .export-img {
    width: 80vw;
    height: auto;
  }

  .export-text {
    font-size: 24px;
    top: calc(0.7012 * 80vw - 32px);
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .export-img {
    width: 60vw;
    height: auto;
  }

  .export-text {
    font-size: 24px;
    top: calc(0.7012 * 60vw - 32px);
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .export-img {
    width: 40vw;
    height: auto;
  }

  .export-text {
    font-size: 24px;
    top: calc(0.7012 * 40vw - 32px);
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .export-img {
    width: 33vw;
    height: auto;
  }

  .export-text {
    font-size: 24px;
    top: calc(0.7012 * 40vw - 32px);
  }
}

.export {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0;
}

@media only screen and (max-width: 600px) {
  .export-grid-even {
    display: block;
  }
}

@media only screen and (min-width: 600px) {
  .export-grid-even {
    grid-gap: 16px;
  }
}

@media only screen {
  .export-grid-even {
    grid-gap: 16px;
  }

  .export-logo {
    margin-bottom: 16px;
  }

  .export-img {
    margin-bottom: 16px !important;
  }
}