* {
    font-family: 'poppins';
}

html {
   overscroll-behavior: none;
}

.wrapper {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-image: 
        linear-gradient(
            165deg,
            rgba(161, 145, 68, 0.8) 2%,
            rgba(208, 52, 12, 0.8) 5%,
            rgba(104, 13, 189, 0.8),
            rgba(165, 119, 197, 0.8),
            rgba(137, 43, 226, 0.8),    
            rgba(165, 119, 197, 0.8),
            rgba(104, 13, 189, 0.8),
            /*rgba(139, 78, 63, 0.8),*/
            rgba(122, 38, 17, 0.8) 96%,
            rgba(161, 145, 68, 0.8) 
        );
}

.card {
    max-width: 700px;
    margin: 0.5rem;
}

/* card shadows */
.shadow-light {
    transition: 0.3s ease;
    box-shadow: 
        0 0 3px 0 rgb(104, 103, 103),
        0 0 8px 3px rgba(245, 245, 245, 0.847);
}
.shadow-light:hover {
    box-shadow: none;
}

/* Main nav links */
.glass_button {
    width: 250px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: larger;
    color: black;
    font-family: 'poppins';
    font-weight: 500;
}

/*effect used in card header and nav links*/
/*obvious with image back drop*/
.glass_effect1 {
    background: rgba(32, 202, 80, 0.536);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.226);
}

.glass_effect2 {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px) saturate(90%);
    -webkit-backdrop-filter: blur(5px) saturate(40%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass_effect3 {
    background: rgba(237, 148, 93, 0.38);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.8px);
    -webkit-backdrop-filter: blur(3.8px);
    border: 1px solid rgba(237, 148, 93, 0.73);
}

.glass_effect4 {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(17, 25, 40, 0.75);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.125);
}

.glass_effect5 {
    background: transparent;
    backdrop-filter: blur(4px) saturate(60%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.125);
}