@font-face {
    font-family: Century-gothic;
    src: url(fonts/CenturyGothic.ttf);
  }

  @font-face {
    font-family: Valty-demo;
    src: url(fonts/Valty\ DEMO.otf);
  }

h2, h3 {
    font-family: Valty-demo;
}

p, a {
    font-family: Century-gothic;
}

a:link {
    color: #06141B;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #CCD0CF;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    border-radius: 50px;
    padding: 20px;
    margin-bottom: 20px;
    font-family: Valty-demo;
    font-size: large;

}


  /* .accordion-box { margin: 50px, 50px, 50px, 20px; } */
.accordion-box {
    margin-top: 30px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
}
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #CCD0CF;
}

  /* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: #CCD0CF;
    display: none;
    overflow: hidden;
    margin-bottom: 20px;
}