*,
*::before,
*::after {
    /* box-sizing: border-box; */
}

:root{
    --blue: hsla(201, 97%, 74%, .30);
    --blue-light: hsla(201, 97%, 74%, .70);
    --orange: hsla(29, 75%, 45%, .3);
    --orange-light: hsla(29, 75%, 45%, .7);
    --dark: hsla(0, 0%, 7%, .3);
    --dark-light: hsla(0, 0%, 7%, .7);
    /* --background-clr: hsl(209, 35%, 15%); */
    --background-clr: hsl(194, 14%, 66%);
    --title-background-clr: hsl(209, 29%, 22%);
    --title-background-clr-glass: hsla(209, 29%, 22%, .7);
    --tile-background-clr: hsla(209, 28%, 10%, 0.91);
    --tile-highlight-clr: hsl(209, 29%, 37%);
    --tile-highlight-clr-glass: hsla(209, 29%, 37%, .7);
    --page-clr: white;
}

body {
    /* background-image: url(../images/diamond-plate_v5.svg); */
    background-color: var(--background-clr);
    color:  var(--page-clr);
    font-family: "Segoe UI", serif;
    /* text-align: center; */
}

.header{
    /* text-align: center; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-text{
    font-size: xx-large;
    text-align: center;
}

.sub-header{
    text-align: center;
}

.main{
    text-align: center;
    display: grid;
    justify-content: center;
}
/* .main_image{
    height: 30vh;
    border-radius: 50%;
}
 */
.main_image > img {
    /* FONT-VARIANT: JIS78; */
    height: 11rem;
    width: 22rem;
    object-fit: cover;
    border-radius: 50%;
    /* object-position: 150% 0%; */
}

.logo{
    margin-top: 2.5rem;
    /* border: 1px solid; */
    height: 1.5rem;
    position: relative;
    top: -2rem;
    transform-origin: 2rem 2rem;
}

.logo > img{
    /* padding-top: .5rem; */
    width: 4rem;
    /* height: 1rem; */
}

.owner-cont{
    display: grid;
    opacity: 0;
    justify-content: center;
    transition: opacity 2s;
}
.owner-cont-rot{
    opacity: 1;
    transition: opacity 4s;
}

.o_name{
    display: flex;
    justify-content: center;
}

.f_name{
    /* left: 3rem; */
    position: relative;
}
.f_name_rot{
    position: absolute;
    transition: position 2s
}
.m_name{
    margin: 0;
    transition: margin 2s
}
.m_name_rot{
    margin: 0 4rem;
    transition: margin 2s
}
.l_name{
    position: relative;
    /* left: -2rem; */
}
.l_name_rot{
    position: absolute;
    transition: position 2s
}