pages.css

@font-face {
    font-family: 'cornerstoneregular';
    src: url('cornerstone-font-kit/cornerstone-webfont.woff2') format('woff2'),
         url('cornerstone-font-kit/cornerstone-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    background-color: snow;
    scroll-behavior: smooth;
}

.ARROWS{
    padding-top: 0.5vw;
}
header{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    top: 0;
    background-color: snow;
    position: fixed;
    filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.161));
}
.HOMEBUTTON{
    padding-top: 2.5vw;
}
#featured{
    font-family: 'cornerstoneregular';
    padding-left: 1vw;
    padding-bottom: 2vw;
}
.PAGE_TITLE {
    font-size: 7vw;
    padding-top: 2vw;
    padding-bottom: 1.8vw;
}
nav a{
    font-family: 'cornerstoneregular';
    text-decoration: none;
    padding-top: 4vw;
}
.BODYNAV a{
  text-decoration: none;
  font-family: 'cornerstoneregular';
  text-shadow: -0.25vw -0.18vw black;
}
img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 25px 25px 0px 0px;
}
.wrapper {
    width: 100%;
    margin: 200px auto;
    padding-right: 15%;
    padding-left: 15%;
    padding-top: 9vw;

}
.cards_wrap {
    display: flex;
    flex-wrap: wrap;
}

.cards_wrap .ALL {
    width: 33%;
    padding: 10px;
}

.cards_wrap .card_inner {
    border-radius: 25px;
    background:white;
    box-shadow: 5.7px 4px 15px rgba(128, 128, 128, 0.2);
}
.cards_wrap .card_top {
    width: 100%;
    min-height: 225px;
    padding-bottom: 0;
}
.cards_wrap .card_bottom .card_info {
    padding: 25px;
    background: white;
    border-radius: 25px;
    font-family: 'IBM Plex Sans', sans-serif;
}
.cards_wrap .feat_info {
    padding: 25px;
    background:white;
    border-radius: 0px 0px 25px 25px;
    color: black;
    font-family: 'IBM Plex Sans', sans-serif;
}
.cards_wrap .feat_info .title {
    font-size: 2.3vw;
    margin-bottom: 5px;
    text-decoration: none;
    font-family: 'cornerstoneregular';
}
.cards_wrap .feat_info .title:hover {
    text-decoration: underline;
}
.cards_wrap .card_bottom .card_info .title {
    font-size: 2.3vw;
    margin-bottom: 5px;
    font-family: 'cornerstoneregular';
}
.cards_wrap .card_bottom .card_info .title:hover {
    text-decoration: underline;
}
.location {
    word-spacing: -0.3em;
    font-size: 1.4vw;
    font-family: 'cornerstoneregular';
    color:grey;
    text-decoration: none;
}

.location:hover{
    color: black;
}
select{
    font-family: 'cornerstoneregular';
    float: right;
}
  
@media (max-width: 1024px) {
    .cards_wrap .ALL {
      width: 33.3%;
    }
}
@media (max-width: 768px) {
    .cards_wrap .ALL {
      width: 33.3%;
    }
}
@media (max-width: 528px) {
    .cards_wrap .card_top {
      height: auto;
    }
    .cards_wrap .ALL {
      width: 100%;
    }
    .PAGE_TITLE{
        font-size: 11vw;
    }

    .cards_wrap .feat_info .title {
        font-size: 6vw;
    }
    .cards_wrap .card_bottom .card_info .title {
        font-size: 6vw;
    }
    .location{
        font-size: 3vw;
    }


}



/*FASH*/
#fash a {
    color: #1CBFFF;
    text-shadow: -0.13vw -0.1vw #F2CB05;
    text-decoration: none;
}
#fash a:hover{
    color: #F24E29;
    text-decoration: underline;
}

/*FOOD*/
#food a {
    color: #F2CB05;
    text-shadow: -0.13vw -0.1vw #F24E29;
    text-decoration: none;
}
#food a:hover {
    color: #1CBFFF;
    text-decoration: underline;
}

/*TECH*/
#tech a {
    color: #F24E29;
    text-shadow: -0.13vw -0.1vw #1cbfff;
    text-decoration: none;
}
#tech a:hover {
    color: #f2cb05;
    text-decoration: underline;
}

/*ACC*/
#acc a {
    color: #1CBFFF;
    text-shadow: -0.13vw -0.1vw #F24E29;
    text-decoration: none;
}
#acc a:hover {
    color: #F2CB05;
    text-decoration: underline;
}

/*BEAU*/
#beau a {
    color: #f2cb05;
    text-shadow: -0.13vw -0.1vw #656565;
    text-decoration: none;
}
#beau a:hover {
    color: #F24E29;
    text-decoration: underline;
}

/*ART*/
#art a {
    color: #F24E29;
    text-shadow: -0.13vw -0.1vw #F2CB05;
    text-decoration: none;
}
#art a:hover {
    color: #1CBFFF;
    text-decoration: underline;
}
/*DONATE*/
#don a {
    color: black;
    text-align: center;
    text-shadow: -0.13vw -0.1vw #F2CB05;
    text-decoration: none;
}
#don a:hover {
    color: #1CBFFF;
    text-decoration: underline;
}

/*CONTACT*/
.about_contactnav a{
    font-size: 3.5vw;
    font-family: 'cornerstoneregular';
    padding-top: 3vw;
}
.about_contactbody {
    padding-top: 17vw;
    padding-bottom: 6vw;
    align-content: center;
    font-family: 'cornerstoneregular';
    text-align: center;
}

footer ul {
    display: inline-grid;
    grid-auto-flow: column;
    grid-gap: 26px;
    justify-items: center;
    text-align: center;
    margin: auto;
    color:grey;
  }
@media (max-width: 528px) {
    footer ul {
      grid-auto-flow: column;
    }
  }
  
footer a {
    color: white;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 hsla(0, 0%, 100%, 0.4);
  }
  
footer a:hover {
    box-shadow: inset 0 -1.2em 0 hsla(0, 0%, 100%, 0.4);
  }
  
footer li:last-child {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  
footer li:hover ~ li p {
    animation: wave-animation 0.3s infinite;
  }
  
  /* below is just for demo styling */
  
footer {
    position: relative;
    bottom: 0;
    left: 0;
    text-align: center;
    right: 0;
    clear: both;
    bottom: 0;
    display: flex;
    height: 10vh;
    width: 100%;
    background-color: #002a38;
    line-height: 1.3;
    letter-spacing: 0.05em;
    font-family: 'cornerstoneregular';
    font-size: 1.9vw;
  }
  
  @keyframes wave-animation {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(20deg);
    }
    75% {
      transform: rotate(-15deg);
    }
  }