/* custom fonts */

      @font-face {
      font-family: ChampagneCartel;
      src: url(fonts/ChampagneCartelRegular.woff2);
      }
      
      @font-face {
      font-family: DiscoDeco;
      src: url(fonts/DiscoDecoRegular.woff2);
      }
      
      @font-face {
      font-family: SunlinerRevival;
      src: url(fonts/SunlinerRevivalRegular.woff2);
      }
      
/* css style */
      
      body {
      background-color: #FFFFF0;
      }
      
      .header {
      display: flex;
      height: 400px;
      flex-direction: column;
      justify-content: center;
      border: none;
      align-items: center;
      font-family: "ChampagneCartel", Georgia, serif;
      color: #333333;
      text-align: center;
      }  

      .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: none;
      align-items: center;
      font-family: "ChampagneCartel", Georgia, serif;
      color: #333333;
      text-align: center;
      }
      
      ul {
      list-style-type: none;
      display: flex;
      flex-direction: row;
      padding: 0;
      gap: 10px;
      color: #333333;
      }
      
      li {
      display: inline;
      font-size: 24px;
      font-family: "ChampagneCartel", Georgia, serif;
      }
      
      .scalloped-box {
      --r: 25px; /* radius of circles */
      height: 320px;
      aspect-ratio: 1;
      padding: calc(1.5*var(--r));
      background: #A0522D;
      mask: 
      linear-gradient(#000 0 0) no-repeat
      50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)), 
      radial-gradient(farthest-side,#000 97%,#0000) 
      0 0/calc(2*var(--r)) calc(2*var(--r)) round;
      }
 
/* fake image */

      .fakeimg {
      background-color: #aaa;
      width: 100%;
      height: 200px;
      padding: 20 0 20 0;
      }
      
      .image-container {
      width: 100%;
      height: 200px;
      padding: 20 0 20 0;
      }

      .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      }
      
/* add a card effect for articles */

      .card {
      width: 50%;
      padding: 0px;
      margin-bottom: 20px;
      }

/* clear floats after the columns */

      .row:after {
      content: "";
      display: table;
      clear: both;
      }

/* links*/

      a:link {
      color: #A0522D;
      background-color: transparent;
      text-decoration-line: none;
      }
      
      a:visited {
      color: #A0522D;
      background-color: transparent;
      text-decoration-line: none;
      }
      
      a:hover {
      color: #CD853F;
      background-color: transparent;
      text-decoration-line: underline;
      text-decoration-style: wavy;
      }
      
      a:active {
      color: #808000;
      background-color: transparent;
      text-decoration-line: none;
      }
      
      a2:link {
      color: #FFFFF0;
      background-color: transparent;
      text-decoration-line: none;
      }
      
      a2:hover {
      color: #FFE4B5;
      background-color: transparent;
      text-decoration-line: underline;
      text-decoration-style: wavy;
      }

/* text */

      h1 {
      display: block;
      font-size: 50px;
      margin: 0 0 0 0;
      font-weight: bold;
      font-family: "ChampagneCartel", Georgia, serif;
      }
      
      h2 {
      display: block;
      text-align: left;
      font-size: 24px;
      margin: 10 0 10 0;
      font-weight: bold;
      font-family: "ChampagneCartel", Georgia, serif;
      color: #333333;
      }
      
      h3 {
      display: block;
      font-size: 24px;
      margin: 10 0 10 0;
      font-weight: bold;
      font-family: "ChampagneCartel", Georgia, serif;
      color: #FFFFF0;
      }
      
      h4 {
      display: block;
      font-size: 24px;
      margin: 0 0 0 0;
      font-weight: normal;
      font-family: "ChampagneCartel", Georgia, serif;
      color: #333333;
      }
      
      p {
      text-align: left;
      font-size: 14px;
      font-family: Verdana, sans-serif;
      }
      
      p1 {
      font-size: 14px;
      font-family: Verdana, sans-serif;
      color: #FFFFF0;
      }
      
      p2 {
      font-size: 18px;
      font-family: "ChampagneCartel", Georgia, serif;
      text-align: center;
      color: #333333;
      }

/* footer */

      .footer {
      padding: 20px;
      text-align: center;
      background: none;
      margin-top: 10px;
      }