/* default element settings start */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body {
    font-family: 'Playfair+Display', serif;
    font-size: 62.5%;
}
/* default element settings end */
/* set image for background and centre for responsive design */
.back-img {
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/mews.webp);
    background-size: cover;
    width: 100%;
    height: 100vh;
    z-index: -10;
    background-position-x: center;
    background-position-y: center;
    overflow: hidden;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -9;
    background-color: black;
    opacity: 0.2;
}
/* main text area on screen */
.text-area {
    position: relative;
    top: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.text1 {
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: .1rem;
    color: whitesmoke;
    padding: 2.5rem 0;
}
.anim1 {
    animation-name: shrink;
    animation-fill-mode: forwards;
    animation-duration: 4s;
    animation-delay:4s;
}
.text2 {
    font-size: 1rem;
    font-weight: normal;
    color: rgb(236, 170, 17);
    opacity: 0;
    animation-name: bottom;
    animation-duration: 10s;
    animation-delay: 8s;

}
.sec {
    opacity: 0;
    animation-name: secy;
    animation-fill-mode: forwards;
    animation-duration: 4s;
    animation-delay: 0s;
}
.dot {
    opacity: 0;
    width: 200%;
    padding-right: 0.2rem;
    animation-name: shrink;
    animation-fill-mode: forwards;
    animation-duration: 10s;
    animation-delay:4s;
}
.sp {
    opacity: 0;
    animation-name: spcy;
    animation-fill-mode: forwards;
    animation-duration: 4s;
    animation-delay: 4s;
}
/* Footer area on screen */
.copyright {
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0.4rem;
    color: whitesmoke;
    background-color: rgb(79, 72, 72);
    font-weight: normal;
    font-size: 1rem;
    opacity: 0;
    transition: 0.5s;
    cursor: default;
}
.copyright:hover {
    opacity: 1;
}
.copyright a {
    text-decoration: none;
    color: rgb(210, 220, 248);
}
/* change letter sizing for different screen sizes (trying to maintain relative position of lower text*/
@media screen and (min-width: 500px){
    .text1 {
        font-size: 3rem;
    }
    .text2 {
        font-size: 1.2rem;
    }
    .dot {
        padding-right: .3rem;
    }
}
@media screen and (min-width: 800px){
    .text1 {
        font-size: 3.5rem;
    }
    .text2 {
        font-size: 1.4rem;
    }
}
@media screen and (min-width: 1000px){
    .text1 {
        font-size: 3.8rem;
    }
    .text2 {
        font-size: 1.5rem;
    }
    .dot {
        padding-right: .4rem;
    }
}
@keyframes bottom {
    0% {opacity: 0; transform: scale(0);}
    45% {opacity: 1; transform: scale(1);}
    75% {opacity: 1;}
    100% {opacity: 0;}
    
}
@keyframes shrink {
    0% {opacity: 0; color: black; width: 150%;}
    20% {opacity: 1; color:black; width: 100%;}
    100% {opacity: 1; color: whitesmoke}
}
@keyframes spcy {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes secy {
    0% {opacity: 0; margin-left: 100%;}
    100% {opacity: 1; margin-left: 0%;}
}