/*Navigation Bar*/
nav {
    background-color: #7b2cbf;
    color: white;
    font-family: sans-serif, 'Inter Semi Bold';
    grid-area: navBar;
    position:sticky;
    top:0;

    align-content: center;
    align-items: center;
    text-align: center;

    display: grid;
    grid-template-columns: repeat(7,auto);
    grid-template-areas:"logo cups consumables merch vcards partners searchBar";
}

#Home_Nav {
    grid-area: logo;
    display: inline-block;
    transition: transform 0.2s;
}
#WaifuCups_Nav {
    grid-area: cups;
}
#Consumables_Nav {
    grid-area: consumables;
}
#Merch_Nav {
    grid-area: merch;
}
#VCards_Nav {
    grid-area: vcards;
}
#Partners_Nav {
    grid-area: partners;
}
#Search_Nav {
    grid-area: searchBar;
}

#HomeImg_Nav:hover {
    animation: shake 0.4s ease-in-out;
}
@keyframes shake {
    0% { transform: translateX(0);}
    25% { transform: translateX(-3px);}
    50% { transform: translateX(3px);}
    75% { transform: translateX(-3px);}
    100% { transform: translateX(0);}
}

.Underline_Animation {
    position: relative;
    display: inline-block;
    text-decoration: none;
}
.Underline_Animation::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: #5a189a;
    transition: width 0.8s ease;
}
.Underline_Animation:hover::after {
    width: 33%;
}


/*Footer*/
footer {
    background-color: rebeccapurple;
    color: white;
    grid-area: footer;
    font-family: sans-serif, 'Inter Semi Bold';
    padding-bottom: 4vw;

    display: grid;
    grid-template-columns: 1fr 1fr 3fr 3fr 1fr 1fr;
    grid-template-rows: repeat(4,1fr);
    grid-template-areas:
            "news_letter_sign news_letter_sign news_letter_sign expl_text expl_text expl_text"
            "write_us_mail write_us_mail write_us_mail expl_text expl_text expl_text"
            "our_partners our_partners our_partners expl_text expl_text expl_text"
            "fleft . sleft sright . fright";
}
#news_letter_signup {
    grid-area: news_letter_sign;
    align-content: center;
    align-items: center;
    margin-left: 4vw;
}
#write_mail_form {
    grid-area: write_us_mail;
    align-content: center;
    align-items: center;
    margin-left: 4vw;
}
#explanation_text {
    grid-area: expl_text;
    align-content: center;
    margin-right: 1vw;
}
#archive_partners {
    grid-area: our_partners;
    align-content: center;
    align-items: center;
    margin-left: 4vw;
}


#fleft {
    grid-area: fleft;

    align-content: center;
    align-items: center;
    text-align: center;
}
#fright {
    grid-area: fright;

    align-content: center;
    align-items: center;
    text-align: center;
}


/*Social Buttons*/
#sleft {
    grid-area: sleft;

    align-content: center;
    align-items: center;
    text-align: center;
    margin: auto;

    display:grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
            ". OurS OurS ."
            "OurSa OurSb OurSc OurSd";
}
#s1 {
    grid-area: OurS;
}
#sA {
    grid-area: OurSa;
}
#sB {
    grid-area: OurSb;
}
#sC {
    grid-area: OurSc;
}
#sD {
    grid-area: OurSd;
}

#sright {
    grid-area: sright;

    align-content: center;
    align-items: center;
    text-align: center;
    margin: auto;

    display:grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
            "GGS GGS GGS"
            "OurSga OurSgb OurSgc";
}
#s2 {
    grid-area: GGS;
}
#sgA {
    grid-area: OurSga;
    overflow: hidden;
}
#sgB {
    grid-area: OurSgb;
    overflow: hidden;
}
#sgC {
    grid-area: OurSgc;
    overflow: hidden;
}
#cat {
    background-color: lawngreen;
    grid-area: categories;

    align-content: center;
    align-items: center;
    text-align: center;
}

.Social_Button {
    width: 50px;
    height: 50px;
    background-color: black;
    border-radius: 100%;
    grid-area: SButton;
    margin: 2px;

    align-content: center;
    align-items: center;
    text-align: center;
}


/*Hyperlink Styling*/
a:visited {
    color: white;
}
a:link {
    color: white;
    text-decoration: none;
}
a:hover {
    color: lightgray;
}