/*--------------------------------------------------------------
0.0 Reset
--------------------------------------------------------------*/

html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,
b,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /* font-size: 100%; */
    vertical-align: baseline;
    background: transparent;
    font-weight: normal;
    box-sizing: border-box
}
body {
    line-height:1
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block
}
ul {
    list-style:none
}
blockquote,q {
    quotes:none
}
blockquote:before,blockquote:after,
q:before,q:after {
    content:none
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    color: inherit;
    text-decoration: none;
    vertical-align: baseline;
    background: transparent
}
del {
    text-decoration:line-through
}
abbr[title],dfn[title] {
    border-bottom:1px dotted;
    cursor:help
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0
}
input,select{
    vertical-align:middle
}

/* --------------------------------------------------------------*/
body {
    font-family: "Oleo Script Swash Caps", system-ui;
    font-weight: 400;
    font-style: normal;
}
.wrapper {
    width: 100vw;
    height: 100lvh;
    position: relative;
    text-align: center;
    &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #2C0069;
        background: linear-gradient(0deg, rgba(44, 0, 105, 0.5) 0%, rgba(0, 59, 64, 0.5) 100%);
        background-size: 200% 200%;
        animation: AnimationName 10s ease infinite;
    }
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.content {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    h1 {
        font-size: max(60px, calc(90 / 1280 * 100vw));
        color: #fff;
    }
    p {
        font-size: max(13px, calc(16 / 1280 * 100vw));
        line-height: 2;
        color: #bdbed1;
    }
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}