@font-face{
    font-family: "Impregnable";
    src: url("Impregnable_Personal_Use_Only.ttf");
}
body{
    background-image: url("images/cover_ne2x_ne2x.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Impregnable';
    font-size: 72px;
    text-align: center;
    text-shadow: 0px 0px 5px white, 1px 1px 2px white;
}

.logo{
    margin: auto;
    width: 100%;
    height: 15%;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 30px;
}
.logoimg{
    margin: auto;
    height: 100%;
    margin-bottom: 20px;
}

input{
    padding: 5px;
    border: 2px solid black;
    border-radius: 12px;
    font-family: 'Impregnable';
    font-size: 52px;
    text-align: center;
    box-shadow: 0px 0px 10px white;
    margin-bottom: 50px;
}

.table{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
#mycards{
    width: 100%;
    text-align: center;
}
.card{
    display: inline-block;
    width: 240px;
    object-fit: cover;
    margin: 10px;
    border-radius: 12px;
    background-color: white;
    box-shadow: 0px 0px 10px white;
}
.cardimg{
    border: 5px solid white;
    border-radius: 12px;
    width: 100%;
    transform: translateX(-5px);
    object-fit: cover;
}
.cardimg:hover{
    opacity: 0.9;
}
.mycard{
    width: 14%;
}
.mycard > img {
    height: calc(14vw * 1.5);
}
.onTable{
    width: 22%;
    max-width: 200px;
}
.onTable > img {
    height: calc(22vw * 1.5);
    max-height: calc(200px * 1.5);
}
.bottombar{
    width: 100%;
    text-align: center;
}
button{
    display: inline-block;
    padding: 12px;
    border: 2px solid black;
    border-radius: 12px;
    font-family: 'Impregnable';
    font-size: 40px;
}

.infoicon{
    position: absolute;
    left: 5px;
    top: 5px;
    width: 35px;
    height: 35px;
}

@media only screen and (max-width:600px) {
    input{ width: 70%; }
    .card{ margin: 2px; }
    .mycard{ width: 28%;}
    .mycard > img { height: calc(28vw*1.5);}
    .onTable{ width: 48%;}
    .onTable > img { height: calc(48vw * 1.5);}
}

#information{
    position: absolute;
    left: 5px;
    top: 5px;
    background-color: #ffffff;
    border: 1px solid black;
    border-radius: 5px;
    padding: 12px;
    padding-top: 47px;
    text-align: left;
    display: none;
}

.overlay{
    position: fixed;
    top:0; left:0;
    background-color: #000000aa;
    width: 100%;
    height: 100%;
    display: none;
}
.onOver{
    display: inline-block;
    width: 50vmin;
    margin-top: 40px;
    border-radius: 12px;
    background-color: #000000;
    box-shadow: 0px 0px 0px #00000000;
}