html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 5.5vmin;
    color: #002E5F;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

#badge {
    border: 1vmin solid #6AAEDF;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vmin;
    padding: 1.5vmin;
    position: relative;
    width: 50vmin;
    z-index: 1;
    max-width: 500px;
    max-height: 500px;
}

#badge:before {
    content: ' ';
    border: 1vmin solid #002E5F;
    border-radius: 50%;
    position: absolute;
    top: -1vmin;
    left: -1vmin;
    right: -1vmin;
    bottom: -1vmin;
    background: #6AAEDF;
}

#badge:after {
    content: ' ';
    background: #FFF;
    border: 1vmin solid #002E5F;
    border-radius: 50%;
    position: absolute;
    top: 0.5vmin;
    left: 0.5vmin;
    right: 0.5vmin;
    bottom: 0.5vmin;
}

p {
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    width: 100%;
    z-index: 2;
}

#manchester {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#manchester span {
    box-sizing: border-box;
    display: inline-block;
    height: 50%;
    position: absolute;
    bottom: 50%;
    left: 0;
    padding-top: 1.25vmin;
    transform-origin: bottom center;
    width: 100%;
    z-index: 2;
}

#manchester .m { transform: rotate(-65deg); }
#manchester .a { transform: rotate(-48deg); }
#manchester .n { transform: rotate(-32deg); }
#manchester .c { transform: rotate(-17deg); }
#manchester .h { transform: rotate(-2deg); }
#manchester .e1 { transform: rotate(13deg); }
#manchester .s { transform: rotate(27deg); }
#manchester .t { transform: rotate(39deg); }
#manchester .e2 { transform: rotate(52deg); }
#manchester .r { transform: rotate(67deg); }

.year {
    font-size: 3.5vmin;
    color: #6AAEDF;
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 20%;
    text-align: center;
}

#city {
    position: absolute;
    bottom: 3.5%;
    left: 0;
}

#badge-inner {
    border-radius: 50%;
    flex: 0 0 69%;
    height: 69%;
    position: relative;
    z-index: 3;
    margin-bottom: 1vmin;
}

#badge-inner:before {
    content: ' ';
    border: 1vmin solid #002E5F;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#badge-inner:after {
    content: ' ';
    background: #6AAEDF;
    border: 0.5vmin solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 1vmin;
    left: 1vmin;
    right: 1vmin;
    bottom: 1vmin;
}

.crest {
    border: 1vmin solid #002E5F;
    border-radius: 50%;
    position: absolute;
    z-index: 5;
}

.crest-background {
    background: linear-gradient(to right, #FAC458 0, #FAC458 50%, #D6A019 50%, #D6A019 100%);
    border: 0 none;
    height: 87%;
    width: 78%;
    border-radius: 0;
    left: 11%;
    top: 15%;
    -webkit-clip-path: polygon(50% 100%, 70% 90%, 85% 78%, 100% 55%, 100% 33%, 100% 0, 50% 0, 0 0, 0 33%, 0 55%, 12% 75%, 30% 90%);
    clip-path: polygon(50% 100%, 70% 90%, 85% 78%, 100% 55%, 100% 33%, 100% 0, 50% 0, 0 0, 0 33%, 0 55%, 12% 75%, 30% 90%);
}

.crest-top {
    height: 25%;
    width: 150%;
    left: -28%;
    top: 12%;
    -webkit-clip-path: inset(0 25.5% 84% 25.25%);
    clip-path: inset(0 25.5% 84% 25.25%);
    z-index: 6;
}

.crest-middle {
    height: 100%;
    width: 25%;
    left: 8.75%;
    top: -9.5%;
    -webkit-clip-path: inset(22% 25% 42.5% 0);
    clip-path: inset(22% 25% 42.5% 0);
}

.crest-bottom {
    height: 120%;
    top: -20%;
    width: 109%;
    -webkit-clip-path: inset(80% 33% 0 0);
    clip-path: inset(58% 63.5% 0 0);
    z-index: 5;
}

.crest-right {
    left: auto;
    transform: rotateY(180deg);
}

.crest-middle-right {
    right: 8.75%;
}

.crest-bottom-left {
    left: 10.75%;
    transform: rotateZ(35deg);
}

.crest-bottom-right {
    right: 10.75%;
    transform: rotateZ(-35deg) rotateY(180deg);
}

#ship, #rivers {
    width: 100%;
    z-index: 7;
}

#ship {
    background: #FFF;
    box-sizing: border-box;
    height: 45%;
    -webkit-clip-path: polygon(6.5% 10.5%, 25% 8%, 50% 6.5%, 75% 8%, 93.5% 10.5%, 94.5% 33%, 95% 50%, 95.5% 66%, 95% 92.5%, 5% 92.5%, 4.5% 66%, 5% 50%, 5.5% 33%);
    clip-path: polygon(6.5% 10.5%, 25% 8%, 50% 6.5%, 75% 8%, 93.5% 10.5%, 94.5% 33%, 95% 50%, 95.5% 66%, 95% 92.5%, 5% 92.5%, 4.5% 66%, 5% 50%, 5.5% 33%);
    padding: 5%;
}

#rivers {
    background: linear-gradient(51deg,
        #6AAEDF 0, #6AAEDF 37%,
        #9ABFE9 37%, #9ABFE9 47%,
        #6AAEDF 47%, #6AAEDF 57%,
        #9ABFE9 57%, #9ABFE9 67%,
        #6AAEDF 67%, #6AAEDF 77%,
        #9ABFE9 77%, #9ABFE9 87%,
        #6AAEDF 87%, #6AAEDF 100%);
    height: 55%;
    position: relative;
    -webkit-clip-path: polygon(5% 0, 6% 10%, 7% 20%, 9% 30%, 12% 40%, 16% 50%, 21% 60%, 27% 70%, 36% 80%, 50% 90%, 64% 80%, 73% 70%, 79% 60%, 84% 50%, 88% 40%, 91% 30%, 93% 20%, 94% 10%, 95% 0);
    clip-path: polygon(5% 0, 6% 10%, 7% 20%, 9% 30%, 12% 40%, 16% 50%, 21% 60%, 27% 70%, 36% 80%, 50% 90%, 64% 80%, 73% 70%, 79% 60%, 84% 50%, 88% 40%, 91% 30%, 93% 20%, 94% 10%, 95% 0);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#rose {
    height: 59%;
    margin-top: -10%;
    width: 36%;
    position: relative;
}

.petal {
    transform-origin: right bottom;
    height: 50%;
    width: 50%;
    position: absolute;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 80%, 0 0);
    clip-path: polygon(100% 0, 100% 100%, 0 80%, 0 0);
    transform: rotateZ(3deg);
    z-index: 8;
}

.petal:before {
    content: ' ';
    background: #E82F26;
    border: 0.5vmin solid #002E5F;
    position: absolute;
    top: -10%;
    left: 71%;
    width: 1vmin;
    height: 1vmin;
    transform: rotateZ(35deg) skewY(10deg);
    z-index: 7;
}

.petal-half {
    width: 100%;
    height: 100%;
    transform-origin: right bottom;
    position: absolute;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
    overflow: hidden;
    z-index: 8;
}

.petal-half .outer:before {
    content: ' ';
    background: #E82F26;
    border: 0.5vmin solid #002E5F;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: -50%;
    left: 25%;
    right: -0.25vmin;
    -webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 10% 100%, 10% 30%, 20% 30%);
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 10% 100%, 10% 30%, 20% 30%);
}

.petal-half .outer:after {
    content: ' ';
    border: 0.5vmin solid #002E5F;
    border-radius: 75% 10%;
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 4%;
    right: 50%;
    -webkit-clip-path: inset(35% 0 0 50%);
    clip-path: inset(35% 0 0 50%);
}

.petal-half .inner:before {
    content: ' ';
    border: 0.25vmin solid #002E5F;
    border-radius: 50%;
    position: absolute;
    top: 23%;
    bottom: 18%;
    left: 63%;
    right: 4%;
    -webkit-clip-path: inset(0 0% 60% 0);
    clip-path: inset(0 0% 60% 0);
}

.petal-half .inner:after {
    content: ' ';
    border: 0.25vmin solid #002E5F;
    border-radius: 70% 10%;
    position: absolute;
    top: 10%;
    bottom: 35%;
    left: 15%;
    right: 25%;
    -webkit-clip-path: inset(35% 0 0 50%);
    clip-path: inset(35% 0 0 50%);
}

.petal-half-2 { transform: rotateY(180deg) rotateZ(83deg); }
.petal-2 { transform: rotateZ(78deg); }
.petal-3 { transform: rotateZ(150deg); }
.petal-4 { transform: rotateZ(220deg); }
.petal-5 { transform: rotateZ(292deg); }

.stigma {
    background: #FAC458;
    border: 0.5vmin solid #002E5F;
    border-radius: 50%;
    height: 1.25vmin;
    position: absolute;
    top: calc(50% - 1.15vmin);
    left: calc(50% - 1.15vmin);
    width: 1.25vmin;
    z-index: 9;
}