@import url('https://fonts.googleapis.com/css?family=Montserrat:500'); @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap'); :root { --shadow-color: #FF9E9E; --shadow-color-light: white; } .navbar { max-width: 100%; height: 100%; background: rgba(0,0,0,0.25); } header { display: flex; justify-content: center; align-items: center; padding: 30px 10%; max-width: 100%; height: 10%; background-color: rgb(0, 0, 0, 0.25); border: none; } table{ border-collapse: collapse; color: white; font-size: 2rem; background: rgba(0,0,0,0.4); margin-left:10px; margin-bottom: 5%; } img { width: 120px; height: 120px; border-bottom: 0px; } html{ text-align: center; } body { padding: 0; margin: 0; max-width: 100%; background-image: url('batman.webp'); object-fit: cover; height: 100vh; background-size: cover; background-repeat: no-repeat; } li, a:not(.btn) { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 1.2rem; text-decoration: none; color: white; padding: 10%; list-style: none; } h1{ font-family: 'Roboto', sans-serif; font-width: 900; font-size: 5rem; } #projection-add { margin-left: 142px; width: 75%; } .right { display: flex; align-items: center; justify-content: center; background-color: rgb(0, 225, 255, 0.05); border-radius: 10%; flex-direction: row; margin-left: 25%; width: 17%; height: 2%; } .right a { margin: -5px; } .navbar{ max-width: 100%; height: 100vh; } .reg { color: rgb(255, 0, 0); } ul { display: flex; flex-direction: row; } li, a:hover:not(.btn) { color: red; font-size: 1.5rem; } .reg:hover { color: white; } .container-main{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100% } P{ font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 4rem; text-decoration: none; color: white; width: 80%; list-style: none; margin-top: -2%; } .glow{ text-transform: uppercase; height: auto; text-align: center; } .glow { color: white; animation: neon 3s infinite; } .h1Combined{ display: flex; flex-direction: row; align-items: center; justify-content: center; max-width: 100%; } @keyframes neon { 0% { text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light), 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light), 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color); } 50% { text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light), 0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color); } 100% { text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light), 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light), 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color); } } .btn{ text-shadow: -1px -1px 10px rgba(255,255,255,0.5); border: 1px solid #b70000; color: white; font-size: 1.5rem; border:none; background: #af0101; padding: 0.5rem 1.3rem; border-radius: 10%; cursor: pointer; transition: 1s ease; display:block; box-shadow: 3px 2px 10px #d50101, -1px -1px 1px #e60000; font-family: 'Roboto', sans-serif; font-weight: 500; text-decoration: none; transition: infinite 1s ease; } .btn:hover{ background-color: #58ACFA; color: white; } .btn2{ text-shadow: -1px -1px 10px rgba(255,255,255,0.5); border: 1px solid #b70000; color: white; font-size: 1.5rem; border:none; background: #af0101; padding: 0.5rem 1.3rem; border-radius: 10%; cursor: pointer; transition: 1s ease; display:block; box-shadow: 3px 2px 10px #d50101, -1px -1px 1px #e60000; font-family: 'Roboto', sans-serif; font-weight: 500; text-decoration: none; transition: infinite 1s ease; } .btn2:hover{ background-color: #58ACFA; color: white; } /*@import url('https://fonts.googleapis.com/css?family=Montserrat:500');*/ /*@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');*/ /*:root {*/ /* --shadow-color: #FF9E9E;*/ /* --shadow-color-light: white;*/ /*}*/ /*.navbar {*/ /* max-width: 100%;*/ /* height: 100%;*/ /* background: rgba(0,0,0,0.25);*/ /*}*/ /*header {*/ /* display: flex;*/ /* justify-content: center;*/ /* align-items: center;*/ /* padding: 30px 10%;*/ /* max-width: 100%;*/ /* height: 10%;*/ /* background-color: rgb(0, 0, 0, 0.25);*/ /* border: none;*/ /*}*/ /*table{*/ /* border-collapse: collapse;*/ /* color: white;*/ /* font-size: 1.5rem;*/ /* background: rgba(0,0,0,0.4);*/ /*}*/ /*img {*/ /* width: 120px;*/ /* height: 120px;*/ /*}*/ /*html{*/ /* text-align: center;*/ /*}*/ /*body {*/ /* padding: 0;*/ /* margin: 0;*/ /* max-width: 100%;*/ /* background-image: url('giphyavengers.webp');*/ /* object-fit: cover;*/ /* height: 100vh;*/ /* background-size: cover;*/ /* background-repeat: no-repeat;*/ /*}*/ /*li,*/ /*a:not(.btn) {*/ /* font-family: "Montserrat", sans-serif;*/ /* font-weight: 500;*/ /* font-size: 1.2rem;*/ /* text-decoration: none;*/ /* color: white;*/ /* padding: 10%;*/ /* list-style: none;*/ /*}*/ /*h1{*/ /* font-family: 'Roboto', sans-serif;*/ /* font-width: 900;*/ /* font-size: 6rem;*/ /*}*/ /*.right {*/ /* display: flex;*/ /* align-items: center;*/ /* justify-content: center;*/ /* background-color: rgb(0, 225, 255, 0.05);*/ /* border-radius: 10%;*/ /* flex-direction: row;*/ /* margin-left: 25%;*/ /* width: 17%;*/ /* height: 2%;*/ /*}*/ /*.right a {*/ /* margin: -5px;*/ /*}*/ /*.navbar{*/ /* max-width: 100%;*/ /* height: 100vh;*/ /*}*/ /*.reg {*/ /* color: rgb(255, 0, 0);*/ /*}*/ /*ul {*/ /* display: flex;*/ /* flex-direction: row;*/ /*}*/ /*li,*/ /*a:hover:not(.btn) {*/ /* color: red;*/ /* font-size: 1.5rem;*/ /*}*/ /*.reg:hover {*/ /* color: white;*/ /*}*/ /*.container-main{*/ /* display: flex;*/ /* flex-direction: column;*/ /* align-items: center;*/ /* justify-content: center;*/ /* width: 100%;*/ /* height: 100%*/ /*}*/ /*P{*/ /* font-family: "Montserrat", sans-serif;*/ /* font-weight: 500;*/ /* font-size: 4rem;*/ /* text-decoration: none;*/ /* color: white;*/ /* width: 80%;*/ /* list-style: none;*/ /* margin-top: -2%;*/ /*}*/ /*.glow{*/ /* text-transform: uppercase;*/ /* height: auto;*/ /* text-align: center;*/ /*}*/ /*.glow {*/ /* color: white;*/ /* animation: neon 3s infinite;*/ /*}*/ /*.h1Combined{*/ /* display: flex;*/ /* flex-direction: row;*/ /* align-items: center;*/ /* justify-content: center;*/ /* max-width: 100%;*/ /*}*/ /*@keyframes neon {*/ /* 0% {*/ /* text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),*/ /* 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),*/ /* 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);*/ /* }*/ /* 50% {*/ /* text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),*/ /* 0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),*/ /* 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);*/ /* }*/ /* 100% {*/ /* text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),*/ /* 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),*/ /* 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);*/ /* }*/ /*}*/ /*.btn{*/ /* text-shadow: -1px -1px 10px rgba(255,255,255,0.5);*/ /* border: 1px solid #b70000;*/ /* color: white;*/ /* font-size: 1.5rem;*/ /* border:none;*/ /* background: #af0101;*/ /* padding: 0.5rem 1.3rem;*/ /* border-radius: 10%;*/ /* cursor: pointer;*/ /* transition: 1s ease;*/ /* display:block;*/ /* box-shadow: 3px 2px 10px #d50101,*/ /* -1px -1px 1px #e60000;*/ /* font-family: 'Roboto', sans-serif;*/ /* font-weight: 500;*/ /* text-decoration: none;*/ /* transition: infinite 1s ease;*/ /*}*/ /*.btn:hover{*/ /* background-color: #58ACFA;*/ /* color: white;*/ /*}*/ /*.btn2{*/ /* text-shadow: -1px -1px 10px rgba(255,255,255,0.5);*/ /* border: 1px solid #b70000;*/ /* color: white;*/ /* font-size: 1.5rem;*/ /* border:none;*/ /* background: #af0101;*/ /* padding: 0.5rem 1.3rem;*/ /* border-radius: 10%;*/ /* cursor: pointer;*/ /* transition: 1s ease;*/ /* display:block;*/ /* box-shadow: 3px 2px 10px #d50101,*/ /* -1px -1px 1px #e60000;*/ /* font-family: 'Roboto', sans-serif;*/ /* font-weight: 500;*/ /* text-decoration: none;*/ /* transition: infinite 1s ease;*/ /*}*/ /*.btn2:hover{*/ /* background-color: #58ACFA;*/ /* color: white;*/ /*}*/