.clading{
    display: flex;
    position: relative;
    margin: auto;
    top: 0;
    width: 99vw;
    height: 98vh;
    gap: 5px;
}

.part_one,
.part_two{
    height: 100%;
}
.part_one{
    width: 22%;
}
.part_two{
    background: var(--second_gradient);
    border-radius: 5px;
    width: 78%;
}

.part_one{
    display: flex;
    justify-content: center;
    flex-direction: column;
    
    box-sizing: border-box;
    padding-left: 10px;

    line-height: 0.7;
}
.part_one h1,
.part_one h2{
    margin: 0;
    padding: 0;
}

.part_one h2{
    font-family: berranger;
}
.part_one h1{
    font-family: nunito;
}
.part_one h1 {
    font-size: 400%;
    font-size: 3.5rem;
    color: skyblue;
    text-shadow: 1px 1px 1px rgba(65, 105, 225, 0.6);
}
.part_one span{
    font-size: 150%;
    font-family: source;
    color: salmon;
    text-shadow: 2px 2px 2px gray;
}
.part_one h2 {
    color: #414141;
    font-size: 2.5rem;
}

.options_box {
    width: 250px;
    position: absolute;
    bottom: 20%;
    /* background-color: red; */
}

.part_two{
    box-sizing: border-box;
    padding: 10px;
    overflow: scroll;
}

@media only screen and (max-width: 899px){
    .part_one,
    .part_two{
        width: 100%;
    }
    .part_one{
        height: 20%;
    }
    .part_two{
        height: 80%;
    }
    .clading{
        display: flex;
        flex-direction: column;
    }
    .part_one h2 {
        color: #414141;
        font-size: 150%;
    }
    .part_one h1 {
        font-size: 180%;
        color: skyblue;
        text-shadow: 1px 1px 1px rgba(65, 105, 225, 0.6);
    }
    .part_one span{
        font-size: 140%;
        font-family: source;
        color: salmon;
        text-shadow: 2px 2px 2px gray;
    }
    .options_box {
        position: absolute;
        width: 220px;
        height: 80px;
        top: 0;
        left: 45%;
        /* background-color: blue; */
    }
    .part_two{
        box-sizing: border-box;
        padding: 5px;
    }
}