body {
    justify-items: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    overflow: hidden;
    background-color: rgb(243, 242, 242);
}

#sheet {
    height: 98dvh;
    aspect-ratio: .7;
    max-width: 98dvw;
    background-color: white;
    box-shadow: 0px 0px 10px rgb(201, 201, 201);
    border: 0.2dvh solid rgb(194, 194, 194);
    border-radius: 2dvh;
    overflow-y: scroll;
    overflow-x: hidden;
}
#sheet::-webkit-scrollbar {
    display: none;
}

button:hover {
    cursor: pointer;
}

#mode {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 1%;
    margin-left: 1%;
    aspect-ratio: 1;
    border-radius: 100dvh;
    max-width: 30dvw;
    max-height: 8dvh;
    overflow: hidden;
    background-color: aqua;
}

button {
    background-color: rgb(62, 138, 252);
    border: none;
    border-radius: 1dvh;
    height: 5dvh;
    width: 30%;
}

.option {
    width: 100%; 
    padding: 0.01%;
}
.option:hover {
    background-color: rgb(236, 235, 235);
}

a {
    color: black;
    text-decoration: none;
}

img {
    max-width: 100%;
}

p {
    font-size: large;
}

.row {
    width: 100%;
    padding: 1dvh;
    padding-left: 2dvh;
    padding-right: 2dvh;
}

textarea {
    border: 0.2dvh solid rgb(194, 194, 194);
    box-shadow: 0px 0px 5px rgb(201, 201, 201);
    border-radius: 1dvh;
    resize: none;
}
textarea:focus {
    outline: none;
    border: 0.3dvh solid rgb(83, 146, 241);
    box-shadow: 0px 0px 5px rgb(58, 131, 240);
}

input {
    border: 0.2dvh solid rgb(194, 194, 194);
    box-shadow: 0px 0px 5px rgb(201, 201, 201);
    border-radius: 1dvh;
}

input:focus {
    outline: none;
    border: 0.3dvh solid rgb(83, 146, 241);
    box-shadow: 0px 0px 5px rgb(58, 131, 240);
}

input[type=date] {
    height: 4dvh;
    width: 28%;
}

textarea[type=text] {
    height: 10dvh;
    width: calc(100% - 5dvh);
}

hr {
    width: 90%;
}