nav{margin-top:20px;background-color:#002c54;align-self:center;display:flex;width:95vw;height:75px;box-shadow:0 2px 20px 2px #ffffff50;border-radius:10px;align-items:center;justify-content:space-evenly;padding:5px 0}.nav-buttons-container{margin-left:90px;display:flex;justify-content:space-evenly;align-items:center;width:85vw}.nav-button{display:flex;align-items:center;display:inline-block;transition:all .2s ease-in;position:relative;overflow:hidden;z-index:1;color:#090909;cursor:pointer;font-size:18px;border-radius:.5em;background:transparent;border:1px solid #e8e8e8}.nav-button:active{color:#666;box-shadow:inset 4px 4px 12px #c5c5c5,inset -4px -4px 12px #fff}.nav-button:before{content:"";position:absolute;left:50%;transform:translate(-50%) scaleY(1) scaleX(1.25);top:100%;width:140%;height:180%;background-color:#0000000d;border-radius:50%;display:block;transition:all .5s .1s cubic-bezier(.55,0,.1,1);z-index:-1}.nav-button:after{content:"";position:absolute;left:55%;transform:translate(-50%) scaleY(1) scaleX(1.45);top:180%;width:160%;height:190%;background-color:#c5001a;border-radius:50%;display:block;transition:all .5s .1s cubic-bezier(.55,0,.1,1);z-index:-1}.nav-button:hover{color:#fff}.nav-button:hover:before{top:-35%;background-color:#c5001a;transform:translate(-50%) scaleY(1.3) scaleX(.8)}.nav-button:hover:after{top:-45%;background-color:#c5001a;transform:translate(-50%) scaleY(1.3) scaleX(.8)}.nav-contact{display:flex;align-items:center;height:45px;width:150px}.button2{display:inline-block;transition:all .2s ease-in;position:relative;overflow:hidden;z-index:1;color:#090909;padding:.7em 1.7em;cursor:pointer;font-size:18px;border-radius:.5em;background:#e8e8e8;border:1px solid #e8e8e8;box-shadow:3px 3px 12px #c5c5c5,-3px -3px 12px #fff}.button2:active{color:#666;box-shadow:inset 4px 4px 12px #c5c5c5,inset -4px -4px 12px #fff}.button2:before{content:"";position:absolute;left:50%;transform:translate(-50%) scaleY(1) scaleX(1.25);top:100%;width:140%;height:180%;background-color:#0000000d;border-radius:50%;display:block;transition:all .5s .1s cubic-bezier(.55,0,.1,1);z-index:-1}.button2:after{content:"";position:absolute;left:55%;transform:translate(-50%) scaleY(1) scaleX(1.45);top:180%;width:160%;height:190%;background-color:#c5001a;border-radius:50%;display:block;transition:all .5s .1s cubic-bezier(.55,0,.1,1);z-index:-1}.button2:hover{color:#fff;border:1px solid #c5001a}.button2:hover:before{top:-35%;background-color:#c5001a;transform:translate(-50%) scaleY(1.3) scaleX(.8)}.button2:hover:after{top:-45%;background-color:#c5001a;transform:translate(-50%) scaleY(1.3) scaleX(.8)}.Btn{display:flex;align-items:center;justify-content:flex-start;width:55px;height:55px;border:none;border-radius:50%;cursor:pointer;position:relative;overflow:hidden;transition-duration:.3s;box-shadow:2px 2px 10px #0003;background-color:#c5001a}.sign{width:100%;transition-duration:.3s;display:flex;align-items:center;justify-content:center}.sign svg{width:17px}.sign svg path{fill:#fff}@media screen and (max-width: 430px){nav{width:90vw;height:auto;flex-direction:column;padding:10px;box-shadow:0 2px 4px #212121}.nav-buttons-container{margin-left:0;width:100%;flex-wrap:wrap;gap:10px}.nav-button,.button2,.Btn{font-size:14px;padding:.5em 1em}.nav-contact{height:auto;width:auto;margin-top:10px}.sign svg{width:15px}.nav-button:before,.nav-button:after,.button2:before,.button2:after{width:120%;height:160%}.nav-button:hover:before,.button2:hover:before,.nav-button:hover:after,.button2:hover:after{top:-25%;transform:translate(-50%) scaleY(1.2) scaleX(.9)}}#app{display:flex;flex-direction:column;width:100vw;height:100vh;margin:0;text-align:center}.logo{height:6em;padding:1.5em}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.preact:hover{filter:drop-shadow(0 0 2em #673ab8aa)}.card{padding:2em}.read-the-docs{color:#888}:root{font-family:Poppins,sans-serif;font-weight:600;font-style:normal;line-height:1.5;color-scheme:light dark;color:#ffffffde;background-color:#002c54;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid #ffffff;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:transparent;cursor:pointer;transition:border-color .25s}button:hover{border-color:#fff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.onloading-background{display:flex;flex-direction:column;background-color:#b3b3b3;justify-content:center;height:100%;width:100%}.register-form-container{display:flex;align-self:center;align-items:center;flex-direction:column;width:45vw;height:60vh;border-radius:5px;background-color:#002c54;box-shadow:0 5px 15px #1e1e1e}.register-form{width:15vw;display:flex;flex-direction:column;align-items:center}.register-input-container{font-size:20px;margin-bottom:15px}.register-input{width:12vw;height:2.5vh;border-radius:5px;font-size:18px}.register-button{width:15vw;margin-top:20px;margin-bottom:35px}.or-divider{padding-top:35px;padding-bottom:40px}.login-form-container{display:flex;align-self:center;align-items:center;flex-direction:column;width:40vw;height:60vh;border-radius:5px;background-color:#002c54}.login-header{margin-top:20px;color:#eee;font-size:50px;font-family:Poppins,sans-serif;font-weight:600;font-style:normal;text-decoration:underline;margin-bottom:20px}.login-form{width:15vw;height:22vh;display:flex;flex-direction:column;text-align:center;align-items:center}.login-input-container{display:flex;margin-bottom:25px}.login-input{width:12vw;height:2.5vh;border-radius:5px;font-size:18px}.signin{float:right;max-width:420px;display:flex;padding:.5rem 1.4rem;font-size:.875rem;line-height:1.25rem;font-weight:700;text-align:center;font-family:Montserrat,sans-serif;vertical-align:middle;align-items:center;border-radius:.5rem;border:1px solid rgba(255,255,255,.25);gap:.75rem;color:#606060;background-color:#fff;cursor:pointer;transition:all .25s cubic-bezier(0,.87,.12,1)}.signin:hover{transform:scale(1.025)}.signin:active{transform:scale(.975)}button svg{height:24px;width:auto}.page-home{flex-direction:column;align-items:center;display:flex}.home-title{justify-content:center;display:flex;color:#eee;font-size:126px;width:80%;height:180px}.home-title2{justify-content:center;display:flex;color:#eee;font-size:126px;width:80%;height:130px;align-items:center}.home-subtitle{display:flex;justify-content:center;font-size:22px;width:24vw}.home-button{width:20vw;height:7vh;border:0 solid;cursor:pointer;font-family:system-ui;font-size:22px;background:linear-gradient(140deg,#003d76,#c5001a);border-radius:999px;font-weight:900;padding:1.8rem 5rem;position:relative;text-transform:uppercase;margin-top:15px}.home-button span{background:#c5001a;border-radius:999px;color:#fff;display:grid;top:5px;right:5px;bottom:5px;left:5px;place-items:center;position:absolute;transition:background .3s}.home-button:hover span{background:none}.home-img{display:flex;width:350px;height:350px;border-radius:35px;margin-top:15px}.create-profile-container{display:flex;align-self:center;flex-direction:column;width:50vw;height:90vh;border-radius:5px;background-color:#002c54;justify-content:center;align-items:center}.create-profile-form{display:flex;width:30vw;height:40vh;align-items:center;justify-content:flex-end;flex-direction:column}.create-profile-input-container{display:flex;margin-left:10px;width:9vw;height:2.5vh;border-radius:8px;font-size:14px}.create-profile-inputs{display:flex;justify-content:space-between;text-align:start;margin-bottom:25px;width:30vw}.create-profile-image-container{display:flex;justify-content:center;width:30vw;height:30vh;overflow:auto}.create-profile-image{display:flex;border-radius:10px}.create-profile-button{display:flex;margin-bottom:2em}.cssbuttons-io-button{display:flex;align-items:center;font-family:inherit;font-weight:500;font-size:17px;padding:.8em 1.5em .8em 1.2em;color:#fff;background:#ad5389;background:linear-gradient(185deg,#c5001a,#002c54);border:none;box-shadow:0 .2em 1.8em -.4em #ad80ff;letter-spacing:.05em;border-radius:20em}.cssbuttons-io-button svg{margin-right:8px}.cssbuttons-io-button:hover{box-shadow:0 .5em 1.5em -.5em #955bff}.cssbuttons-io-button:active{box-shadow:0 .3em 1em -.5em #a06dff}.matches-container{display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center}.matches{display:flex;height:90vh;width:100vw;overflow:scroll;justify-content:center}.match-details{display:flex;width:300px}.matches-ul{display:flex;flex-direction:column;list-style-type:square}.match-list-item{display:flex;border-bottom:1px solid #eeeeee;padding-bottom:20px;margin-bottom:55px;align-items:center}.matches-list-background{display:flex;justify-self:center;flex-direction:column;justify-content:center;background-color:#4545458c;margin-top:40px;border-radius:12px;box-shadow:0 5px 15px #1e1e1e;align-items:center;width:80vw;height:45vw}.form-container{width:500px;background:linear-gradient(#212121,#212121) padding-box,linear-gradient(145deg,transparent 35%,#0006b6,#ff1a1a) border-box;border:2px solid transparent;padding:32px 24px;font-size:14px;font-family:inherit;color:#fff;display:flex;flex-direction:column;gap:20px;box-sizing:border-box;border-radius:16px;margin-top:50px}.form-container button:active{scale:.95}.form-container .form{display:flex;flex-direction:column;gap:20px}.form-container .form-group{display:flex;flex-direction:column;gap:2px}.form-container .form-group label{display:block;margin-bottom:5px;color:#717171;font-weight:600;font-size:12px}.form-container .form-group input{width:90%;padding:12px 16px;border-radius:8px;color:#fff;font-family:inherit;background-color:transparent;border:1px solid #414141}.form-container .form-group textarea{width:90%;padding:12px 16px;border-radius:8px;resize:none;color:#fff;height:96px;border:1px solid #414141;background-color:transparent;font-family:inherit}.form-container .form-group input::placeholder{opacity:.5}.form-container .form-group input:focus{outline:none;border-color:#ff1a1a}.form-container .form-group textarea:focus{outline:none;border-color:#ff1a1a}.form-container .form-submit-btn{display:flex;align-items:flex-start;justify-content:center;align-self:flex-start;font-family:inherit;color:#717171;font-weight:600;width:40%;background:#313131;border:1px solid #414141;padding:12px 16px;font-size:inherit;gap:8px;margin-top:8px;cursor:pointer;border-radius:6px}.form-container .form-submit-btn:hover{background-color:#fff;border-color:#fff}.contact-page-alignment{display:flex;justify-content:center;width:100vw;height:80vh;align-items:center}.contact-page-container{display:flex;height:65vh;justify-content:center}.squad-container{display:flex;justify-content:center;flex-direction:column;align-items:center}.squad-team-select{width:20vw;height:7vh;background:#e8e8e8;font-size:20px;font-weight:700;display:flex;align-items:center;color:#fff;justify-content:center;border:5px solid #c5001a;border-radius:8px;color:#002c54;box-shadow:0 1px 10px 1px #eee}.player-list{width:80vw;height:60vh;font-size:40px;overflow:scroll;border:2px solid #e8e8e8;border-radius:10px;margin-top:20px;box-shadow:0 5px 10px 10px #1e1e1e}.profile-pic-display{display:flex;justify-content:center;width:35vw;height:40vh;overflow:auto}.profile-display-picture{border-radius:10px}.profile-display-container{display:flex;justify-content:center;align-items:center;width:100vw;height:90vh}.profile-display-card{display:flex;width:35vw;height:80vh;border-radius:10px;align-items:center;justify-content:center;flex-direction:column;background:#e8e8e8;margin-bottom:5vh}.profile-display-info-container{border:1px solid #626262;border-radius:15px;padding:10px;margin-top:10px}.profile-display-info{display:flex;flex-direction:column;align-items:flex-start;width:22vw;color:#626262}.profile-display-info-component{display:flex;justify-content:flex-start;text-align:start;border-bottom:1px solid #626262;margin-bottom:5px}.profile-display-buttons{display:flex;width:24vw;height:10vh;justify-content:space-evenly;align-items:center}.profile-display-next-btn{display:inline-block;transition:all .2s ease-in;position:relative;overflow:hidden;z-index:1;color:#090909;padding:.7em 1.7em;font-size:18px;border-radius:.5em;background:#e8e8e8;border:1px solid #e8e8e8;box-shadow:3px 3px 12px #a6a6a6,-3px -3px 12px #fff}.profile-display-next-btn:active{color:#666;box-shadow:inset 4px 4px 12px #c5c5c5,inset -4px -4px 12px #fff}.profile-display-next-btn:before{content:"";position:absolute;left:50%;transform:translate(-50%) scaleY(1) scaleX(1.25);top:100%;width:140%;height:180%;background-color:#0000000d;border-radius:50%;display:block;transition:all .5s .1s cubic-bezier(.55,0,.1,1);z-index:-1}.profile-display-next-btn:after{content:"";position:absolute;left:55%;transform:translate(-50%) scaleY(1) scaleX(1.45);top:180%;width:160%;height:190%;background-color:#cf001c;border-radius:50%;display:block;transition:all .5s .1s cubic-bezier(.55,0,.1,1);z-index:-1}.profile-display-next-btn:hover{color:#fff;border:1px solid #cf001c}.profile-display-next-btn:hover:before{top:-35%;background-color:#cf001c;transform:translate(-50%) scaleY(1.3) scaleX(.8)}.profile-display-next-btn:hover:after{top:-45%;background-color:#cf001c;transform:translate(-50%) scaleY(1.3) scaleX(.8)}.profile-display-message-container{display:flex;width:60vw;height:50vh;flex-direction:column;align-items:center}.profile-display-message1{display:flex;font-size:52px;font-weight:700}.profile-display-message2{display:flex;font-size:22px;font-weight:700;margin-bottom:75px}.social-media-btn{--btn-color: #cf001c;display:flex;align-items:center;padding:16px 32px;font-family:Roboto,sans-serif;font-weight:500;font-size:16px;line-height:1;color:#fff;background:none;border:none;outline:none;overflow:hidden;cursor:pointer;filter:drop-shadow(0 2px 8px rgba(39,94,254,.32));transition:.3s cubic-bezier(.215,.61,.355,1)}.social-media-btn:before{position:absolute;content:"";top:0;left:0;z-index:-1;width:100%;height:100%;background:var(--btn-color);border-radius:24px;transition:.3s cubic-bezier(.215,.61,.355,1)}.social-media-btn span,.btn span span{display:inline-flex;vertical-align:middle;transition:.3s cubic-bezier(.215,.61,.355,1)}.social-media-btn span{transition-delay:.05s}.social-media-btn span:first-child{padding-right:7px}.social-media-btn span span{margin-left:8px;transition-delay:.1s}.social-media-btn ul{position:absolute;top:50%;left:0;right:0;display:flex;margin:0;padding:0;list-style-type:none;transform:translateY(-50%)}.social-media-btn ul li{flex:1}.social-media-btn ul li a{display:inline-flex;vertical-align:middle;transform:translateY(55px);transition:.3s cubic-bezier(.215,.61,.355,1)}.social-media-btn ul li a:hover{opacity:.5}.social-media-btn:hover:before{transform:scale(1.2)}.social-media-btn:hover span,.btn:hover span span{transform:translateY(-55px)}.social-media-btn:hover ul li a{transform:translateY(0)}.social-media-btn:hover ul li:nth-child(1) a{transition-delay:.15s}.social-media-btn:hover ul li:nth-child(2) a{transition-delay:.2s}.social-media-btn:hover ul li:nth-child(3) a{transition-delay:.25s}.login-register-button{display:flex;align-items:center;justify-content:center;transition:all .2s ease-in;position:relative;overflow:hidden;z-index:1;color:#e8e8e8;cursor:pointer;font-size:30px;border-radius:.5em;background:transparent;border:1px solid #e8e8e8;width:15vw;height:8vh}.login-register-button:active{color:#666;box-shadow:inset 4px 4px 12px #c5c5c5,inset -4px -4px 12px #fff}.login-register-button:before{content:"";position:absolute;left:50%;transform:translate(-50%) scaleY(1) scaleX(1.25);top:100%;width:140%;height:180%;background-color:#0000000d;border-radius:50%;display:block;transition:all .5s .1s cubic-bezier(.55,0,.1,1);z-index:-1}.login-register-button:after{content:"";position:absolute;left:55%;transform:translate(-50%) scaleY(1) scaleX(1.45);top:180%;width:160%;height:190%;background-color:#c5001a;border-radius:50%;display:block;transition:all .5s .1s cubic-bezier(.55,0,.1,1);z-index:-1}.login-register-button:hover{color:#fff}.login-register-button:hover:before{top:-35%;background-color:#c5001a;transform:translate(-50%) scaleY(1.3) scaleX(.8)}.login-register-button:hover:after{top:-45%;background-color:#c5001a;transform:translate(-50%) scaleY(1.3) scaleX(.8)}@media screen and (max-width: 430px){body{flex-direction:column;justify-content:center;padding:20px}.register-form-container,.login-form-container,.create-profile-container{width:90vw;height:auto;padding:20px}.match-details{width:50%;font-size:8px;overflow:auto}.match-list-item{padding-bottom:10px;margin-bottom:26px}.matches-list-background{height:70vh;overflow:scroll}.register-form,.login-form,.create-profile-form{width:80vw}.register-input,.login-input,.create-profile-inputs input,.create-profile-inputs select,.create-profile-inputs textarea{width:100%;font-size:16px}.register-input .register-button,.register-input .login-register-button,.register-input .create-profile-button,.register-input .profile-display-next-btn,.login-input .register-button,.login-input .login-register-button,.login-input .create-profile-button,.login-input .profile-display-next-btn,.create-profile-inputs input .register-button,.create-profile-inputs input .login-register-button,.create-profile-inputs input .create-profile-button,.create-profile-inputs input .profile-display-next-btn,.create-profile-inputs select .register-button,.create-profile-inputs select .login-register-button,.create-profile-inputs select .create-profile-button,.create-profile-inputs select .profile-display-next-btn,.create-profile-inputs textarea .register-button,.create-profile-inputs textarea .login-register-button,.create-profile-inputs textarea .create-profile-button,.create-profile-inputs textarea .profile-display-next-btn{width:80%;font-size:16px;padding:10px}.register-input h1,.register-input .login-header,.register-input .profile-display-message1,.register-input .profile-display-message2,.login-input h1,.login-input .login-header,.login-input .profile-display-message1,.login-input .profile-display-message2,.create-profile-inputs input h1,.create-profile-inputs input .login-header,.create-profile-inputs input .profile-display-message1,.create-profile-inputs input .profile-display-message2,.create-profile-inputs select h1,.create-profile-inputs select .login-header,.create-profile-inputs select .profile-display-message1,.create-profile-inputs select .profile-display-message2,.create-profile-inputs textarea h1,.create-profile-inputs textarea .login-header,.create-profile-inputs textarea .profile-display-message1,.create-profile-inputs textarea .profile-display-message2{font-size:24px}.register-input .home-title,.register-input .home-title2,.login-input .home-title,.login-input .home-title2,.create-profile-inputs input .home-title,.create-profile-inputs input .home-title2,.create-profile-inputs select .home-title,.create-profile-inputs select .home-title2,.create-profile-inputs textarea .home-title,.create-profile-inputs textarea .home-title2{font-size:36px;height:auto}.register-input .home-subtitle,.login-input .home-subtitle,.create-profile-inputs input .home-subtitle,.create-profile-inputs select .home-subtitle,.create-profile-inputs textarea .home-subtitle{font-size:16px}.register-input .matches,.register-input .player-list,.register-input .profile-display-container,.login-input .matches,.login-input .player-list,.login-input .profile-display-container,.create-profile-inputs input .matches,.create-profile-inputs input .player-list,.create-profile-inputs input .profile-display-container,.create-profile-inputs select .matches,.create-profile-inputs select .player-list,.create-profile-inputs select .profile-display-container,.create-profile-inputs textarea .matches,.create-profile-inputs textarea .player-list,.create-profile-inputs textarea .profile-display-container{width:100%}.register-input .profile-pic-display,.register-input .profile-display-card,.login-input .profile-pic-display,.login-input .profile-display-card,.create-profile-inputs input .profile-pic-display,.create-profile-inputs input .profile-display-card,.create-profile-inputs select .profile-pic-display,.create-profile-inputs select .profile-display-card,.create-profile-inputs textarea .profile-pic-display,.create-profile-inputs textarea .profile-display-card{width:90%}.register-input .profile-display-info,.login-input .profile-display-info,.create-profile-inputs input .profile-display-info,.create-profile-inputs select .profile-display-info,.create-profile-inputs textarea .profile-display-info{width:100%}.register-input .social-media-btn,.register-input .cssbuttons-io-button,.login-input .social-media-btn,.login-input .cssbuttons-io-button,.create-profile-inputs input .social-media-btn,.create-profile-inputs input .cssbuttons-io-button,.create-profile-inputs select .social-media-btn,.create-profile-inputs select .cssbuttons-io-button,.create-profile-inputs textarea .social-media-btn,.create-profile-inputs textarea .cssbuttons-io-button{font-size:14px;padding:8px 16px}}