body{
    margin: 0;
    background-color: #F3F5FC;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
}

.logo{
    position: absolute;
    top: 6.4vw;
    left: 4.27vw;
    width: 8.53vw;
}

.home{
    margin-top: 41.7vw;
}

.home__text-input{
    width: 91.47vw;
    min-height: 62.67vw;
    padding: 0 4.27vw;

    font-family: inherit;
    font-size: 8.53vw;
    color: #0A3871;
    field-sizing: content;

    background-color: transparent;
    border: none;
    resize: none;
    outline: none;
}

.home__text-input::placeholder{
    color: #0A3871;
}

.home__text-input:focus::placeholder{
    color: #67808E;
}

.home__text-input:focus-visible{
    outline: none;
}

.home__warning {
    margin-top: 13.8vw;
    display: flex;
    align-items: center;
}

.home__warning--symbol {
    margin-left: 4.27vw;
    margin-right: 2.13vw;
}

.home__warning--text {
    display: inline;
    font-size: 3.2vw;
    color: #67808E;
}

.active-warning {
    filter: brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(4866%) hue-rotate(351deg) brightness(85%) contrast(103%);
}

.home__btn-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.27vw;
    margin-top: 4.27vw;
}

.home__btn{
    width: 91.47vw;
    height: 17.87vw;

    font-size: 1.2rem;
    border-radius: 6vw;
    border: 1px solid #0A3871;
}

.home__btn--encrypt{
    background-color: #0A3871;
    color: white;
}

.home__btn--decrypt{
    background-color: transparent;
    color: #0A3871;
}

.unprocessed, .processed{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.5vw;

    box-sizing: border-box;
    margin: 10.67vw auto;
    padding: 8.5vw 0;
    width: 87.2vw;

    background-color: white;
    border-radius: 8.53vw;
    box-shadow: 0 6.4vw 8.53vw -2.13vw rgba(0, 0, 0, 0.08);
}

.unprocessed__picture{
    display: none;
}

.unprocessed__title{
    margin: 0;
    
    width: 70%;
    font-size: 6.4vw;
    color: #343A40;
    text-align: center;
}

.unprocessed__text{
    margin: 0;

    width: 70%;
    color: #495057;
    text-align: center;
}

.processed__result{
    margin: 0;

    color: #495057;
    word-wrap: break-word;
    width: 74.4vw;
    font-size: 6.4vw;
}

.processed__btn{
    width: 74.4vw;
    height: 17.87vw;

    font-size: 1.2rem;
    border-radius: 6.4vw;
    border: 1px solid #0A3871;

    background-color: transparent;
    color: #0A3871;
}

@media screen and (min-width:600px){
    .logo{
        top: 9.56vw;
        left: 5.21vw;
        width: 4.05vw;
    }

    .home {
        margin-top: 32vw;
    }

    .home__text-input{
        width: 89.58vw;
        min-height: 61.95vw;
        padding: 0 5.21vw;
        font-size: 4.17vw;
    }
    
    .home__warning--symbol {
        width: 2.08vw;
        margin-left: 5.21vw;
        margin-right: 1.04vw;
    }
    
    .home__warning--text {
        font-size: 1.56vw;
    }

    .home__btn-box{
        flex-direction: row;
        justify-content: center;
        gap: 3.27vw;
        margin-top: 1vw;
    }

    .home__btn{
        width: 43.23vw;
        height: 8.72vw;

        font-size: 2.08vw;
        border-radius: 3.13vw;
    }

    .unprocessed, .processed{
        gap: 2.08vw;

        margin: 8.33vw auto;
        padding: 4.17vw 0;
        width: 89.58vw;

        border-radius: 4.17vw;
        box-shadow: 0 3.13vw 4.17vw -1.04vw rgba(0, 0, 0, 0.08);
    }

    .unprocessed__title{
        font-size: 3.13vw;
    }
    
    .processed__result{
        width: 81.25vw;
        font-size: 3.13vw;
    }

    .processed__btn{
        margin-top: 2.08vw;
        width: 81.25vw;
        height: 8.72vw;
    
        font-size: 2.08vw;
        border-radius: 3.13vw;
    }
}

@media screen and (min-width:992px){
    .logo{
        top: 2.8vw;
        left: 4.25vw;
        width: 2.16vw;
    }

    .portal{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 5.5vw;
        height: 100vh;
    }

    .home{
        margin-top: 7vw;
        width: 46VW;
    }

    .home__text-input{
        width: 40.07vw;
        min-height: 0;
        height: 28.3vw;
        padding: 0;
        font-size: 2.22vw;
        overflow-y: auto;
    }

    .home__warning {
        margin-top: 1.5vw;
    }
    
    .home__warning--symbol {
        width: 1.11vw;
        margin-left: 0;
        margin-right: 0.56vw;
    }
    
    .home__warning--text {
        font-size: 0.83vw;
    }

    .home__btn-box{
        gap: 1.67vw;
    }

    .home__btn{
        width: 22.78vw;
        height: 4.65vw;

        font-size: 1.11vw;
        border-radius: 1.67vw;
    }

    .unprocessed, .processed{
        gap: 1.11vw;
        justify-content: center;
        
        margin: 0;
        padding: 0;
        width: 27.78vw;
        min-height: 0;
        height: 45.56vw;

        border-radius: 2.22vw;
        box-shadow: 0 1.67vw 2.22vw -0.56vw rgba(0, 0, 0, 0.08);
    }

    .unprocessed__picture{
        display: inline;
        margin-bottom: 1.11vw;
        width: 23.33vw;
    }

    .unprocessed__title{
        font-size: 1.67vw;
    }

    .processed__result{
        font-size: 1.67vw;
        width: 23.33vw;
        height: 34vw;
        overflow-y: auto;
    }

    .processed__btn{
        margin-top: 1.11vw;
        width: 23.33vw;
        height: 4.65vw;

        font-size: 1.11vw;
        border-radius: 1.67vw;
    }
}

.hidden {
    display: none;
}

.disabled{
    cursor: not-allowed;
    pointer-events:none;
    background-color: rgb(235, 235, 235);
    color: rgb(168, 168, 168);
    border-color: rgb(168, 168, 168);
}