/* reset */
 *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
a, button {
    cursor: revert;
}
ol, ul, menu {
    list-style: none;
}
img {
    max-width: 100%;
}
table {
    border-collapse: collapse;
}
input, textarea {
    -webkit-user-select: auto;
}
textarea {
    white-space: revert;
}
meter {
    -webkit-appearance: revert;
    appearance: revert;
}
::placeholder {
    color: unset;
}
:where([hidden]) {
    display: none;
}
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}
:where([draggable="true"]) {
    -webkit-user-drag: element;
}
/* holding page */
html, body {
    width:      100vw;
    height:     100vh;
}
body {
    background:         url('../images/cms-background.jpg') no-repeat 0 50%;
    background-size:    cover;
    text-align:         center;
    font-family:        'Alegreya Sans', sans-serif;
    font-weight:        400;
    color:              #FFF;  
}
h1 {
    font-weight:        700;
    font-size:          60px;
    line-height:        1em;
    text-align:         center;
    padding:            0;
    margin:             0 0 30px;
}
h2 {
    font-weight:        400;
    font-size:          22px;
    text-transform:     uppercase;
    letter-spacing:     9px;
    line-height:        1em;
    text-align:         center;
    margin:             10px 0 0 12px;
    padding:            0;
}
p {
    font-weight:        400;
    font-size:          24px;
    margin:             40px 0 0 6px;
    text-transform:     uppercase;
    letter-spacing:     6px;
    position:           relative;  
}
a {
    text-decoration: underline;
}
.holding {
    margin:             -314px auto 0;
    position:           relative;
    top:                50%;      
}
.roundel {
    border-radius:      50%;
    width:              400px;
    height:             400px;
    background:         #FFF;
    margin:             0 auto;
    position:           relative;
    padding:            0;
    text-align:         center;
}
.roundel img {
    display:            inline-block;
    border-radius:      50%;
    margin:             10px 0 0;
    padding:            0;
}
@media only screen and (max-width: 890px) {
    .holding {
        margin:             -278.5px auto 0;
    }
    .roundel {
        width:              310px;
        height:             310px;
        padding:            10px;
    }
    .roundel img {
        margin:             0;
    }
    h1 {
        font-size:          40px;
        max-width:          320px;
        margin-left:        auto;
        margin-right:       auto;
    }
    h2 {
        font-size:          16px;
        letter-spacing:     6px;
        margin-left:        6px;
    }
    p {
        font-size:          16px;
        letter-spacing:     5px;
        margin-top:         20px;
    }
}
@media only screen and (max-width: 400px) {
    p {
        margin-top:         40px;
    }
}
@media only screen and (max-height: 400px) {
    .holding {
        margin:             -150px auto 0;
    }
    .roundel {
        width:              180px;
        height:             180px;
        padding:            0;
    }
    p {
        margin-top:         30px;
    }
}