@media only screen and (min-width: 700px) {
    main>section {
        width: 700px;
        height: 500px;
        /* overflow: hidden; */
        /* background-color: aqua; */

        margin-left: calc(50vw - 350px);
        margin-top: calc(50vh - 300px);
    }

    main>section>section>img {
        width: 580px;    
        margin-left: 60px;
        margin-top: 50px;
    }

    main>section>section>section {
        max-width: 72px;
    }

    main>section>section>section>a>img {
        width: 72px;
    }

    main>section>section>section>a>p {
        width: 72px;
        text-align: center;
        margin: 0;
    }

    .portfolio {
        margin-top: -350px;
        margin-left: 50px;
    }

    .info {
        margin-top: 160px;
        margin-left: 90px;
    }

    .history {
        margin-left: 350px;
        margin-top: -50px;
    }

    .q4 {
        margin-left: 600px;
        margin-top: -240px;
    }

    .q5 {
        margin-left: 420px;
        margin-top: -300px;
    }
}

@media only screen and (max-width: 700px) {
    main>section>section>img {
        width: 80vw;    
        margin-left: 10vw;
        margin-top: 10vw;
        margin-bottom: 10px;
    }

    .buttons {
        display: grid;

        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 20px;
        gap: 20px;

        margin-left: 10vw;
        margin-right: 10vw;
    }

    main>section>section>section>a>img {
        width: calc(27vw - 20px);
    }

    main>section>section>section>a>p {
        width: calc(27vw - 20px);
        text-align: center;
        margin: 0;
    }
}

.buttons>section {
    transition: 0.3s;
}

.buttons>section:hover {
    transform: scale(1.2);
}