@use "../abstracts/mixins";
@use "../abstracts/variables";

.error404{
    background-color: variables.$cGreyLighter;
    color: variables.$cDark;

    .main{
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;

        @include mixins.respondTo('xs'){
            height: calc(var(--vh, 1vh) * 100);
        }

        .content{
            position: relative;
            text-align: center;
            z-index: 1;

            h1{
                @include mixins.fontSize(300,240);
                font-family: variables.$ffC;

                @include mixins.respondTo('xs'){
                    @include mixins.fontSize(140,120,variables.$baseFontSizeXs);
                }
            }

            h3{
                @include mixins.fontSize(30,46);
                max-width: 450px;
                margin: auto;
                margin-bottom: 2.5vh;

                @include mixins.respondTo('xs'){
                    max-width: 450px;
                    width: 80%;
                    @include mixins.fontSize(20,24,variables.$baseFontSizeXs);
                }
            }
        }
    }

    .footer{
        display: none;
    }
}