.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABpUlEQVR4AdTT0U7DQAxEUeD//xlyLI3UWDGpoA81yt21Pe4mY5KvjyV/qx/0+xgyjq0uMSq5WGjokhp6ved6kLoYyWtfOVEu8HlYgBhiiHHIp4sGGiKqQQ2pZ1eDHoghhhjVv3KiXIALiCGGGOIraOiaGu7qepA+MfZOtDu5y7l9pPdHe7be+5Lvneg0gTiLXg4flkmf6vlpzut9Pa/+lV99PfmxTE4P6fJKfxen+tR3Ock0r55oTLzVvnqi/V1J/uoJ35170ldONA7ytU75qyZ7d5/odb+VEz05KBvn5U4/dz+f5dz+HzydsHKicdCdJY/+qv3u3JO+cqJxcPXOqEV/1USdiZwrRs/rfisnyg3KwcVCw4X0r5IzcTnJnLxyonn4t9xXT7S/K8nvJj31TfWcF917iuTRa1850TjhClNeDh+W3hdpqk96709e/SsnaoqIEzGm/K/16Xfuha7vnWh3cpdzj96nhqlOQ9enfO9EucTkjIZy+LCoIb+LpIZen3S9SL8Y1b/yq68nPxYucIR1iVHJL4se9BY19HpyGqa86msm+gMAAP//GAiAvQAAAAZJREFUAwBd5MhVOcw8UAAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

html {
  font-size: 12px;
}


.container {
  display: flex;
  justify-content: center; /* Horizontal center */
  align-items: center;     /* Vertical center */
  height: 100vh;    
}

.main {
  display: flex;
  flex-direction: column;
  max-width: 30%;
}

.content {
    padding: 10px;
}