Advice generator app using Flexbox

Hey, It's nice I think you may consider updating it a little.

1.) For the Circule image you don't need to make it absolute since it's a part of the layout, put all the content in the main section. Just like that

In this main section, you don't need to do anything just do this -

give padding-left, right and top only leave the bottom; and make it flex and give it some gap

.main{ padding: top(px) right 0(For bottom) left; display: flex; flex-direction: column; gap: 10px; (or any that suits) }

for the mobiles - .main{ max-width: 90%; }

for the tables and bigger screens

.main{ max-width: 50%; }

<section" role="main" aria-roledescription="main section">

<p class="">advice #<span></span></p>

<img src="./images/pattern-divider-desktop.svg" alt="divider">

Over here you can give the padding to the .diceWrapper and then make it's radius 190px to make it a circle and then use transform: translateY(50%) or translateY(-50%); it will automatically be in the bottom of the section at it's middle point as it was in the design.

<div class="diceWrapper">
  <img class="diceImage animate-spin" src="./images/icon-dice.svg" alt="dice button">
</div>

</section>