* {
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
         box-sizing: border-box;
}

:root {
 --inputColor: cadetblue;
 --textColor: blue;
 --lineColor: red;
 --borderAll: white;
}

body {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 width: 100%;
 height: 100vh;
 /* background-color: color-mix(in srgb, var(--lineColor) 10%, var(--inputColor) 30%); */
 background-image: url('cyber-4610993_640.jpg');
 background-size: cover;
 font-family: Arial, Helvetica, sans-serif;
}

.invitation {
 width: 80%;
 max-width: 600px;
 margin: 10px;
 text-align: center;
}

.container {
 width: 90%;
 max-width: 500px;
 border: 4px solid var(--borderAll);
 border-radius: 10px;
 background-color: var(--inputColor);
 padding: 10px;
}

label,
#passwordInput,
.info,
h4 {
 display: block;
 margin: 10px;
 text-align: center;
}

.info {
 font-weight: 800;
}

#passwordInput {
 height: 50px;
 padding-left: 10px;
 width: 98%;
 max-width: 400px;
 font-size: 1.3rem;
 margin: 10px auto;
 border-radius: 5px;
 text-align: left;
 outline: 2px solid var(--lineColor);
 color: var(--textColor);
 caret-color: var(--textColor);
}

#passwordInput:focus {
 color: var(--textColor);
 outline: 3px solid var(--lineColor);
}

li {
 margin-left: 15px;
}

span {
 font-weight: 600;
 color: var(--textColor)
}

.clearInput {
 margin: 30px;
 padding: 10px;
 font-size: 1rem;
 font-weight: 600;
 cursor: pointer;
 -webkit-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;
}

.clearInput:hover {
 color: white;
 background-color: black;
}

@media(min-width:1024px) {
 body {
  background-image: url('cyber-4610993_1920.jpg');
 }
}