html {
    display: flex;   
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black;
}

body {
    display: flex;   
    flex-direction: column;
    justify-content: center;
    align-items: center;  
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
.error {
    border: solid 1px rgb(221,75,57);
    width: 300px;
    height: 80px;
    padding-left: 8px;
    padding-top: 8px;
    padding-right: 10px;
    padding-bottom: 35px;
}

#captcha-error-msg {
    font-size: small;
    color: rgb(221,75,57);
    margin: 10px 0;
    display: none;
}

#captcha-div {
    position: relative;
    border: solid 1px rgb(211,211,211);
    border-radius: 5px;
    width: 300px;
    height: 80px;
    background-color: rgb(249,249,249);
    box-shadow: 1px 1px 5px rgb(211,211,211); /*h-offset v-offset blur-radius spread-radius color inset;*/
    display: flex;
    flex-direction: row;
    align-items: center;
}

#captcha-left {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-left: 15px;
}

#captcha-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-right: 15px;
}

#checkbox-container{
    width: 30px;
    height: 30px;
}

#captcha-checkbox {
    border: solid 2px rgb(193,193,193);
    border-radius: 3px;
    width: 100%; 
    height: 100%; 
}

#captcha-checkbox:hover {
    border: solid 2px rgb(178,178,178);
    box-shadow: 0 -1px 2px rgb(193,193,193) inset; /*h-offset v-offset blur-radius spread-radius color inset;*/
}

#captcha-text {
    margin-left: 15px;
}

#captcha-img {
    border-radius: 5px;
    width: 48px;
    height: auto;
}

#captcha-subtext{
    font-size: xx-small;
    color: rgb(85,85,85);
}

#captcha-subtext a{
    text-decoration: none;
    color: rgb(85,85,85);
}

#captcha-subtext a:hover{
    text-decoration: underline;
}

.focused {
    background-color: rgb(235,235,235);
}

.blurred{
    background-color: white;
}

.spinner {
    border: 7px solid rgb(204, 204, 204);
    border-top: 7px solid rgb(128, 158, 229);
    border-radius: 50%;
    width: 50%;
    height: 50%;
    animation: spin 1s linear infinite;
    display: none;
    margin: auto;
}
@keyframes spin {
    0% {
        transform: rotate(0deg); /* Start rotation at 0 degrees */
    }
    100% {
        transform: rotate(360deg); /* End rotation at 360 degrees */
    }
}

#submit {
    margin: 10px 0;
}

#solve-box {
    width: 700px;
    height: auto;
    border: solid 1px rgb(207,207,207);
    box-shadow: 1px 1px 5px rgb(207,207,207); /*h-offset v-offset blur-radius spread-radius color inset;*/
    position: absolute;
    top: -8px;
    left: 55px;
    background-color: white;
    display: none;
}

#solve-triangle-outline {
    background-color: rgb(207,207,207);
    width: 15px;
    height: 15px;
    position: absolute;
    clip-path: polygon(0% 50%,100% 0%,100% 100%);
    top: 38px;
    left: -15px;
    /* clip-path: path("M0,50 L100,0 L100,100 Z"); */
}


#solve-triangle-body {
    background-color: white;
    width: 100%;
    height: 100%;
    position: absolute;
    clip-path: polygon(0% 50%,100% 0%,100% 100%);
    /* clip-path: path("M0,50 L100,0 L100,100 Z"); */
    left: 2px;
}

#solve-title {
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 25px;
    margin-bottom: 5px;
}

#solve-title-text {
    font-size: x-large;
    font-weight: bold;
}

#solve-title-subtext {
    font-size: small;
}

.solve-theme{
    background-color: rgb(26,115,232);
    color: white;
}
.grayed-solve{
    background-color: darkgray;
    color:white;
}

#solve-image-main-container {
    display: flex;
    gap: 10px;
    width: 100%;
    aspect-ratio: 4/3;
}

.pad5px {
    padding: 5px;
}

#solve-footer {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    padding-top: 8px;
    border-top: solid 1px rgb(207,207,207);
}

.icon {
    width: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(116,116,116);
    font-size: large;
    /* margin: 0 5px; */
    aspect-ratio: 1;
}

.icon:hover{
    color: rgb(51,51,51);
}

#solve-footer-left {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

#solve-footer-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

#verify {
    border: none;
    border-radius: 0.1rem;
    font-weight: bold;
    font-size: small;
    padding: 10px 25px;
}

.fade-out {
    animation: fadeOut 1s forwards
}

@keyframes fadeOut {
    0% {
        opacity: 1; /* Start rotation at 0 degrees */
    }
    100% {
        opacity: 0; /* End rotation at 360 degrees */
    }
}

#solve-image-error-msg {
    width: 100%;
    text-align: center;
    color:rgb(221,75,57);
    font-size: small;
    margin: 8px 0;
    display: none;
}

#try-again-later {
    width: 100%;
    text-align: center;
    font-size: large;
    padding: 10px 0;
    margin-bottom: 15px;
}

#information-text {
    font-size: x-small;
    overflow-y: scroll;
    margin: 8px 0;
    display: none;
}

#solve-audio-div {
    display: none;
}