@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Jost:ital,wght@0,100..900;1,100..900&family=Pacifico&family=Roboto:ital,wght@0,100..900;1,100..900&family=Winky+Sans:ital,wght@0,300..900;1,300..900&family=Yeon+Sung&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
html{
    font-size:62.5% ;
}
body{
    background: #780206;
    background: -webkit-linear-gradient(10deg, #061161, #780206);
    background:linear-gradient(to top right, rgb(6, 19, 106) , rgb(123, 138, 253), rgb(6, 3, 71));   
    background-size: 100% 100%;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family:'jost';
    
}

.navbar_bg{
    background: url(../../assets/images/banner_01.jpg),linear-gradient(60deg, rgba(6, 17, 97,0.8)    , rgba(120, 2, 6,0.8));
    background-size: contain;
    background-blend-mode:multiply;
    font-family:'Winky Sans';
}
.button_bg{
    background-color:#061161;
    color:white;
    border-radius: 1rem;
    width: 7rem;
    height: 3rem;
    
}
.navbar_bg> div > form > input{
    height: 3rem;
}
.button_bg:hover{
    background-color: white;
}
.nav-link:hover{
    color: #1689ee !important;
}
.inputStyle::placeholder{
    font-size: 1.4rem;
}

.navbar-toggler-icon{
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
}
.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none !important;
}
.dropdown-item{
    font-size: 2.6rem;
    border-bottom: 1px solid black;
    box-shadow: 0px 0px 1px 1px black inset;
}
.dropdown-item:hover{
    background:linear-gradient(45deg, rgba(66, 84, 215, 0.9)    , rgb(120, 2, 6,0.9));
    color: white;
}
.main_heading {
            text-align: center;
            margin: 5rem 0 2.5rem 0;
}
.main_heading h1 {
    color: #e2e7e6;
    font-size: 4.5rem;
    letter-spacing: 2px;
    text-shadow: 0 0 5px #ffffff, 0 0 20px #ffffffcc;
    text-transform: uppercase;
}

.section {
    margin-bottom: 3rem;
    padding: 1.6rem 2rem;
    /* background: #16213ecc; */
    border-radius: 20px;
    border-left: 8px solid rgb(217, 217, 217);
    box-shadow: 0 0 20px 5px rgba(5, 0, 56, 0.9);
    /* rgba(74, 252, 234, 0.9) */
    

}
h2{
    font-size: 2.5rem;
    
}
p,ul,ol{
    color:white;
    font-size: 1.7rem;
    font-weight: 300;
}
.section h2 {
    color: #67cfec;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    border-bottom: 2px solid #00ffe7;
    padding-bottom: 0.3rem;
}
.text-highlight {
    color: #ffd600;
    font-weight: 700;
}
.game-image{
    height: 40rem;
    width: 50%;
    margin-left: 25%;
    object-fit: fill;
    border-radius: 1rem;
    box-shadow: 0px 0px 10px 1px #000 ;
}
.screenshot{
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 0 20px 5px rgba(5, 0, 56, 0.9);
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ss-image{
    height: 20rem;
    width: 100%;
    margin: 1rem;
    border-radius: 5px;
}
.download-btn {
    background:linear-gradient(45deg, rgba(6, 17, 97,0.9)    , rgba(120, 2, 6,0.9));
    color: #c1c1c1;
    font-weight: 500;
    font-size: 2rem;
    padding: 1rem 3rem;
    border-radius: 10rem;
    border: none;
    box-shadow: 0 0 25px 5px rgb(120, 2, 6);
    text-decoration: none;
    display: inline-block;
    user-select: none;
    transition: background-color 0.35s ease, transform 0.35s ease;
    margin-bottom: 2rem;
}

.download-btn:hover, .download-btn:focus {
    background:linear-gradient(45deg,  rgba(120, 2, 6,0.9),rgba(6, 17, 97,0.9) );
    transform: scale(1.1);
    outline: none;
    color:white;
    box-shadow: 0 0 40px 10px rgba(6, 17, 97,1) ;
}





















footer{
    background:linear-gradient(-45deg, rgb(2, 4, 24));
    height: 20rem;
}
.social_logo{
    height: 3rem;
    margin: 2rem;
}

.footer_menu{
    color: grey;
    text-decoration: none;
    font-size: 1.7rem;
    margin-right: 1rem;
}
footer > p{
    color: grey;
    font-size: 1.4rem;
    text-align: center;
    margin-top: 1rem;
}
.footer_menu:hover{
    color: #780206;
}