WatchIt/WatchIt.Website/WatchIt.Website/wwwroot/app.css

body, html {
    background-color: transparent;
    height: 100%;
    margin: 0; 
    padding: 0;
    
    color: lightgray;
    font-family: "PT Sans";
}

.logo {
    font-family: "Belanosima";
    text-decoration: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mt-9 {
    margin-top: 9rem !important;
}

.panel-header {
    background-color: rgba(0, 0, 0, 0.8);
}

.panel-regular {
    background-color: rgba(0, 0, 0, 0.6);
}

.panel-yellow {
    background-color: rgba(255, 184, 58, 0.6);
}

.panel {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(25px);
}

.main-button {
    --r:10px;
    --b:2px;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding: 5px 10px;

    border-radius: var(--r);
    display: block;
    align-items: self-end;
    position: relative;
    z-index:0;
    text-decoration: none;
    transition: 0.3s;
    font-family: Belanosima;
}

.main-button::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset: 0;
    border: var(--b) solid transparent;
    border-radius: var(--r);
    background: inherit;
    background-origin: border-box;
    background-clip: border-box;
    -webkit-mask:
            linear-gradient(#fff 0 0) padding-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-repeat: no-repeat;
}

.main-button:hover {
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

.main-button:hover::before {
    -webkit-mask:none;
}

.dropdown-menu-left {
    right: auto;
    left: 0;
}

.btn-stretch-x {
    width: 100%;
}

.w-100 {
    width: 100%;
}