html {
    height: 100%;
}

body {
    margin: 0;
    color: #ff5500;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100%;
}

/* FIND ALL THE CREDITS IN THE CONSOLE LOG*/

body::selection, p::selection, h1::selection, h2::selection, h3::selection, hr::selection, br::selection, li::selection, button::selection {
    background: rgb(166, 166, 172);
}

img::selection {
    background: transparent;
}

nav,header {
    background-color: #000000;
    display: flex;
    justify-content: center;
}

h2, p {
    font-family: 'Roboto', sans-serif;
    font-weight: 650;
}

footer > p {
    color: grey;
    width: auto;
    height: 100%;
    text-align: center;
    font-family: 'Mansalva', cursive !important;
}

.stacker {
    text-align: center;
}

/* .hd {
    width: 1px;
    height: autoS;
    background-color:   grey;
} */

hr {
    margin: 0;
    padding: 0;
    border: 0;
    height: 1px;
    background: linear-gradient(124deg, #2e0f00, #ff5500 );
background-size: 1800% 1800%;

-webkit-animation: rainbow s ease infinite;
-z-animation: rainbow 6s ease infinite;
-o-animation: rainbow 6s ease infinite;
  animation: rainbow 6s ease infinite;}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}


header {
    display: flex;
    justify-content: center;
}

a {
    transition-duration: 0.5s;
    text-decoration: none;
    color: #ff5500;
}

a:hover {
    transition-duration: 1s;
    color: red;
}

.navbuttons {
    display: flex;
    justify-content: space-around;
    width: 50%;
}

.navbutton {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    width: 200px;
    text-align: center;
}



.navbutton:hover {
    letter-spacing: .15rem;
}

main {
    display: flex;
    justify-content: center;
    background: url(../images/background.jpg);
    background-size: 100% 100%;
    height: inherit;
}

.mainC {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 60%;
    height: auto;
    background-color: black;
}

.sidebar {
    width: 20%;
    background-color: transparent;
    color: #ff5500;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    height: auto;
}

/* .sidebar > p {
    text-align: center;
    font-size: 5rem;
    display: block;
    margin: 0;

} */

.sidebar > p:hover {
    background: linear-gradient(124deg, #000000, #161616 );
    background-size: 1800% 1800%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

-webkit-animation: rainbow 0.1s ease infinite;
-z-animation: rainbow 0.25s ease infinite;
-o-animation: rainbow 0.25s ease infinite;
  animation: rainbow 0.25s ease infinite;}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

@media (min-width: 200px){
    body {
        background-image: url('../images/background.jpg');
    }
}
 

.sidebar:hover {


    background: linear-gradient(124deg, rgba(1,1,1, 0.5), #b9b9b9 );
    background-size: 1800% 1800%;

-webkit-animation: rainbow 0.1s ease infinite;
-z-animation: rainbow 0.1s ease infinite;
-o-animation: rainbow 0.1s ease infinite;
  animation: rainbow 0.1s ease infinite;
  opacity: 50%;
  filter: alpha(opacity=50);
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

li > a, #coolidname {
    text-decoration: underline;
}

li > a:visited, #coolidname {
    color: grey;
}

#tii {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.headerSH {
    display: flex;
    justify-content: center;
}

#spook {
    text-align: center;
    font-size: 1.75vw;
}

.cloackicon {
    margin: 30px;
    width: 2vw;
    transition-duration: 0.5s;;
}

.baticon {
    margin: 30px;
    width: 2.5vw;
    transition-duration: 0.5s;
}

.baticon:hover {
    color: red;
}

.topci {
    display: flex;
    justify-content: center;
}

.topci > p,  .helpme{
    font-size: 1.25vw;
    width: 50%;
}

#hehe:hover{
    visibility: hidden;
}

#spooke {
    transition-duration: 0.5s;
    box-shadow: 0px 0px 13px -1px rgba(255,85,0,1);
    width: 37vw;
    border-radius: 10px;
}

#spooke:hover {
    transition-duration: 0.5s;
    box-shadow: 0px 0px 32px -1px rgba(255,85,0,1);
}

.centerHelp{
    text-align: center;
}

.hideme {
    width: 0;
    height: 0;
    color: transparent;
}

.memeplease {
    font-size: 3rem;
    color: transparent;
    font-family: 'Mansalva', cursive;
}

.showmeUn {
    font-family: 'Mansalva', cursive;
    transition-duration: 7s;
    color: grey !important;
}

#candyb {
    width: 15vw;
    height: 3vw;
    background: rgb(20, 20, 20);
    border-color: white;
    color: #ff5500;
    
}

.treatimg {
    width: 35vw;
}

#spookHc {
    margin: 0 2vw 1vw 2vw;
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;

}