:root{
    --col1 : #ED1C24;
    --col2 : #6B00B7;
}

@font-face {
    font-family: "kaushanScript";
    src: url(fonts/KaushanScript-Regular.ttf);
}

@font-face {
    font-family: "ubuntu";
    src: url(fonts/Ubuntu-Regular.ttf);
}
@font-face {
    font-family: aptumi;
    src: url(fonts/Aptumi.ttf);
}

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "ubuntu", sans-serif;
    font-style: italic;
    font-size: clamp(16px, 1vw, 20px);
}
.container, table{
    margin: auto;
    max-width: 900px;
    padding: 3vw;
    text-align: justify;
}
.container{
    margin-top: 5vh;
}
.nf{
    font-family: "kaushanScript", sans-serif;
    font-size: clamp(48px, 12vw, 120px);
    color: var(--col1);
    font-weight: 600;
}
.nr{
    font-family: "kaushanScript", sans-serif;
    font-size: clamp(24px, 6vw, 60px);
    transform: translate(clamp(-12px, -3vw, 24px), clamp(-24px, -3vw, 60px));
    color: var(--col2);
}
.line{
    margin-top: clamp(32px, 8vw, 84px);
    height: clamp(6px, 1.2vw, 11px);
    width: 100%;
    background-color: red;
    transform: skew(-15deg);
}
.sub{
    font-family: "aptumi", sans-serif;
    text-align: center;
    font-weight: 400;
    font-size: clamp(18px, 4vw, 32px);
    margin-bottom: 9vh;
}
.rg{
    font-weight: bold;
}
.m{
    color: rgb(220, 48, 1);
}
.clk{
    text-decoration: underline;
}

@media screen and (orientation: portrait), screen and (min-height: 1200px) {
    .sub{
        margin-bottom: 15vh;
    }
}

a, a:hover, a:visited{
    color: var(--col2);
}

/* animation area */

.nra{
    opacity: 0;
    animation: fromRight .4s forwards;
}

@keyframes fromRight {
    from{
        opacity: 0;
        transform: translateX(30vw);
    }
    to{
        opacity: 1;
    }
}

.nfa{
    opacity: 0;
    animation: fromLeft .4s forwards;
}

@keyframes fromLeft {
    from{
        opacity: 0;
        transform: translateX(-30vw);
    }
    to{
        opacity: 1;
        padding: 0;
        /* transform: translateX(0); */
    }
}

.linea{
    margin-top: clamp(32px, 8vw, 84px);
    height: clamp(6px, 1.2vw, 11px);
    background-color: red;
    transform: skew(-15deg);
    animation: appearLine .6s forwards;
}

@keyframes appearLine {
    from{
        width: 0px;
    }
    to{
        width: 100%;
    }
}

.suban{
    animation: appearSub .6s forwards;
}

@keyframes appearSub {
    from{
        opacity: 0;
        transform: scale(0);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}