@import url(https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    background-color: hsl(275, 100%, 97%);
}

 .attribution {
     font-size: 11px;
     text-align: center;
     margin-top: 65vh;
 }

 .attribution a {
     color: hsl(228, 45%, 44%);
 }


 header {
    width: 100%;
    height: 240px;
    background: url(../assets/images/background-pattern-desktop.svg);
 }

 main {
    width: 50%;
    height: auto;
    padding: 20px;
    margin-top: -15vh;
    border-radius: 10px;
    background-color: hsl(0, 100%, 100%);
    position: absolute;
    left: 25%;
  

 }

  h2 {
       font-family: 'work sans', Arial, Helvetica, sans-serif;
       font-size: 2rem;
       font-weight: 700px;
       margin-bottom: 20px;
       color: #000;
        
  }

  h3 {
         
   
        font-family: 'work sans', Arial, Helvetica, sans-serif;
        font-weight: 600;
        font-size: 15px;
        margin: 10px 0 20px 0;
   
    
         
  }

.active {
     color: hsl(293, 88%, 47%);
      font-size: 17px;
      cursor: pointer;
  }

   h3 a:hover {  
    color: hsl(293, 88%, 47%);
     font-size: 17px;
     cursor: pointer;
   }

 h3 a:focus{
    color: hsl(293, 88%, 47%);
    font-size: 17px;
    cursor: pointer;
   
 
  }

  h3 a {
    color: #000;
    text-decoration: none;
  }

 p {
         width: 80%;
        font-size: 16px;
        color: hsl(292, 16%, 49%);
        font-weight: 400;
        margin-bottom: 20px;
  }

  hr {
      
      border-color: hsla(293, 16%, 49%, 0.241);
      margin: 10px 0 10px 0;
  }

  .faq{
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1fr ;
     grid-column-gap: 15%;
  }

  .faq h3 {
    grid-column: span 3;
  }

  .faq p {
    grid-column: span 4;
  }

  /* icons */

  .star-icon {
    margin-right: 10px;
  }

 
  .hidden-icon {
    display: none;
  }

  .hidden {
    visibility: hidden;
    display: none;
  }

.fade-text {
    opacity: 0;
    animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (min-width: 320px) and (max-width: 580px) {
  
    header {
            width: 100%;
            height: 300px;
            background: url(../assets/images/background-pattern-desktop.svg);
        }

    main {
            width: 80%;
            height: auto;
            padding: 20px;
            margin-bottom: 5%;
            border-radius: 10px;
            background-color: hsl(0, 100%, 100%);
            position: absolute;
            top: 30vh;
            left: 10%;
    
    
        }

.attribution {
    font-size: 11px;
    text-align: center;
    margin-top: 65vh;
}
}