* {
    font-family : 'Open Sans', Helvetica, Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
}

.p5Canvas {
    border: 1px solid #808080;
    position: absolute;
}

#attachmentDiv {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

#p5AttachmentDiv {
    display: inline-flex;
}

video {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    object-fit: fill;
    display: inline-block;
    position: absolute;
}

#overlay {
    width : 100%;
    height : 100%;
    top : 0px;
    left : 0px;
    position : absolute;
    background : rgba(200, 200, 200, 0.8);
}

#overlayText {
    position : absolute;
    left : 50%;
    top : 50%;
    transform : translate(-50%,-50%);
    font-size : 5ex;
}

#loadingScreen {
    display : none;
    justify-content : center;
    align-items : center;
}

#trainingPanelContainer {
    display: none;
    gap: 10px;
    flex-direction: column;
}

#trainingPanelContainer button {
    background-color: #ff8c1a;
    padding: 8px 4px 8px 4px;
    font-weight: bold;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    font-size: 1.2ex;
}

#trainingPanelContainer button:disabled {
    background-color: #D5D5D5;
    cursor: not-allowed;
}

#trainingPanelContainer button:hover:enabled {
    background-color: #ab5c0e;
}