@charset "UTF-8";

*{
   font-family:'Outfit', 'Courier New', Courier, monospace;
}
@font-face {
   font-family: 'YoungSeri';
   src: url('fonts/young-serif/YoungSerif-Regular.ttf') format('TrueType');
}
@font-face {
   font-family: 'Outfit';
   src: url('fonts/outfit/Outfit-VariableFont_wght.ttf') format('TrueType');
}
h1, h2{
   font-family: 'YoungSeri', 'Courier New', Courier, monospace;
   font-weight: 300
}
p, td, span{
   color: hsl(30, 10%, 34%);
}
p{
   margin: 25px 0px ;
   font-size: 16px;
   font-weight: 400;
}
h2 {
   color: hsl(14, 45%, 36%);
   margin: 22px 0px 10px 0px;
}
h4, #purple{
   color: hsl(332, 51%, 32%);
}
ul, ol{
   margin-left: -18px;
}
strong{
   color: hsl(24, 5%, 18%);
}
.brown{
   color: hsl(14, 45%, 36%);
   margin-bottom: 20px;
}
table {
   border-collapse: collapse; 
   width: 100%; 
}
td{
   padding: 10px 0px 10px 40px;
   border-bottom: 1px solid #ddd; 
}
#this> td {
   border: none;
}
.num{
   color: hsl(14, 45%, 36%);
   font-weight: 600;
}
@media (min-width:540px) {
   body{
      background-color: hsl(30, 54%, 90%);
   }
   main{
      background-color: white;
      max-width: 700px;
      padding: 40px;
      border-radius: 20px;
      margin: 5% auto;
   }
   img{
      width: 100%;
      border-radius: 20px;
   }
   section{
      background-color: hsl(330, 100%, 98%);
      padding: 1px 25px ;
      border-radius: 10px;
   }
   h4{
      margin-bottom: 0%;
   }
   section ul{
      margin-top: 5px;
   }
   li{
      padding: 10px 20px;
   }
}
@media (max-width:540px) {
   *{
      margin: 0%;
   }
   div{
      padding: 30px;
   }
   img{
      width: 100%;
   }
   h1{
      line-height: 1em;
   }
   section{
      background-color: hsl(330, 100%, 98%);
      padding: 20px;
      border-radius: 10px;
   }
   h4{
      font-size: 19px;
   }
   h4, #purple{
      color: hsl(332, 51%, 32%);
   }
   li{
      padding: 10px 20px;
   }
}