body {
    background-color: aliceblue;
    text-align: center;
    font-family: 'Alatsi Regular', sans-serif;
}
h1 {
    color:rgb(11, 11, 64);
    margin-top: 5%;
    font-size: 4em;
}

h2 {
    color:rgb(11, 11, 64);
    font-size: 2em;
}

h3 {
    color:rgb(11, 11, 64);
}

img.main {
/* credit: https://codepen.io/t_afif/pen/JjzpwyL for border */
    --s: 350px; /* image size */
    --b: 14px; /* control the border thickness */
    --n: 3; /* number of borders */
    --c: #3c0678;
    
    width: var(--s);
    aspect-ratio: 1.2; /* It works with any ratio */
    object-fit: cover;
    --_p:calc(var(--b)*var(--n));
    --_d:calc(var(--s)/(2*var(--n)) + var(--b));
    padding: var(--_p);
    border-radius: calc(var(--_p) + var(--b)/4);
    border-image:
      repeating-radial-gradient(
         var(--c) 0,#0000 2px calc(var(--_d)/2 - 2px),
         var(--c) calc(var(--_d)/2) var(--_d))
      49.8%/var(--_p);
    clip-path: inset(0 round var(--_p));
}