@media screen and (max-width: 800px) {
    body {
        margin: 0 5vw;
    }

    /*----------------------------------CÍM----------------------------------*/

    .head {
        position: absolute;
        right: 5%;
        text-align: right;
        margin-top: 10px;
        width: 13%;
        z-index: 1;
    }

    .lang-menu {
        margin-right: 15px;
        z-index: 2;
    }

    .light_mode_toggle {
        position: absolute;
        z-index: 1;
    }

    .light_mode_toggle img {
        width: 6vw;
    }

    #title {
        min-height: 50vh;
    }

    #title div {
        top: 40%;
        bottom: 60%;
    }

    #title h1 {
        font-size: 6.2vw;
    }

    #title h2 {
        font-size: 6vw;
    }

    #title h3 {
        font-size: 5vw;
    }

    /*--------------------------------OLDAL--------------------------------*/

    #contact {
        display: none;
        z-index: 1;
    }

    #content {
        width: 100%;
        display: block;
    }

    .item_1 {
        float: none;
        padding: 7vw 7vw 2vw 7vw;
        margin-bottom: 10vw;
        background-color: var(--box-backround-color);
        border-radius: 3vw;
    }

    .item_1 h3 {
        font-size: 6vw;
        margin: 2vw 0 2vw 0;
    }

    .item_1 div h4 {
        font-size: 4vw;
        padding-top: 0.5vw;
        margin-top: 1vw;
    }

    .item_1 div p {
        font-size: 3vw;
        padding: .5vw 0 0 3vw;
        line-height: 3.7vh;
    }
    .item_1 ul{
        list-style: circle;
        font-size: 3vw;
        padding: 1vw 0 0 3vw;
        line-height: 3.7vh;
    }


    .item_1 #dropdown_arrow {
        width: 10%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    /*-------------------------------TARTALOM-------------------------------*/

    .item_2 {
        float: none;
        margin: 0;
    }

    .item_2 nav li{
        padding: 2vw 2vw 0.5vw 2vw;
        font-size: 4vw;
    }

    .content {
        padding: 2vw 5vw 3vw 5vw;
        text-align: justify;
        line-height: 1.5;
        border-radius: 0 0.2vw 0.2vw 0.2vw;
        font-size: 3vw;
    }

    /*-------------------------------ABOUT ME-------------------------------*/
    .content_2 table {
        margin-bottom: 3vw;
        margin-left: auto;
        margin-right: auto;
    }

    .content_2 h2 {
        margin-bottom: 1vw;
    }

    .content_2 h4 {
        margin-top: 1vw;
        font-size: 3.8vw;
        text-align: left;
    }

    .content_2 p{
        padding: 1vw 0 1vw 4vw;
        font-size: 3.5vw;
        text-align: left;
    }

    .content_2 table tr {
        display: block;
        margin-bottom: 20px;
    }

    .content_2 table th,
    .content_2 table td {
        text-align: center;
    }

    .content_2 table th {
        margin-bottom: 0;
    }

    .content_2 table td {
        margin-bottom: 10px;
    }

    /*-------------------------------LANGUAGE-------------------------------*/

    .container_1 {
        width: 100px;
        height: 9px;
        background-color: #c8c8c8;
        border: 0.2vw solid black;
        border-radius: 1vw;
        box-shadow: 2px 5px 10px #202020;
        overflow: hidden;
        margin: auto;
    }

    .skill {
        height: 100%;
        background-color: #303030;
        border-radius: 1vw;
        background-clip: padding-box;
    }

    .hun {
        width: 100px;
    }

    .eng {
        width: 90px;
    }

    .ger {
        width: 65px;
    }

    .jap {
        width: 50px;
    }

    footer {
        margin: 4vw 0;
        font-size: 4vw;
    }

}

@media screen and (max-height: 500px) and (min-width: 400px)  {
    #title {
        width: 100%;
        min-height: 100vh;
        position: relative;
    }

    .item_1 div p {
        line-height: 4vw;
    }

    .item_1 ul {
        line-height: 4vw;
    }
}

@media screen and (max-width: 450px)  {
    .content_2 table th,
    .content_2 table td {
        display: block;
    }
}