@import url(style.css);

@media (max-width: 1000px) {

    main {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
            "tit"
            "vct"
            "fbtn"
            "lbtn";
    }

    .Title,
    .vector,
    .btn {
        width: fit-content;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    main .Title h1 {
        margin-top: -20px;
        font-size: 5vw;
    }

    main .Title p {
        font-size: 1em;
        font-size: .7em;
        width: 46ch;
        margin: -10px auto 10px;
    }

    header {
        padding: 2em 1px;
    }

    header main .vector img {
        margin-top: 2em;
        width: calc(100vw - 9em);
    }

    header main .btn.first {
        margin-top: 5em;
    }

    header main .btn.Down {
        margin-top: 25px;
    }
}

#check-menu {
    display: none;
}

@media (max-width: 600px) {
    main .Title h1 {
        margin-top: -20px;
        font-size: 7vw;
    }

    main .Title p {
        font-size: 3vw;
    }

    #logo {
        order: -1;
    }

    #menu,
    #user {
        display: none;
    }

    nav {
        position: relative;
        z-index: 100;
        /* background-color: aqua; */
    }

    nav .btn-nav {
        cursor: pointer;
        display: flex;
    }

    #logo {
        height: 30px;
    }

    #check-menu:checked~#user,
    #check-menu:checked~#menu {
        display: flex;
        justify-content: center;
        padding: 10px;
        width: 99%;
        margin-top: 35px;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        transition: .5s;
        background-color: var(--towColor);
        box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    }

    #check-menu:checked~#menu {
        border-radius: var(--sizeOne);
    }

    #check-menu:checked~#user {
        color: white;
        margin-top: 138px;
        border-top: white solid 1px;
        padding: 10px 0 10px;
        border-radius: 0 0 var(--sizeOne) var(--sizeOne);
    }

    #check-menu:checked~#user a {
        color: white;
    }

    #check-menu:checked~#menu a {
        text-align: center;
        color: white;
        display: block;
    }

    #check-menu:checked~#menu a:hover {
        opacity: .5;
        border: none;
    }

    #check-menu:checked~.btn-nav {
        justify-content: center;
        transform: translate(-28px);
    }

    #check-menu:checked~.btn-nav span {
        background-color: var(--towColor);
        display: block;
        transform: rotate(45deg);
        position: absolute;
    }

    #check-menu:checked~.btn-nav span:nth-of-type(2) {
        display: none;
        position: absolute;
    }

    #check-menu:checked~.btn-nav span:nth-of-type(3) {
        transform: rotate(-45deg);
    }
}