* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
}

  body {
      height: 100vh;
      background-image: url(/img/70.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      color: white;

  }


  .card-container {
      background-color: none;
      display: flex;
      flex-direction:column;
      justify-content: center;
      align-content: center;
      padding: 4rem;
      height: 100vh;

  }

  .elements {
      display: flex;
      flex-direction: row;
      align-content: center;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
  }

  .temperature-degree {
      font-size: 2pxrem;
  }

  .location-timezone {
      font-size: 1.5rem;
      font-weight: 500;
  }

  img {
      width:70px
  }

  .temperature {
      display: flex;
      align-items: center;
  }

  .degree-container {
      justify-content: center;
      display: flex;
  }

  .temperature-degree {
      font-size: 3rem;
  }


  .time {
      font-size: 8rem;
      font-family: 'Odibee Sans', sans-serif;
     text-align: center;
  }
  @media screen and (orientation:portrait) and (max-width: 768px) {

    body {
        height:100vh;
    }
    .card-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: left;
        width: 50;
        top: auto;
        height: 100vh;


  }
  .location {
    display: flex;
      flex-direction: column;
}
}