@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
*, *::before, *::after{
    box-sizing: border-box;
}

.pageContent{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
}
/* Typography */

.lilita-one-regular {
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.subractiveType{
    opacity: 0;
}
/* Operators */
.hidden{
    display: none !important; 
}
.minusDecoration{
    text-decoration: none;
}
html{
    padding: 0;
    margin: 0;
    width: 100%;
display: flex;
flex-direction: column;}
body{
    display: flex;
    flex-direction: column;
    width: 100%;
}


    /* Design Toolkit */
.dark{
    color: #181818;
}
.mid{
    color: #212121;
}
.gray{
    color: #3d3d3d;
}
.minty{
    color: #98FF98;
}
.mintCream{
    color: #f5fffa;
}
.starkWhite{
    color: white;
}
.lav{
    color: #DDA0DD;
}
.bkrHOT{
    background-color: hotpink;
}
.bkrNew{
    background-color: #FFB823;
}
.bkrDark{
    background-color: #181818;
}
.bkrMid{
    background-color: #212121;
}
.bkrGray{
    background-color: #3d3d3d;
}
.qualifier{
    padding: 1rem;
    border-radius: 1.5rem;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em; 
    display: flex;
    text-decoration: none;
    border: .25rem solid white;
    color: #f5fffa;
    text-align: center;
    font-weight: bold;
}
.qualifier:hover{
    filter: invert(1);
}
.qTrending{
    border-color: orange;
}
.qTop{
    border-color: goldenrod;
}
.qNew{
    border-color: #a6d608;
}
/* Game Theming */
.roblox{
    border-color: #6f80f5;
    
}
.bloxburg{
    border-color: #9ce2f8;
}
.bloxburgPre{
    border-color:  purple;
    
}
.bloxburgPreHouse{
    border-color:  #80EF80;
   
}
/* Header */

header{
   padding: 0;
   margin: 0;
   width: 100%;
   justify-items: center;
   display: flex;
   flex-direction: column;
   gap: 0;
   z-index: 25;
}
header i{
    padding-right: 2rem;
    padding-left: 2rem;
}
header i:hover{
    color: orange;
}
.mainLogoFont{
    font-family: "Lilita-one-regular", sans-serif ;
    font-size: 5rem;

}

.mainNav{
    background-color: #3d3d3d;
    display: flex;
    flex-direction: row;
    margin: auto;
    font-size: 5rem;
    justify-content: start;
    align-items: center;
    position: fixed;
    height: 10%;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 2;
    
}

.menuNav{
    background-color: #212121;
    width: 80%;
    height: 95vh;
    display: flex;
    flex-direction: column;  
    font-size: 2rem;
    color: white;
    align-items: start;
    justify-content: start;
    top: 10vh;
    left: 0;
    z-index: 50;
    position: fixed;
}

.navSearchContainer{
width: 80%;
height: 20%;
margin: 5% auto 0 auto;

}

.navSearchBar{
    display: flex;
    flex-direction: row;
    border: orange .25rem solid;
    border-radius: 15px;
    width: 90%;
    justify-content: space-around;
    padding: .25em;
    font-size: 2rem;
    height: 20%;
    text-align: start;
    align-items: center;
   
    
}
.searchBarInput{
    width: 80%;
    background-color: #212121;
    border: none;
    color: white;
    font-size: 2rem;
    height: 90%;
    outline: none;
    text-align: start;
}
.searchBarMag{
    
    margin: auto;
    align-self: center;
    font-size: 90%;
    display: flex;
}


.naviMenuLarge{
  font-family: "Lilita-one-regular", sans-serif ;
  font-size: 5rem; 
  margin: auto 0 auto 1rem;
  text-align: left;
  display: flex;
  
  font-weight: bold;
  text-decoration: none;
  color: white;
  padding-top: 1em;
  text-decoration: underline .5rem #98FF98;
  
}
.naviMenuLargeTopic{
font-family: "Lilita-one-regular", sans-serif ;
  font-size: 5rem; 
  margin: auto 0 auto 1rem;
  text-align: center;
  display: flex;
  align-self: center;
  font-weight: bold;
  text-decoration: none;
  color: white;
  padding-top: 1em;
  text-decoration: underline .5rem #98FF98;
}


.naviItemNormal{
    font-size: 2.5rem;
    margin: auto 0 auto 1rem;
  text-align: left;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: white;
  padding-top: 1em;
}
.naviItemMajor{
    font-size: 4rem;
   margin: auto 0 auto 1rem;
  text-align: left;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: white;
  padding-top: 1em;
  text-decoration: underline .5rem #98FF98;
  
}
.naviList{
list-style: none;
width: 100%;
}
.naviMenuBack{
font-family: "Lilita-one-regular", sans-serif ;
font-size: 4rem;
margin: 3rem auto 1rem 1rem;
text-align: center;
display: flex;
font-weight: bold;
text-decoration: none;
color: white;
}
.naviMenuBackSYM{
    font-size: 3rem;
}
.naviMenuBordersBottom{
    border-bottom: #98FF98 2px solid;
}
.naviMenuBordersTop{
    border-top: #98FF98 2px solid;
    text-align: start;
    
}

.naviLinkContainer{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;

}

/* Body */

body{
    background-color: #181818 ;
    padding-top: 11vh;
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 100%;
}


/* Slider */
.sliderContainer{
    width: 95%;
    height: fit-content;
    margin: auto;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    justify-content: space-around;
    padding: 1em;
   border: #f5fffa solid .25rem;
}
.slideSlideContainer{
    width: 90%;
    height: fit-content;
    display: flex;
    align-content: center;
   justify-content: center;
   justify-content: space-around;
   
}
.sliderSlide{
display: flex;
justify-items: center;
align-content: center;
flex-direction: row;
margin: auto;
height: fit-content;
justify-content: center;
}
.sliderNavigation{
    font-size: 2rem;
    height: 100%;
    justify-items: center;
    align-items: center;

    margin: auto 0;
    display: flex;
    width: 10%;
    
}
.sliderNavigationBtn{
    margin: auto;
    font-weight: bolder;
    width: 100%;
    height: 100%;
}
.sliderAlign{
    margin: auto;
    padding: 50% 20%;
    background-color: white;
    border-radius: 1rem;

}
.sliderAlign:hover{
    background-color: magenta;
}
.sliderSlide img{
width: 100%;
max-height: 720px;
max-width: 1280px;
display: flex;
margin: auto;
justify-content: space-around;
border-radius: 1rem;
z-index: 0;
}
.sliderContent{
    display: flex;
    flex-direction: column;
}
.sliderContentContainer{
    height: auto;
    width: 90%;
}
.sliderTitle, .sliderTagging{
    display: flex;
    flex-direction: row;
    margin: auto;
    width: 90%;
}
.sliderTitle{
    justify-content: space-between;
}

.sliderTitle .qualifier{
    margin-bottom: .5em;
    font-weight: bold;
}

.sliderTagging{
justify-content: space-around;
}
.sliderTagging .qualifier{
    font-size: 1.5rem;
    
    margin-top: .5em;
}

/* Front Page Article */
.articleContainer{
    height: fit-content;
    width: 95%;
    margin: 5vh auto;
    padding: 1em;
    display: flex;
    flex-direction: column;

    

}
.article{
    border: .25rem solid #f5fffa;
    padding: 1em;
    border-radius: 1rem;
    margin: 1rem 1rem;
    
}
.articleTitleContainer{
width: 90%;
margin: auto;
display: flex;
justify-content: start;
gap: 1rem;
}
.articleTitleContainer .qualifier{
    margin: auto 0;
    text-align: center;
}
.articleTitle{
    text-align: center;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    color: white;
    font-size: 2rem;
    padding: .5em;
   background-color: #181818;
   border-radius: 1rem;
}
.articleImageContainer{
    margin: auto;
    justify-content: center;
    display: flex;

}
.articleImage{
width: 90%;
margin: 1rem auto;
max-height: 720px;
max-width: 1280px;


}
.articleBlurb{
font-size: 2rem;
color: white;
display: flex;
margin: auto;
font-family: sans-serif;
padding: 1em;
text-indent: 1em;
font-weight: bold;
}
.articleBlurb a{
    color: #EE82EE;
    text-decoration: none;
}
.articleTagContainer{
display: flex;
margin: auto;
justify-content: center;
margin-top: 1em;
gap: 1em;
}
.articleInfo{

}

footer{
    text-align: center;
}
footer p{
    font-size: 2rem;
    font-family: sans-serif;
}
/*Desktop Respond*/
@media (min-width: 1024px) and (orientation: landscape){
    .pageContent{
        max-width: 50%;
        margin: 0 auto;
    }
    header{
    
    }
    body{
        padding-top: 7vh;
    }
    .mainNav{
        height: 5vh;
        padding: 3rem;
    }
    .menuNav{
        width: 100%;
        height: 10vh;
        display: flex;
        flex-direction: row;
        top: 9vh;
        
    }
    .navSearchContainer{
    width: 90%;
    display: flex;
    flex-direction: row;
    height: 100%;
    margin: 0 auto;
    align-items: center;
    }
    .navSearchBar{
        width: 40%;
        height: 70%;
        margin-right: 2rem;
    }
    .naviLinkContainer{
        flex-direction: row;
        height: 100%;
        justify-items: center;
        margin: auto 0;
        gap: 1em;
        text-align: center;
    }
    .naviMenuBorders{
        border-top: none;
        border-bottom: none;
        border-left: 2px solid #98FF98;
        border-right: 2px solid #98FF98;
        padding: 0 1em;
        
    }
    .naviMenuLarge{
        display: flex;
        margin-top: 0;
        height: 50%;
        font-size: 2.5rem;
        margin: auto;
    }

}