@font-face {
    font-family: "Chairo";
    src: url("./chiaro.otf") format("opentype");
}

html, body {
    
    background-size: cover;
    margin: 0px;
    padding: 0px;
    image-rendering: pixelated;
    image-rendering:-moz-crisp-edges;
    font-family: "Chairo";
    color: white;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    height: 100vh;           /* Full viewport height */
    margin: 0;               /* Remove default body margin */
}

form {
    margin-bottom: 0px;
}

select {
    float: right;
    margin-top: 12px;
    margin-left: 4px;
}

h1 {
    
   margin-top: -80px;
   margin-bottom: 30px;
}
p {
    margin-top: 10px;
    line-height: 1.6; /* Adjust this value as needed */
}
.container {
    z-index: 2;
    width: 512px;
    padding-top: 100px;
    padding-left: 60;
    padding-bottom: 100px;
    padding-right: 100;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    background-image: url('images/menu.png');
    background-size: cover;
    
}

.slotcontainer {
    cursor: default;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
    height: 269px;
}


.container .header {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 24px;
}

.container .files {
    width: 512px;
}

.container .file {
    cursor: pointer;
    width: 512;
    height: 49;
    background-size: 512px 49px;
}

.slot {
    height: 49;
    transition-property: height;
    transition-duration: 0.25s;
    transition-timing-function: ease;
}

.slot .file1 {
    background-image: url("./images/file1.png");
    background-repeat: no-repeat;
}

.slot .file2 {
    background-image: url("./images/file2.png");
    background-repeat: no-repeat;
}

.slot .file3 {
    background-image: url("./images/file3.png");
    background-repeat: no-repeat;
}


.slot .name {
    width: 274px;
    height: 49px;
    float: left;
    margin-left: 238px;
    line-height: 49px;
    font-size: 24px;
}

.slot .info {
    visibility: hidden;
    opacity: 0;

    overflow: hidden;

    display: inline-block;
    background: url("./images/file_details.png");
    background-size: 512px 122px;

    width: 488px;
    height: 0px;
    padding: 0px;

    transition-property: height, opacity, padding, visibility;
    transition-duration: 0.25s;
    transition-timing-function: ease;
}


.question{
    position: relative;
    font-size: larger;
    top: -10px;
}