Медиа-запрос для наименьшего размера переписал все

Question

Я написал свой веб-сайт в самом большом размере (1025 пикселей), однако теперь, когда я добавил медиа-запросы, медиа-запрос для наименьшего размера экрана (400 пикселей) переписал все остальные CSS.

Не прослушивает точку останова.

Слишком много кода для одного фрагмента кода, так как я не уверен, где проблема вообще. Сайт здесь: https://taramcallister.github.io/portfolio/

@media (min-device-width : 320px) {
/* smartphones, iPhone, portrait 480x320 phones */
#top {
    display: grid;
    grid-template-columns: 100%;
}
.nav {
    display: none;
}

#bio {
    font-size: 0.7em;
    max-width: 70vw;
    padding-top: 1em;
    padding-bottom: 0em;
}

 @media (min-width:481px) {
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */

#bio {
    font-size: 0.85em;
}

#name {
    font-size: 3em;
}

.app {
    margin-top: 4em;
}

.info-wrap6 {
    margin-top: 2em;
}

}

 @media (min-width:1025px) {
/* big screens */
/* designed for this size */

}

Когда я увеличиваю область просмотра, она по-прежнему имеет все стили от меньшего размера экрана, а не переключается на оригинальный код?