<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Bootswatch linked -->
        <link rel="stylesheet" href="https://bootswatch.com/4/journal/bootstrap.min.css">

        <!-- Bootstrap linked -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

        <!-- FontAwesome linked -->
        <script src="https://kit.fontawesome.com/826e6140cb.js" crossorigin="anonymous"></script>

        <!-- JQuery linked -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <!-- Favicon linked -->
        <link rel="icon" type="image/x-icon" href="https://cdn-icons-png.flaticon.com/512/1205/1205671.png">

        <!-- Google Font linked -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Leckerli+One&family=Montserrat&family=Nunito:wght@900&family=Quicksand:wght@700&family=Roboto:wght@100&family=Ubuntu:wght@300&display=swap" rel="stylesheet">  

        <title>BatEver</title>

    </head>
    <body class="cbg_dark">
        
        <div class="container">
            <!-- <div class="background_text">
                <span>BatEver</span>
            </div> -->
            <%- body %>
        </div>

        <div class="footer">
            <a href="https://github.com/jainishramanuj"><i class="si fab fa-github"></i></a>
            <a href="https://twitter.com/JainishRamanuj?s=08"><i class="si fab fa-twitter"></i></a>
            <a href="https://www.linkedin.com/in/jainish-ramanuj-0aa4771b6"><i class="si fab fa-linkedin-in"></i></a>
            <a href="mailto:jainishramanuj@gmail.com"><i class="si fas fa-envelope"></i></a>
        
            <p class="p_footer">Developed by Jainish Ramanuj.<br />Website since: 12/04/2022.<br />Â© Copyright 2022 BatEver.</p>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

    </body>
</html>

<style>
    .icon{
        width: 200px;
    }
    .icon_nav{
        width: 55px;
        margin: 0 0 25px 0;
    }
    .cbg_dark{
        background-color : #583D72;
    }
    .cbg_light{
        background-color: #C6B4CE;
    }
    .c_light{
        color: #C6B4CE;
    }
    .c_dark{
        color: #583D72;
    }
    .b_new{
        border: solid 2px;
        border-bottom: solid 7px;
        margin-bottom: 15px;
        font-family: 'Quicksand', sans-serif;
    }
    .b_new:hover{
        background-color: #583D72;
        border: solid 2px #583D72;
        border-bottom: solid 7px #583D72;
        color: #C6B4CE;
    }
    .b_submit{
        font-family: 'Quicksand', sans-serif;
        border: solid 2px #C6B4CE;
        border-bottom: solid 7px #C6B4CE;
        background-color: #583D72;
        color: #C6B4CE;
    }
    .b_submit:hover{
        border: solid 2px #C6B4CE;
        border-bottom: solid 7px #C6B4CE;
        background-color: #C6B4CE;
        color: #583D72;
    }
    .t_batever{
        font-family: 'Leckerli One', cursive;
        font-size: 80px;
        text-shadow: 3px 3px 0.25px #371a51;
    }
    .t_nav{
        font-family: 'Leckerli One', cursive;
        font-size: 40px;
        text-shadow: 2px 2px 0.25px #371a51;

        margin: 0 0 0px 15px;

    }
    .t_normal{
        font-family: 'Leckerli One', cursive;
        font-size: 60px;
    }
    .t_card{
        font-family: 'Leckerli One', cursive;
        font-size: 35px;
        margin: 0 0 40px;
    }
    .card_welcom{
        padding : 40px 30px 20px;
    }
    .card_normal{
        padding : 40px 50px 20px;
    }
    .card{
        padding: 30px 50px;
        margin: 20px 0 20px;
    }
    .f_normal{
        font-family: 'Quicksand', sans-serif;
    }
    .f_mon{
        font-family: 'Montserrat', sans-serif;
        text-shadow: 1.5px 1.5px 0.25px #371a51;

    }
    .navbar{
        margin: 0;
        padding: 0 10px 0;
    }
    .logout{
        text-align: right;
        margin: 20px 0 0 0 ;
    }
    .brand{
        text-align: left;
        margin: 30px 0 0 0;
    }
    .center{
        text-align: center;
        margin-top: 0;
    }
    .selector{
        margin: 5px;
    }
    .search{
        width: 64%;
        padding: 7px 7px 7px 20px;
        border: solid 2px #C6B4CE;
        border-bottom: solid 7px #C6B4CE;
        border-radius: 5px;
        margin-bottom: 40px;
    }
    .list{
        display: flex;
        background-color: #C6B4CE;
        color: #583D72;
        box-shadow: 3px 3px 1px #371a51;

        padding: 15px 15px 0 50px;
        font-size: 20px;
        font-family: 'Nunito', sans-serif;
        text-align: left;
    }
    .footer{
        padding: 4%;
        margin: 100px 0 40px 0;
        text-align: center;
        color: #583D72;
        background-color: #C6B4CE;
    }
    .si{
        margin: 20px 10px;
        color: #583D72;
        font-size: 1.25rem;
    }

    @media only screen and (max-width: 500px) {
        .t_batever{
            font-size: 55px;
            text-shadow: 2px 2px 0.25px #371a51;
        }
        .t_normal{
            font-size: 50px;
        }
        .list{
            display: block;
        }
        .icon_nav{
            width: 50px;
        }
        .t_nav{
            font-size: 30px;
        }
        .b_small{
            font-size: 10px;
        }
    }
    /* background text style */

    /* .container{
        position: relative;
    } */
    /* .background_text{
        position :absolute;
        z-index: -1;
        transform: rotate(-90deg);
        color:#C6B4CE;
        opacity: 50%;

        right: -340px;
        top: 70px;
        bottom: 0px;

        font-size: 170px;
        font-weight: 900;
        font-family: 'Anton', sans-serif;
        margin: 0;
    } */

</style>