html{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
body{
    background-image: url("/icons/wombgblue.png");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.login-icon {
    height: 100px;
    width: 100px;
    background-size:     cover;
    background-repeat:   no-repeat;
    margin: 10px;
    cursor: pointer;
}


/*iframe {*/
/*    width: 100px !important;*/
/*    height: 100px !important;*/
/*    margin: 10px !important;*/
/*    border-radius: 20px !important;*/
/*    background: white;*/
/*}*/

.facebook-icon {
    background-image: url("/icons/facebook.png");
}
.game-center-icon {
    background-image: url("/icons/game center.png");
}
.google-icon {
    background-image: url("/icons/google.png");
}
.apple-icon {
    background-image: url("/icons/apple id.png");
}

.apple-icon div {
    display: none;
}

.login-methods{
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-method {

    font-family: Tahoma;
    color: white;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
}

.animated-logo {
    margin: auto;
    width: 512px;
    height: 512px;
    background: url("/icons/spritesheet.png") left center;
    background-size: cover;
    animation: play 10s steps(83) infinite;
}

@keyframes play {
    100% { background-position: -42496px;}
}


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

.login-container{
    color:white;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(160deg, rgba(92,135,145,1) 0%, rgba(44,82,91,1) 19%, rgba(23,35,47,1) 45%, rgba(0,0,0,1) 100%);
    overflow:hidden;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:3rem;
}

.title {
    display:flex;
    text-wrap: balance;
    text-align: center;
    justify-content: center;
    font-size:clamp(2rem, 2vw, 5rem);
    font-family:Cinzel, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.login-methods{
    width:100%;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-inline:1rem;
    gap:1rem;
}

.login-method{
    flex:1;
    display:flex;
    aspect-ratio: 1/1;
    min-width: 40px;
    max-width:60px;
    border-radius: 10px;
    border:1px solid rgb(255, 255, 255);
    overflow:hidden;
    box-shadow: 0 0 10px black;
}

.login-method > button {
    width: 100%;
    background:transparent;
    aspect-ratio: 1/1;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.login-method > button > i {
    color:white;
    font-size:clamp(2rem, 2vw, 3.75rem);
}

.open-button > i {
    font-size: 20px !important;
}