@tailwind base;

@tailwind components;

@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');


@media only screen and (max-width: 600px) {
    body {
        background-image: url("images/pattern-background-mobile.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        font-family: 'Red Hat Display', sans-serif;
    }
}

body {
    background-image: url("images/pattern-background-desktop.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    font-size: 16px;
   }

   h1 {
       font-weight: 900;
   }

   h2 {
       font-weight: 700;
   }

   #order-item {
       background-color: hsl(225, 100%, 98%);
   }
   button {
        background-color: hsl(245, 75%, 52%);
        font-weight: 700
   }
   button:hover {
       background-color: hsl(224, 23%, 55%);
   }
   #change-link a:hover {
       text-decoration: none;
       color:hsl(224, 23%, 55%);
   }
   #cancel a {
       font-weight: 700;
   }