style.css

* {
    margin: 0;
    padding: 0;
}

html,
body {
    overflow: hidden;
    width: 1366px;
    min-height: 528px;
    max-height: 528px;
}
html {
    background: white;
}
body {
    background: #1d2021;
    display: flex;
    flex-direction: row;
}

#field {
    /* width: 1755px; */
    /* height: 805px; */
    height: 528px;
    aspect-ratio: 1755/805;
    background-image: url("asset/field25.png");
    background-size: contain;
    position: relative;
}

#robot {
    width: 48px;
    height: 48px;
    translate: -50% 50%;
    background-color: #cc241d;
    border: #fb4934 solid 1px;
    border-radius: 5px;
    position: absolute;
    color: white;
    text-align: center;
    border-right: lime solid 8px;
}
#target {
    width: 48px;
    height: 48px;
    translate: -50% 50%;
    background-color: #458588;
    border: #83a598 solid 1px;
    border-radius: 5px;
    position: absolute;
    color: white;
    text-align: center;
    border-right: lime solid 8px;
}

#robotpos {
    color: white;
}

#targetpos {
    color: white;
}

#gyro {
    color: white;
}