@font-face {
    font-family: "Cocotte";
    src: url(./fonts/Zetafonts\ -\ CocotteAlternate-Heavy.otf);
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

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

/*black text outline*/
h1, p, label, li, .slogan{
    text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

li a{
    text-shadow: none;
}

h1{
    font-family: 'Cocotte', 'Segoe ui', 'Arial';
    /* font-size: 4rem; */
    font-size: 3rem;
    color: white;
    text-align: center; 
    text-transform: uppercase;
    margin-bottom: 1rem;;
}

table{
    border-collapse: collapse;
}

body{
    width:100%;
    min-height: 100vh;
    overflow-x:hidden;
    background-color: rgb(64, 20, 104);
    /* background: radial-gradient(circle, blueviolet 50%, rgb(64, 20, 104) 75%); */
    display: grid;
    align-items: center;

    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "navigation"
        "main-content"
        "banner";
}

.container{
    width:100%;
    max-width: 1280px;
    height: 100%;
    display:flex;
    justify-content: center;
    align-items: center;  
    overflow: hidden; 
    padding: 4rem 1rem
}

.main-content{
    grid-area: main-content;
    width: 100%;
    height: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    flex:1;

     
}


.rainbow{
    background: url('./media/Flag2.png');
    background-repeat:no-repeat;
    background-size: cover;
}

footer{  
    width: 100%;
    background-color: black;
    display:flex;
    align-items: center;
    justify-content: center;   
}


.content{
    position: relative;
    width: 100%;
    max-width: 1200px;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;

}

.home-content{
    display:flex;
    flex-direction: Column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 80%;
    max-width: 500px;

   
}

.slogan{
    display:flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    font-family: 'Cocotte', 'Segoe ui', 'Arial';
    padding-top: 4rem;
    max-width: 500px;
}

.pride, .year, .date{
    color:white;
    text-align: justify;

    display: flex;
    width: 100%;
    justify-content: space-between;
}
.pride{
    font-size: 5rem;
}
.year{
    font-size: 8rem;
    font-weight: 900;
    margin: 3rem 0 1rem 0;
}

.date{
    font-size: 6rem;
}

.home-img-container{
    display:none;
    flex:1;
}

.home-img-container img{
    width: 100%;
    height:100%;
    object-fit: cover;
    display:block;
}

.vendors-content{
    padding-top: 4rem;
    width:100%;
    

}

.vendors-container{
    display:flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-between;
}

.vendors-container .info{
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

.vendors-container .info p{
    margin-bottom: 2rem;
    line-height: 1.5;
}

.vendors-container .info ul{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    height: 100%;
    list-style: none;
}

.vendors-container .info ul li::before{
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    padding-right: 1rem;
    background-image: url('./media/PrideSweetgrass.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.volunteer-cta p{
    font-size: 3rem;
    color: white;
    text-align: center;
}



label,
input,
select{
    display: block;
}

label{
    color: white;
    margin-bottom: 0.25rem;
}

.vendors-form div{
    margin-bottom: 1rem;
}

.vendors-form input,
.vendors-form select{
    width: 100%;
    border-radius: 4px;
    border: none;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    background-color: #e5e5e5;
}

.vendors-form .form-submit p{
    font-size: 1rem;
    color: white;
}

.agenda{
    width: 100%;
}

.agenda table{
    width: 100%;
}

.agenda table td{
    border-bottom: 1px solid white;
    padding-top: 2rem;

    font-size: 1rem;
    color: white;
    line-height: 1.5;
    text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.agenda table tr td:first-of-type{
    text-align: left;
}

.agenda table tr td:last-of-type{
    text-align: right;
}


footer{
    grid-area: navigation;
    position: fixed;
    top:0;
    right: -100%;
    height:100%;
    overflow:hidden;
    transition: right 0.3s ease;

}

footer ul{
    min-height: calc(100px + 3rem);
    width: 100%;
    /* max-width: 1200px;
    min-height: 3rem; */
    display: block;
    list-style-type: none;
    justify-content: center;
    align-items: center;
    
}

footer ul li{
    border-right: none; /* 2px solid white;*/
    width:100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;

    color: white;
    font-size: 2rem;
    text-transform: uppercase;
    padding: 0 2rem;

    
}

footer ul li:last-of-type{
    border-right: none;
}

footer ul li a{
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

footer ul li a:hover{
    background-image: url('/media/rainbow-gradient-2.png');
    color:transparent;
    background-repeat: repeat-x;
    background-size: cover;
    background-position: center;
    background-size: auto 100%;
    background-position: center;
    -webkit-background-clip: text; /* Chrome, Safari, Edge */
    background-clip: text;
}

#menu-toggle{
    position: fixed;
    width: 100%;
    Height: 4rem;
    background-color: black;
    top: 0;
    right: 0;
    z-index: 10;
    
}

#menu-toggle svg{
    fill: white;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
   
}

#menu-toggle img{
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 2rem;
    height: 2rem;
}


/* Tablet Breakpoint: 768px and up */
@media (min-width: 768px) {
    h1{
        font-size: 4rem;
    }

    .container{
        padding: 4rem;
    }
    .home-img-container{
        display:flex;
    }

    #menu-toggle{
        height: 6rem;
    }

    #menu-toggle svg{
        width: 4rem;
        height: 4rem;
    }

    #menu-toggle img{
        width: 4rem;
        height: 4rem;
    }

    .agenda table td{

        font-size: 2rem;
    }
}

/* Desktop Breakpoint: 1024px and up */
@media (min-width: 1024px) {
    #menu-toggle{
        display: none;
    }

    body{
        grid-template-areas: 
        "banner"
        "main-content"
        "navigation";
    }


    .home-content{
        flex-direction: row;
        max-width: none;
    }

    footer{
        position: relative;
        right: 0;
    }

    footer ul{
        width: 100%;
        display: flex;
    }

     footer ul li{
        border-right: 2px solid white;
    }

    footer ul li:last-of-type{
        border-right: none;
    }

    .vendors-container{
        flex-direction: row;
    }

    .vendors-container .info{
        max-width: 50%;
        flex: 1;
    }

    .vendors-container .vendors-form{
       max-width: 50%;
       flex:1;
    }

}