* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}



body {

    background-color: rgb(31, 31, 31);

    color: white;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    font-size: 18pt;

}



.display-images {

    display: flex;

    justify-content: baseline;

    flex-direction: row;

    gap: 15px;

    text-align: center;

}



.display-images img {

    width: 460px;

}





small {

    color: grey;

}



.gallery {

    display: flex;

    gap: 10px;

    margin-top: 1em;

    text-align: center;

    flex-direction: row;

    flex-wrap: wrap;

    

    width: 100vw;

    justify-content: center;

}



.gallery img {

    max-width: 180px;

    height: auto;

    cursor: pointer;

    border: 2px solid transparent;

}



.gallery img:hover {

    border: 2px solid rgb(41, 212, 255);

}





#split-container {

    width: 100%;

    display: flex;

    gap: 15px;

}



#split-container>div {

    width: 50%;

}



#split-container>div:first-child {

    position: sticky;

    top: 0;

    height: 100vh;

    min-width: 942px;

    margin-left: 1em;

    display: flex;

    flex-direction: column;

    /* gap: 1em; */

    align-items: center;

    justify-content: center;

}



#split-container>div:last-child {

    background-color: rgba(0, 0, 0, 0.3);

    max-width: 875px;

}



#radioForm {

    display: flex;

    align-items: center;

    flex-direction: column;

    text-align: left;

    /* gap: 10px; */

    /* margin-top: .5em; */

}



#radioForm>.question-container {

    width: 100%;

    /* background-color: rgba(0, 0, 0, 0.3); */

    padding: 1em;

    /* border-radius: .5em; */

}



#radioForm small {

    margin-bottom: 1em;

    display: block;

}



#survey {

    font-size: 15pt;

    padding-right: 1em;

}



table {

    border-collapse: collapse;

    width: 100%;

    text-align: center;

}



th,

td {

    position: relative;

    padding: 4px 15px;

}



th:first-child {

    text-align: left;

}



tr {

    background-color: rgb(59, 59, 59);

}



tr:nth-child(even) {

    background-color: rgba(255, 255, 255, 0.221);

}



th:first-child {

    /* padding-right: 2em; */

    /* background-color: rgb(139, 139, 139); */

}



input[type="radio"] {

    width: 25px;

    height: 25px;

    cursor: pointer;

}



label {

    display: block;

    width: 100%;

    height: 100%;

    cursor: pointer;

}



#translation-goal {

    text-align: center;

    width: 100vw;

    word-wrap: break-word;

}



.buttons {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    width: 100%;

    padding: 0em 1em;

    align-items: center;

    margin-top: 1em;

}



button {

    padding: .5em 1.2em;

    background-color: rgb(68, 68, 68);

    border: none;

    border-radius: 5px;

    color: white;

    font-size: 20pt;

    cursor: pointer;

}



button:disabled {

    opacity: 0.5;

}



button:hover {

    background-color: rgb(91, 91, 91);

}



.end-page {

    text-align: center;

    margin: 5em;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 1em;

}



#result-textarea {

    display: block;

    width: 50vw;

    height: 30vh;

    margin-top: 2em;

}



#current-step {

    font-size: 20pt;

    margin-bottom: 2em;

}



.question-container {

    padding-bottom: 0 !important;

}





@media screen and (max-width:1480px) {

    #split-container {

        flex-direction: column;

        align-items: center;

    }



    #split-container>div:first-child {

        position: relative;

        height: fit-content;

    }



    #split-container > div:last-child {

        width: 100%;

    }



}