/* `lg` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 991.98px) {
    h1{
        font-size: 2rem;
    }
    p{
        font-size: 1rem;
    }
}

body{

    background-color: #1F1E25;
}

img{
    width: 100%;
    height: auto;
}

span{
    color: #353535;
}

#container{
    margin: 0 auto;
    max-width: 750px;
    text-align: center;
}


.flex-container{
    display: flex;
    flex-direction: row;
    gap: 5px;
}


.box{
    width: 50%;
}
.box2{
    width: 50%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

/* Use media query and show the flex items vertically if screen width is less than 600px */
@media screen and (max-width:600px) {
  div.flex-container {
    flex-direction: column;
  }
  .box{
    width: 100%;
}
  .box2{
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
}