@keyframes shakeBorder {
    0% { border-color: #f38ba8;  }
    50% { border-color: #f38ba8; background-color: #5f2735;}
    100% { border-color: #f38ba8;}
}

.callItems.error {
    animation: shakeBorder 0.5s ease;
}

p {
  text-align: center;
}

#Lower {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
}
#fields {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: -1000vw;
}
#getField{
    margin-top: 6vh;
}
#Footer {
    font-size: 2vh;
}
.callItems {
    font-size: 5vh;
    text-align: center;
    background-color: #313244;
    color: #f5c2e7;
    border: 0.02vw solid #45475a;
    padding: 0;
    width: 100%;
    font-family: inherit;
}
.fieldItem {
    position: relative;
    display: flex;
    align-items: center; /* this is the magic */
}
.inputIcons{
    width: 5vh;
    position: absolute;
    padding-left: 1vh;
}
#visIcon{
    right: 0;
    padding-left: 1vh;
    opacity: 0%;
}
.keyField{
	display: flex;
	align-items: center;
}

#fieldItem{
    display: flex;
    align-content: center;

}

button:hover {
    opacity: 0.8;
}
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border: none;
}
@media (max-aspect-ratio: 1) {
    .callItems{
        width: 96vw;
    }
    #key,#pas {
	font-size: 8vw;
    }
    #cookieText {
        font-size: 5vw;
    }
    #Upper {
	font-size: 8vw;
	display: flex;
	align-items: center;
	justify-content: center;
    }
    #getField{
        margin-top: 6vw;
    }
}