/* ~=§=~=§=~=§=~ WELCOME SLÜGOON ~=§=~=§=~=§=~ */

body {
    background-color: #4E1E4E;
    background-position: center;
    background-attachment: fixed;   /* fixed ie will not move with scroll */
    background-size: cover;      /* covers/fills/fits the whole space as best it can */
    text-decoration: none;
    margin: 0px;    /* removes margin to make nav bar fit flush */
    color: white;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

}


                        /*~=§=~=§=~=§=~ 0️⃣1️⃣ LINKS ~=§=~=§=~=§=~*/

a:link, a:visited{ 
    text-decoration: none;
    color: rgb(100, 255, 100);
}
a:hover, a:active{
    color: white;
    transition-duration: 1s;
}


                        /*~=§=~=§=~=§=~ 0️⃣2️⃣ NAVIGATION BAR ~=§=~=§=~=§=~*/

.Nav-Bar ul {
    background: rgba(0,0,0,0.5);
    list-style: none;
    padding: 1rem;
    padding-bottom: 2rem;
    margin:0px;
    width: 100%;
    position: fixed;
    list-style-type: none
}

.Nav-Bar ul li {
    position: relative;
    padding-left: 25px;
    text-align: center;
    opacity: 100%;
    padding: 0px;
    padding-right: 2rem;
}

.Nav-Bar ul li a {
    padding: 0px 15px;
    text-align: center;
}

.Links-Container {
    position: absolute;
    top: 42.5%;
    margin-left: auto;
    right: 0;
    padding-right: 2rem;
}

.Nav-Item {
    padding: 2rem 2rem 2rem 0rem; /* clockwise order: top, right, bottom, left*/
    float: left;
}

.Logo-Container {
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}

.Slugfut-Logo {
    height: 4rem;
    z-index: 2;
    float: left;
    position: relative;
}

.Slugfut-Logo img {
    height: 120%;
}

.Slugfut-Logo-Hover {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.Slugfut-Logo-Hover:hover{
    opacity: 1;
    transition-duration: 1s;
}


                        /*~=§=~=§=~=§=~ 0️⃣3️⃣ SOCIALS BUTTONS ~=§=~=§=~=§=~*/

.Footer { 
    z-index: 1;
    position:fixed;
    bottom: 0;          /*aligns it to the bottom of the screen*/
    width: 100%;
    text-align: center;
    height: 5rem;
}

.Social-Button {
    display: inline-block;
    margin: auto;
    padding: 0rem 1rem 1rem 1rem;
}

.Social-Button img{
    max-height: 3.5rem;
}

.Social-Button-Low {
    z-index: 2;
    float: left;
    position: relative;
}

.Social-Button-Hover {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.Social-Button-Hover:hover{
    opacity: 1;
    transition-duration: 2s;
}



                        /*~=§=~=§=~=§=~ 0️⃣4️⃣ IMAGE SLIDER ~=§=~=§=~=§=~*/

                        
.slides {               /* this sets the size of the pane the images are within? */
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: -2;       /* should put drop down above slideshow */
}

.slide {
    position: absolute;
    height: 100%;
    opacity: 0;
    inset: 0;
    animation: slide-show 20s infinite;
    z-index: -2;       /* should put drop down above slideshow */
}

/* animation delay, divides 20s into 4 chunks */
.slide-2 {
    animation-delay: 5s;}
.slide-3 {
    animation-delay: 10s;}
.slide-4 {
    animation-delay: 15s;}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@keyframes slide-show {
    0%   {opacity: 0;}
    5%  {opacity: 1;} 
    25%  {opacity: 1;}
    30%  {opacity: 0;}
}


                        /*~=§=~=§=~=§=~ 0️⃣7️⃣ Home Page scrolling ~=§=~=§=~=§=~*/

.Page-Body {
    z-index: -1;
    background-color: black;
}

                        /*~=§=~=§=~=§=~ 0️⃣7️⃣ Contact Us ~=§=~=§=~=§=~*/


.Contact_Us_Cage {
    position: fixed;
    margin-top: 7rem; /* pushes body below header*/
    height: 66.6%;
    width: 100%;
}

.Contact_Us_Content {
    padding: 1rem 2.5rem 1rem 2.5rem;
    background: rgba(0,0,0,0.5);
    border-radius: 1rem;
    max-width: 66.6%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
}




                        /*~=§=~=§=~=§=~ 0️⃣8 Media Queries ~=§=~=§=~=§=~*/

@media only screen and (max-width: 875px)   { /* smaller than a tablet stuff*/

.Nav-Bar ul li {
    padding-right: 0px;
}

.Nav-Bar ul {
    padding-bottom: 1rem;
}

.Links-Container {
    position: relative;
    right: auto;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5.5rem;
}

.Logo-Container { /*this centers the logo*/
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.Contact_Us_Cage {
    margin-top: 9rem; /* pushes body below header*/
}

                                            }

@media only screen and (max-width: 400px)   { /* smaller */
.Nav-Bar ul li {
    font-size: 4vw;
}

.Social-Button {
    padding-left: 8px;
    padding-right: 8px;
}


                                            }

@media only screen and (max-width: 340px)   { /* smaller still! aiming to work at 320px width */
.Nav-Bar ul li {
    font-size: 3vw;
}

.Social-Button img{
    max-height: 15vw;
}
                                            }