header modified

WatchIt.Website/WatchIt.Website/wwwroot/css/general.css

@@ -0,0 +1,128 @@
+/* TAGS */
+
+html {
+    height: 100%;
+}
+
+body {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: fixed;
+    
+    height: 100%;
+}
+
+body, html {
+    background-color: transparent;
+    
+    
+    height: 100%;
+    margin: 0; 
+    padding: 0;
+    
+    color: lightgray;
+    font-family: "PT Sans";
+}
+
+/* CLASSES */
+
+.logo {
+    font-family: "Belanosima";
+    text-decoration: none;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.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;
+}
+
+
+
+
+
+.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);
+}
+
+
+
+.dropdown-menu-left {
+    right: auto;
+    left: 0;
+}
+
+.btn-stretch-x {
+    width: 100%;
+}
+
+.w-100 {
+    width: 100%;
+}
+
+.picture-aspect-ratio {
+    aspect-ratio: 3/5;
+}