stylehub/assets/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.dashboard
{
    height:100%;
    text-align:center;
    width:100%;
}

:root
{
    --error:#ff3700;
    --primary:#2a9dd6;
    --primary-bg:#1b1529;
    --primary-hover:#2489bb;
    --primary-text:#d2d6e5;
    --secondary-bg:#1a1a1a;
    --third-bg:#383838;
}

body
{
    align-items:center;
    background:linear-gradient(127deg,var(--secondary-bg), var(--primary-bg)) no-repeat fixed;
    background-size:cover;
    color:var(--primary-text);
    display:flex;
    flex-direction:column;
    font-family:\'Poppins\', sans-serif;
    height:100%;
    margin:0;
    min-height:100vh;
    min-width:100vw;
    padding:0;
    width:100%;
}

header h1
{
    margin:0;
    padding:0;
}

header hr
{
    border-color:var(--primary);
    opacity:0.5;
    width:30%;
}

header ul li
{
    list-style:circle;
    width:fit-content;
}

header ul
{
    display:flex;
    flex-direction:column;
    gap:0;
    text-align:left;
    width:fit-content;
}

header
{
    align-items:center;
    text-align:center;
    width:100%;
}

li a
{
    color:var(--primary-text);
    padding-bottom:.45rem;
    position:relative;
    text-decoration:none;
    transition:all .3s ease;
}

li a:hover::after
{
    margin:0 auto;
    width:85%;
}

li
{
    list-style:none;
}

li.navpage_item
{
    padding-left:20px;
    padding-right:20px;
}

nav
{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    height: 55px;
}

nav,footer
{
    -moz-box-shadow:0 20px 28px 0 rgba(0,0,0,0.6);
    -webkit-box-shadow:0 20px 28px 0 rgba(0,0,0,0.6);
    background-color:rgba(0,0,0,0.6);
    box-shadow:0 20px 28px 0 rgba(0,0,0,0.6);
    padding:1.2rem 1rem;
}

table.list-table > tbody,table.list-table > tbody > th,table.list-table > tbody > tr,table.list-table > tbody > tr > td
{
    border:2px solid var(--primary);
    border-collapse:collapse;
}

ul
{
    display:flex;
    flex-direction:row;
    gap:2.5rem;
    list-style:none;
    padding-left:0;
}

ul.navpage_list
{
    gap:10px;
    background-color:var(--third-bg);
    border:0 solid transparent;
    display:none;
    flex-direction:column;
    max-height:0;
    overflow:hidden;
    position:fixed;
    transition:max-height .3s ease, border .325s ease;
    z-index:2;
}

.back
{
    background-color:#2a9dd6;
    border-radius:15px;
    color:var(--primary-text);
    padding:.35rem .65rem;
    text-decoration:none;
    transition:all .3s ease;
}

.back:hover
{
    background-color:var(--primary-hover);
    transition:all .3s ease;
}

.feature-list
{
    display:block;
    margin:auto;
    width:fit-content;
}

.feature-list-ul ul
{
    margin: 5px auto auto 20px;
}

.navsite_item
{
    align-items:center;
    justify-content:center;
    text-align:center;
    width:120px;
}

.navsite_item:hover .navpage_list
{
    border:4px solid var(--primary-hover);
    display:flex!important;
    max-height:200px;
}

.navsite_item:not(:hover) .navpage_list
{
    border:0 solid transparent;
    max-height:0;
    transition-delay:.1s;
}
#navsite_list
{
    display:flex;
    flex-direction:row;
    gap:3.25rem;
}

#toggle_button {
    position: absolute;
    right: 1.5rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 2rem;
    height: 1.5rem;
}

@media (max-width: 1050px) {
    #toggle_button {
        display: flex;
    }
    #navsite_list {
        display: none;
        position: fixed;
        flex-direction: column;
        width: 100%;
    }

    #navsite_list li {
        text-align: center;
    }

    #navsite_list.active {
        display: flex;
        -moz-box-shadow:0 20px 28px 0 rgba(0,0,0,0.6);
        -webkit-box-shadow:0 20px 28px 0 rgba(0,0,0,0.6);
        background-color:rgba(0,0,0,0.6);
        box-shadow:0 20px 28px 0 rgba(0,0,0,0.6);
        top: 80px;
    }

    nav {
        flex-direction: column;
        align-items: center;
        background-color: rgba(0,0,0,0.6);
    }
}

#statusMessageContainer{
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 510;
    display: flex;
    flex-direction: column;
}

.status-message {
    background-color: #dff0d8; /* Success background color */
    border: 1px solid #3c763d; /* Success border color */
    color: #3c763d; /* Success text color */
    padding: 15px;
    margin-bottom: 10px;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.status-message.failure {
    background-color: #f2dede; /* Failure background color */
    border: 1px solid #a94442; /* Failure border color */
    color: #a94442; /* Failure text color */
}

.wrapper-40x .error
{
    color:var(--error);
}

.wrapper-40x h1
{
    font-size:10rem;
    margin:0;
}

.wrapper-40x h3
{
    margin-bottom:2rem;
}

.wrapper-40x
{
    text-align:center;
}

#navbar_container
{
    position:relative;
    z-index:500;
}

#navbar_container,#page_container,#footer_container
{
    width:100%;
}

#page_container
{
    flex-grow:1;
}

header a,.error-code
{
    color:var(--primary);
}

input
{
    background-color: var(--third-bg);
    border:2px solid var(--primary);
    border-radius:50px;
}

button{
    border-radius: 50px;
    border: 2px solid var(--primary);
    background: var(--third-bg);
    color: var(--primary-text);
    width: 175px;
    transition-duration: 0.3s;
}

button:hover {
    background: var(--primary);
    transition-duration: 0.3s;
}

.form-container input {
    border-radius: 50px;
    background: none;
    border: 2px solid var(--primary);
    width: 175px;
    color: var(--primary-text);
}