*
{
    box-sizing: border-box;
}

body, html{
    width:100%;
    height:100%;
    margin:0;
}

body{
    background-image: url("/Assets/front2.jpg");
    background-size: cover;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 1.1vw;
    color:White;
}

#nav-bar
{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:50px;
    position: sticky;
    top:20px;
    text-align: center;
    z-index: 400;
    padding-right: 1rem;
  
}
.brand-name > a{
    text-decoration: none;
    color:white;
}

.RightSideofBar
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right:50px;
}
.navigatorTxts > a
{
    text-decoration: none;
    color:white;
}

.brand-name-txt > img
{
   
    object-fit: cover;
    object-position: center;
    width:60px;
    padding-top:20px;
    padding-left:20px;
    
    
}

.navigatorTxts
{
    display:flex;
    background-color: rgb(27, 25, 25);
    border-radius: 20px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 10px;
    padding-top:7px;
    padding-bottom:7px;
    width:350px;
    align-items: center;
    justify-content: space-around;
   
    

}
.trademark
{
    position: absolute;
    bottom:1%;
    right:1%;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 300;
    
}

footer > a{
    text-decoration: none;
    color:white;
}
.navigatorTxts  > a
{
   
    font-size:13px;
    font-weight: bold;
    line-height: 2;
    text-align: center;
   
   

}

.discord, .Twt
{
    margin-left:20px;
    background-color: rgb(27, 25, 25);
    padding:8px;
    display:flex;
    justify-content: center;
    align-items: center;
    line-height: .5;
    border-radius: 40px;
    transition: ease all 250ms;
    

}

.discord:hover, .Twt:hover{

   cursor:pointer;
   background-color: rgb(20, 59, 20);
}

.Center
{
    position: absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
   text-align: center;
   display:flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
  
  
  
   
   



}

.CNT-inside
{
    position: relative;
  
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    margin-top:200px;
    width:350px;
   
   
   


}

.CNT-inside > div{
    
    text-align: center;

    font-size: 16px;
    background-color: rgb(27, 25, 25);
    line-height: 1.6;
    padding-top: 10px;
    padding-bottom: 10px;  
    width:400px;
    border-radius: 10px;
    font-weight: bold;
    transition: ease all .3s;
    margin-right:10px;
    border:.2px solid ;
    border-color:rgb(255, 255, 255);


 

}
.CNT-inside > div > a{
    text-decoration: none;
    color: white;

   
}

.CNT-inside > div:hover{
    
    
    background-color: black;
    cursor:pointer;

    border-color: white;

}
.smallnavigator
{
    display:none;
}
.navigatorTxts > a:hover{
    text-shadow: 2px 2px 6px #6d3333;
    transition:ease all .2s;
}

.smallnavwrapper
{
    display:none;
}
.trademark
{
    width:100px;
    display:flex;
    font-size: 10px;
    justify-content: space-between;
    align-items: center;
    position: fixed;

}
.trademark > div{

    width:30px;
    height:30px;
    background-color: black;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 2.4;

}

.CNT-inside > div > a {
    text-decoration: none;
    display:flex;
    justify-content: center;
    align-items: center;
    color: white;
}
    a > span
    {
        
        font-size:10px;
        background-color: rgb(129, 40, 107);
        padding:12px;
        margin-left:16px;
        border-radius: 20px;
        line-height: 0;
        text-align: center;
        display:flex;
        justify-content: center;
        align-items: center;
    }

@media screen and (max-width: 767px) {

    body{
        background-size: cover;
    
        font-family: 'Alegreya Sans SC', sans-serif;
        font-size: 1.1vw;
        color:White;
    }
    
}

@media screen and (max-width:1000px)
{


    .smallnavigator{
        display:block;
        width:10%;
        height:45%;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .smallnavigator:hover{

        cursor: pointer;
        
    }

    .smallnavigator > div{

        width:40px;
        height:3px;
        background-color: rgb(255, 255, 255);
    }
  


   .RightSideofBar
   {
    display:none;
   }
   .smallnavwrapper
   {
      position: absolute;
      right:0;
      left:0;
      top:0;
      bottom:0;
      z-index:200;
      background-color: black;

   }

   .mobileNav
   {
    margin-top:30%;
     width:100%;
     height:90%;
     display:flex;
     flex-direction: column;
     justify-content: flex-start;
     
     
   }
    .smallnavigator > div
    {
        transition: ease all .5s;
    }
   .mobileNav > div{

    display:flex;
    align-items: center;
    font-size:20px;
    height:10vh;
    padding-left:20px;
    font-weight: 800;
    border-bottom: 1px solid rgb(53, 52, 52);
    
   }

   #mob:hover
   {
    font-size:25px;
    color:rgb(234, 10, 43);
   }
   

   
   .mobileNav > div:last-of-type
   {
    display:flex;
    justify-content: center;
   }
   
   .mobileNav > div > a 
   {

         background-color: rgb(211, 39, 39);
        
   }

   #mob
   {
    text-decoration: none;
    background-color:black;
    color:white;
    transition: ease all .3s;
   }


}