:root{
    --uk-blue:#012169;
    --uk-red:#C8102E;
}
.uk {
    --uk-blue:#012169;
    --uk-red:#C8102E;
    background-color: var(--uk-blue);
    width: clamp(100px,100vw,200px);
    aspect-ratio: 2/1;
}

.redcross-horizontal,
.redcross-vertical,
.whitecross-horizontal,
.whitecross-vertical {
    position: absolute;
    background-color: var(--uk-red);
    z-index:1;
}

.whitecross-horizontal,
.whitecross-vertical{
    z-index: 3;
}
.redcross-horizontal,
.redcross-vertical{
    z-index: 4;
}
.redcross-horizontal,.whitecross-horizontal {
    top: 50%;
    left: 0;
    width: 100%;
    height: 20%;
    transform: translateY(-50%);
    /* border-top: 5px solid white;
    border-bottom: 5px solid white; */
}

.redcross-vertical,.whitecross-vertical {
    left: 50%;
    top: 0;
    width: 10%;
    height: 100%;
    transform: translateX(-50%);
}
.whitecross-horizontal{
    background-color: white;
    height: 30%;
}

.whitecross-vertical{
    background-color: white;
    width: 15%;
}

.scot-lefttoright,
.scot-righttoleft{
    position: absolute;
    background-color: white;
    width: 140%;
    height: 20%;
    top:50%;
    left: -20%;
    z-index: 1;
}

.scot-lefttoright{
    transform: translateY(-50%) rotate(27deg);
}

.scot-righttoleft{
    transform: translateY(-50%) rotate(-27deg);
}

.nire-topright,.nire-topleft,.nire-bottomleft,.nire-bottomright{
    position: absolute;
    background-color: var(--uk-red);
    width: 65%;
    height: 8%;
    z-index: 1;
}

.nire-topleft{
    top: 18%;
    left: -14%;
    transform: rotate(27deg);
}

.nire-topright{
    top: 18%;
    right: -7%;
    transform: rotate(-27deg);
}

.nire-bottomleft{
    bottom: 18%;
    left: -7%;
    transform: rotate(-27deg);
}

.nire-bottomright{
    bottom: 18%;
    right: -14%;
    transform:rotate(27deg);
}