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

    body {
        background-color: #345;
        color: #EEE;
        font-family: Verdana;
       /* background-image: url(../images/discgolf-basket3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain 200%;
        background-blend-mode: soft-light;*/
    } 

    .poiret-one-regular {
        font-family: "Poiret One", sans-serif;
        font-weight: 400;
        font-style: normal;
      }

    .gowun-dodum-regular {
        font-family: "Gowun Dodum", sans-serif;
        font-weight: 400;
        font-style: normal;
      }
      
      

    h1 {
        font-family: "Gowun Dodum", sans-serif;
        color:rgba(29, 88, 144, 0.693);
        text-align: center;
        font-size: 6vw;
    }

    h2 {
        font-family:"Gowun Dodum", sans-serif;
        text-align: center;
        font-size: 2vw;
        padding-bottom: 2vw;
        text-decoration: underline;
    }

    h3 {
        font-family: "Gowun Dodum", sans-serif;
        text-align: center;
        font-size: 1.5vw;
        padding-top: 1.5vw;
    }

    p {
        font-family:"Poiret One", sans-serif; 
        padding-top: 1vw;
        padding-left: 20vw;
        padding-right: 20vw;
        line-height: normal; 
        font-size: large;
        font-weight: 600;
        letter-spacing: 2.5px;

    }
    
    header {
        padding-top: 15vw;
        text-shadow: 2px 2px rgb(133, 90, 4);
        /*in progress for later update: trying to insert a waterfall picture in the header that later will be a resposive dropdown like in this video https://www.youtube.com/watch?v=Y6LAJsUkkyc&ab_channel=CodingArtist*/
        background-color: rgba(212, 180, 138, 0.615);
        clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
        width: 100vw;
        height: 92vh;
        /* background-image: url(../images/waterfall.jpg); */
        background-image: url(/cis195/hobby/images/discgolf-basket3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgba(200, 188, 132, 0.486); 
     }
     
     article {
        text-align: center;
        font-size: 1vw;
        padding-bottom: 3vw;    
    }

    #best-disc-site {
        font-family: "Gowun Dodum", sans-serif;
        font-size: 1vw;     
    }

    #favorite-courses {
        padding-top: 2vw;
        padding-bottom: 3vw;
        margin-top: 2vw;
    }

    nav {
        text-align: center;
        font-size: .89vw;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    nav a {
        font-family: "Gowun Dodum", sans-serif;
        color: #d9ebed;
        text-decoration: none;
        text-align: center;
        letter-spacing: 2px;
       
    }

    a {
        margin-left: 2vw;
        margin-right: 2vw;
    }

    a:hover {
        text-decoration: 2px underline; 
    }

    #menu {
        float: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-49.45%, -50%);
        top: 0px;
        padding-top: 5vw;
        font-weight: bold;
        background-color: rgba(38, 79, 64, 0.675);
        width: 67.5%;
        padding-bottom: 25px;
        box-shadow:0 8px 8px 0px rgba(38, 79, 64, 0.675);
        
    }

    .waterfall-gallery {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 2vw;
        margin-top: 2vw;
        flex-wrap: wrap; 
    }

    .waterfall-gallery figure {
        max-width: 20vw;
        text-align: center;
    }

    .waterfall-gallery img {
        width: 100%;
        height: auto;
        border-radius: .5vw;
        box-shadow: 0 0 8px rgba(0,0,0,0.3);
    }

    .waterfall-gallery figcaption {
        font-size: 0.7vw;
        margin-top: 0.5vw;
        color: white;
    }

    .disc-golf-history {
        padding-bottom: 2vw;
    }

    .history-nav {
        float: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-49.45%, -50%);
        top: 0px;
        padding-top: 5vw;
        font-weight: bold;
        background-color: rgba(38, 79, 64, 0.675);
        width: 67.5%;
        padding-bottom: 25px;
        box-shadow:0 8px 8px 0px rgba(38, 79, 64, 0.675);
    }

    .origin p, 
    .growth p,
    .fun-facts p{
        line-height: 1.6;
    }

    .disc-golf-history figure {
        text-align: center;
        margin-bottom: 15px;
    }
    
    .disc-golf-history img {
        max-width: 25%;
        height: auto;
        border-radius: 4px;
    }
    
    .disc-golf-history figcaption {
        font-size: 0.85rem;
        color: white;
        margin-top: 5px;
    }

    footer {
        font-size: 0.9rem;
        text-align: center;
        padding: 2vw;
        background-color: rgba(0, 0, 0, 0.297);
        width: 100%;
        position: relative;
        box-sizing: border-box;
        clear: both;
    }

    .secondary-footer {
        color: white;
        padding: 10px;
        font-size: 0.9rem;
        line-height: 1.4;
        text-align: center;
    }

    .secondary-footer ul {
        list-style: none;      
        padding-left: 0;
        margin-top: 10px;
    }
    
    .secondary-footer li {
        margin-bottom: 8px;
    }

    .secondary-footer a {
        text-decoration: none;
        color: white;
        word-wrap: break-word;
    }

    .secondary-footer a:hover {
        color: #7e7754; 
        text-decoration: underline;
    }