button {
    width: 25vw;
    height: 25vw;

    background-color: black;
    color: white;
font-size: clamp(0.8rem, 2.5vw, 1.2rem);

    border-color: rgb(204, 180, 180);
    border-width: 5px;
    transition: 100ms;
}

::selection {
  background: #ffffff;   /* Highlight background color */
  color: rgb(0, 0, 0);          /* Highlighted text color */
}

a {
    color: rgb(112, 174, 255);
}

button:hover {
    background-color: rgb(204, 180, 180);
    color: black;
    scale: 1.05;
    transition: 100ms;
}

#centerpoint {
    top: 50%;
    left: 50%;
    position: absolute;
}

textarea {
    width: 25vw;
    height: 15vh;
    background-color: black;
    color: white;
font-size: clamp(0.8rem, 2.5vw, 1.2rem);

    border-color: rgb(204, 180, 180);
    border-width: 5px;
    transition: 100ms;
}

#dialog {
    position: relative;

    width: 600px;
    margin-left: -300px;

    height: 400px;
    margin-top: -200px;
}


.dialogdiv {
    width: 50%;
    height: 70%;
    background-color: black;
    color: white;
font-size: clamp(0.8rem, 2.5vw, 1.2rem);

    border-color: rgb(204, 180, 180);
    border-width: 5px;
    outline-width: 5px;
    outline-style: solid;
    outline-color: rgb(204, 180, 180);
    text-align: center;
    display: flex;
    flex-direction: column;

    align-items: center;
    
}


.btntextdiv {
    background-color: black;
    width: 100%;
    height: 30%;
    position: absolute;
    top: 100%;
    left: 0;
    color: white;
    opacity: 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 58px;
    transition: 300ms;
}

button:hover .btntextdiv {
    color: white;
    top: 70%;
    transition: 300ms;
}

html {
    font-family: hack;
}

body {
    background: url('https://images.unsplash.com/photo-1639852656724-827b82462231?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDI3fHx8ZW58MHx8fHx8') no-repeat center center fixed;
    color: white;
    font-size: clamp(0.8rem, 2.5vw, 1.2rem);

}

.checkbox {
    width: 30px;
    height: 30px;
    margin: 10px;
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    border: 2px solid rgb(204, 180, 180);
    display: inline-block;
    position: relative;
}

.checkbox:checked {
    background-color: white;
}

.checkbox:checked::after {
    content: '✕';
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
}

@font-face {
    font-family: 'pixel';
    src: url('/public/newmainside/fonts/public-pixel-font/PublicPixel-rv0pA.ttf')
}

@keyframes fadeInOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeOutIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.startback {
    background-color: black;
    animation: fadeInOut 1s forwards;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0s;
}

.startback.fade-in {
    animation: fadeOutIn 1s forwards;
}

.startback::after {
    animation: fadeInOut 2s forwards;
}