<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= titlePage %></title>
    <link rel="icon" type="image/ico" href="/favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<style>
        @import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500&family=Arvo&family=Barlow:wght@300&family=Red+Hat+Display:wght@500&family=Rowdies:wght@300&family=Sofia+Sans:wght@300&display=swap');
        #homeLink{
            text-decoration: none;
        }
        #homeLink:hover{
            text-decoration: underline;
        }
        .nav-link:hover{
            text-decoration: underline;
        }
        .navbar{
            height: 75px;
        }
        .joinbtn{
            border-color:#66d0e0;
        }
        .joinbtn:hover{
            background:#66d0e0;
            color:#fff;
            font-weight: bold;
        }
        .btn{
            font-family: "sofia sans"!important;
        }
        /* Hero image custom style */
        /* Footer custom style */
        footer {
            padding: 1rem;
            background: #2c3e50;
        }
        .nav-link{
            font-family: "Rowdies";
        }
        .nav-item a.btn-outline-info{
            color:#0dcaf0;
            padding-left: 15px!important;
            padding-right: 15px!important;
        }
        .nav-item a.btn-outline-danger{
            color:#ff2828;
            border-radius: 0;
            margin-left: 5px;
            padding-left: 15px!important;
            padding-right: 15px!important;
            border-color: #ff2828!important;
        }
        div.offcanvas.show > div.offcanvas-body > ul > li:nth-child(4){
            text-align: end;
            justify-content: end;
        }
        div.offcanvas.show > div.offcanvas-body > ul > li:nth-child(5){
            margin: 0!important;
            margin-bottom:4.5px!important;
        }
        div.offcanvas.show > div.offcanvas-body > ul > li:nth-child(5) > a, div.offcanvas.show > div.offcanvas-body > ul > li:nth-child(6) > a{
            margin: 0!important;
        }
        
        .nav-item a.btn-outline-danger:hover{
            color:#fff;
            background-color: #ff2828;

        }
        .nav-item a.btn-outline-info:hover{
            color:#fff;
        }
        .customButtons>a:first-child{
            border-color: #5eeb9d;
            color: #000;
        }
        .customButtons>a:first-child:hover{
            background-color: #5eeb9d;
            color:#fff;
            font-weight: bolder;
        }
        .customButtons>a:nth-child(2){
            border-color: #828282;
            color: #000;
        }
        .form-group{
            margin-top: 10px!important;
            margin-bottom: 10px!important;
        }
        .customButtons>a:nth-child(2):hover{
            background-color: #828282;
            color:#fff;
            font-weight: bolder;
        }
        .badge.bg-success{
            color: #fff;
        }
        footer h5{
            color: #fff;
        }
        footer ul li a{
            color:#E3E3E3;
        }
        footer ul li a:hover{
            color: #cdcaca!important;
        }

    </style>
</head>
