:root {
    background-color: black;
    --Title-center: max(5vw, 50%);
    color: white;
}

.Placement {
    position: absolute;
	left: var(--Title-center);
  	transform: translate(calc(-1*var(--Title-center)), 0%);
    
    width: clamp(5vw, 1280px, 95vw);
}

.GridReplace {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content;
    align-items: center;
}

.GridLoop {
    display: grid;
    grid-template-columns: 1fr 50px 1fr;
    grid-template-rows: max-content max-content;
    align-items: center;
}

.GridTwoButtons {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: max-content;
}

.GridForwardBackward {
    display: grid;
    grid-template-columns: 21.27% 14.18% 7.09% 14.92% 7.09% 14.18% 21.27%;
    grid-template-rows: max-content;
    align-items: center;
}

.TextBoxLoop {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 94%;
    height: 90%;
    font-size: max-content;
}

/* Custom button, needed to avoid message when clicking it */
.ButtonTemplate {
    color: black;
    position: relative;
    font-size: clamp(1vw, 16px, 5vw);

    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    /*border: solid #000;
    border: 50px;
    border-radius: 1px;
    border-color: black;*/
}

.ButtonTop {
    background-color: rgb(233, 233, 233);
    width: 90%;
    height: 100%;
}

.ButtonRed {
    background-color: rgb(179, 32, 32);
    width: 95%;
    height: 20px;
    font-size: 16px;
}

.ButtonCurrentTime {
    background-color: rgb(233, 233, 233);
    width: 95%;
    height: 20px;
    font-size: 16px;
}