@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=Roboto+Mono:ital,wght@0,400;0,500;0,600;0,700;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,500;0,600;0,700;1,500;1,700&display=swap');


html {
    font-family: 'Inter', sans-serif;
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

section {
    height: 100vh;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
p {
    font-family: 'Inter', sans-serif;
}


/* Landing page */
.box {
    position: absolute;
    width: 801px;
    height: 373px;
    left: 49vw;
    top: 71vh;
    background: url(images/landing/box.png);
    filter: drop-shadow(0px 4px 35px rgba(0, 0, 0, 0.25));
    z-index: 1;
    animation: slideinbottom 2.5s;
}

.handwpaper {
    position: absolute;
    /*width: 730px;
    height: 722px;*/
    /* left: 707px;*/
    top: -5vh;
    display: inline;
    float: left;
    margin-top: 100px;
    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.25));
    z-index: 2;
    animation: slideintop 4s;
}

.top {
    position: absolute;
    width: 1920px;
    height: 1080px;
    left: 380px;
    top: -56px;
    animation: fadein 1s;

}

.thelasallian-star {
    width: 100px;
    animation: fadein 3.5s steps(50, end);
}

.landing-text {
    margin: 50px;
    position: relative;
    top: 30vh;
}

.thelasallian-text {
    position: relative;
    font-size: 50px;
    font-weight: bold;
    z-index: 3;
}

.thelasallian-text-mobile {
    position: relative;
    font-weight: bold;
    z-index: 3;
}

.thelasallian-sub-mobile {
    position: relative;
    font-weight: bold;
    z-index: 3;
}

.thelasallian-animation {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    animation:
        typing 3.5s steps(50, end),
        blink-caret .75s step-end 7;
    border-right: .15em solid white;
}

.thelasallian-sub {
    position: relative;
    font-size: 30px;
    z-index: 3;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%;
        visibility: hidden;
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: white;
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideintop {
    from {
        top: -1920px
    }

    to {
        top: -5vh
    }
}

@keyframes slideinbottom {
    from {
        top: 1920px
    }

    to {
        bottom: 0px
    }
}

/* For Articles */
.tls-card {
    animation: fadein 2s;
}


svg:hover {
    fill: #003300;
}


.stylistic-quote-mark {
    font-size: 5rem;
    right: 100%;
    @apply mr-2 hidden font-dank-mono text-neutral-500 absolute top-0 leading-none;
}

@screen sm {
    .stylistic-quote-mark {
        @apply block;
    }
}