body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    color: white;
    background-color: #000000;
    font-family: 'MV Boli', 'YouMurderer BB';
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease; 
    transform: translateY(0);
    position: relative;
}

h1 {
    user-select: none; 
    font-size: clamp(2em, 3vw, 45px);

}

.triangle {
    width: 0;
    height: 0;
    border-left: 9vh solid transparent;
    border-right: 9vh solid transparent;
    border-bottom: 14vh solid #FFFFFF;
    position: absolute;
    top: 37%;
    right: 45%;
    transform: translateX(-50%); 
    display: none; 
}

.invisible {
    user-select: none; 
    visibility: hidden; 
}

.container {
    text-align: center;
}

#ps {
    padding: 1.4vh 1.5vh;
    font-size: 3vh;
    border: 2px solid white;
    border-radius: 5px;
    color: white;
    background-color: black;
    outline: none;
    text-align: center;
    max-width: 300px;
    max-height: 250px;
}

#submit {
    padding: 1.7vh 1.2vw;
    font-size: 2.5vh;
    border: 2px solid white;
    border-radius: 5px;
    background-color: black;
    color: white;
    cursor: pointer;
    margin-left: 10px;
    transition:  background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;

}

#submit:hover {
    background-color: darkgray; 
    border-color: rgb(231, 231, 231);         
    color: black;  
}

#submit:active {
    background-color: rgb(223, 223, 223);
    border-color: rgb(235, 235, 235);

}

#ps.error {
    border-color: red;
    background-color: #941414;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

@font-face {
    font-family: 'mvboliFont'; 
    src: url('fonts/mvboli.ttf') format('truetype'); 
}


body.slide-up {
    transform: translateY(-100%); 
}

@media only screen and (max-width: 568px) {
    
    @font-face {
        font-family: 'mvboliFont'; 
        src: url('fonts/mvboli.ttf') format('truetype'); 
    }

    body, html{
     font-family: 'MV Boli', 'mvboliFont';
     letter-spacing: 0.1em
    }

    h1 {
      font-size: 25px;
    }

    .triangle {
        width: 0;
        height: 0;
        border-left: 35px solid transparent;
        border-right: 35px solid transparent;
        border-bottom: 55px solid #FFFFFF;
        position: absolute;
        transform: translateX(-25%);
        display: none;
        top: 38%;
        right: 35%;
    }

    #ps {
     padding: 8px 10px;
     font-size: 16px;
     margin-left: 8px;
     width: 130px;
     margin-bottom: 10px;
    }

    #submit {
     margin-right: 5px;
     margin-left: 2px;
     padding: 8px 11px;
     font-size: 16px;
    }

}

@media only screen and (min-width: 669px) and (max-width:768px) {

    @font-face {
        font-family: 'mvboliFont'; 
        src: url('fonts/mvboli.ttf') format('truetype'); 
        font-display: block;
    }

    body, html{
     font-family:'MV Boli', 'mvboliFont'; 
     letter-spacing: 0.3em
    }

    #ps {
        padding: 1.5vh 1.4vh;
        font-size: 3.2vh;
        margin-left: 5px;
        width: 45vw;
        max-width: 280px;
        margin-bottom: 10px;
        border-radius: 8px;
    }

    #submit {
        padding: 1.7vh 2vw;
        font-size: 3vh;
        border-radius: 5px;
        margin-left: 0.5vw;
    }

    h1 {
        font-size: clamp(2.5em, 2.6em, 25px);
        margin-bottom: 20px;
    }

    .triangle {
        right: 35%;
    }
}

@media only screen and (min-width: 998px) and (max-width:1024px) {

    body, html{
     font-family: 'MV Boli', 'YouMurderer BB', 'mvboliFont', 'CipherFontA'; 
     letter-spacing: 0.3em
    }
 
    #ps {
        padding: 1.2vh 1.4vh;
        font-size: clamp(25px, 3.1vh, 3.5vh);
        margin-left: 5px;
        width: 45vw;
        max-width: 280px;
        margin-bottom: 10px;
        border-radius: 8px;
        /* max-height: 70px;*/
    }

    #submit {
        padding: 1.5vh;
        font-size: 22px;
        margin-left: 5px;
    }

    h1 {
        font-size:  clamp(2.7em, 3.5em, 30px);
        margin-bottom: 18px;
    }

    .triangle {
        right: 40%;
    }
}

@media only screen and (min-width: 998px) and (max-width:1024px) and (max-height: 2000px) {

    body, html{
        font-family: 'MV Boli', 'YouMurderer BB', 'mvboliFont', 'CipherFontA'; 
        letter-spacing: 0.3em
    }

    h1 {
        font-size: 4vh;
        margin-bottom: 30px;
    }

    #ps {
        padding: 1vh 1.4vh;
        font-size: 40px;
        margin-left: 5px;
        width: 50vw;
        max-width: 400px;
        margin-bottom: 10px;
        border-radius: 8px;
    }

    #submit {
        padding: 1.2vh 1.5vh;
        font-size: 35px;
        margin-left: 10px;
    }

    .triangle {
        border-left: 5vh solid transparent;
        border-right: 5vh solid transparent;
        border-bottom: 8vh solid #FFFFFF;
        right: 35%;
        top: 42%;
    }
}
@media only screen and (min-width: 1000px) and (max-width:1024px) {
    h1 {
        font-size: clamp(3vw, 4.5vw, 45px);
        margin-bottom: 18px;
    }
    #submit {
        padding: 1.2vh 1.5vh;
        font-size: 33px;
        margin-left: 10px;
    }
    #ps {
        padding: 1vh 1.4vh;
        font-size: 40px;
        margin-left: 5px;
        width: 50vw;
        max-width: 350px;
        margin-bottom: 10px;
        border-radius: 8px;
    }
}
@media only screen and (min-width: 1025px) and (max-width:1599px) {
    #ps {
        padding: 1.7vh 1.2vh;
        border: 2px solid white;
        border-radius: 5px;
        max-width: 280px;
        font-size: 22px;
    }

    h1{
        font-size: clamp(3vw, 4.5vw, 45px);
        margin-bottom: 18px;
    }

    #submit {
        padding: 1.8vh 2vh;
        font-size: 22px;
    }

    .triangle {
        right: 45%;
    }
}

@media only screen and (min-width: 1600px) and (max-width:1640px) {

    h1{
        margin-bottom: 23px;
    }

    .triangle {
    border-left: 7vh solid transparent;
    border-right: 7vh solid transparent;
    border-bottom: 11.5vh solid #FFFFFF;
    top: 40%;
    right: 45%;
    }
}

@media only screen and (min-width:1920px)and (max-width:2299px) {

    .triangle {
        width: 0;
        height: 0;
        border-left:  7vh solid transparent;
        border-right: 7vh solid transparent;
        border-bottom: 11vh solid #FFFFFF;
        position: absolute;
        transform: translateX(-25%);
        display: none;
        top: 40%;
        right: 47%;
    }

    #ps {
        padding: 1.3vh;
        font-size: 3.5vh;
        border: 2px solid white;
        border-radius: 5px;
        max-width: 320px;
    }

    h1{
        font-size: clamp(2.8vw, 3vw, 70px);
        margin-bottom: 20px;
    }

    #submit {
        padding: 1.5vh 1vw;
        font-size: 3vh;
    }
}

@media only screen and (min-width: 2300px){

    .triangle {
        width: 0;
        height: 0;
        border-left:  7vh solid transparent;
        border-right: 7vh solid transparent;
        border-bottom: 11vh solid #FFFFFF;
        position: absolute;
        right: 46%;
        transform: translateX(-25%);
        display: none;
        top: 40%;
    }

    #ps {
        padding: 1.2vh;
        font-size: 3.5vh;
        border: 2px solid white;
        border-radius: 5px;
        max-width: 420px;
    }

    h1{
        font-size: clamp(2.8vw, 3vw, 70px);
        margin-bottom: 20px;
    }

    #submit {
        padding: 1.5vh ;
        font-size: 3vh;
    }
  }