@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;400;500;700&display=swap');
:root {
    --debug: 1px solid red;
}

*, body {
    box-sizing: border-box;
    font-size: 22px;
    font-weight: 400;
    font-family: 'Source Code Pro', monospace;
    
    color: hsl(242,24%,43%);


}
main {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    text-align: center;
    min-height: 100vh;
    /* outline: var(--debug); */
}

h1{
    color: hsl(180,89%,49%);
    font-size: 3em;
    margin-top: 0;
    font-weight: 700;

}
.game-dets {
    box-shadow: -16px 13px 48px 2px rgba(0,0,0,0.19);
-webkit-box-shadow: -16px 13px 48px 2px rgba(0,0,0,0.19);
-moz-box-shadow: -16px 13px 48px 2px rgba(0,0,0,0.19);
    flex: 2;
    margin-right: 2em;
    margin-bottom: 2em;
    padding: 2em;
    border-radius: 1em;
    margin-left: 2em;
}
button {
    margin-top: 1em;
    padding: 2%;
}
.img {
    width: 55%;
}
img {
    object-fit: contain;
}

@media screen and (max-width: 800px) {
    .img {
        display: none;
    }
    .game-dets{
        margin: auto;
        min-height: 100vh;
    }
  }

  @media screen and (max-width: 1000px){
      main {
          flex-direction: column-reverse;
      }
      .game-dets{
        margin: auto;
    }
  }