How can I get the media queried to work? Plus how can I check this on multiple browsers?

/* Web Fonts -------------------- */

@font-face { font-family: 'Abolition Regular'; src: url('../fonts/abolition-regular-webfont.eot'); src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/abolition-regular-webfont.woff') format('woff'), url('../fonts/abolition-regular-webfont.ttf') format('truetype'); }

/* Base Styles -------------------- */

• { box-sizing: border-box; }

body { color: #878787; margin: 0; font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }

h1, h2 { font-family: 'Abolition Regular', Helvetica, Arial, sans-serif; }

h1 {
font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3; text-shadow: 0 1px 1px rgba(0,0,0, .8); margin: 12px 0 0; }

h2 { font-size: 3.3125em; /* 53px/16px / font-weight: normal; line-height: 1.1; margin: 0 0 .5em; / 0 0 26px */ }

h3 { font-size: 1.25em; /* 20px/16px / color: #48525c; line-height: 1.2; margin-bottom: 1.7em; / 34px */ }

img { max-width: 100%; margin-bottom: 20px; border-radius: 10px; }

ul, ol { margin: 30px 0; }

li { margin-bottom: 10px; }

/* Pseudo-classes ------------------ */

a:link { color: rgb(255, 169, 73); text-decoration: none; }

a:visited { color: lightblue; }

a:hover { color: rgba(255, 169, 73, .4); }

a:active { color: lightcoral; }

/* Main Styles --------------------- */

.main-header { padding-top: 170px; height: 850px; background: linear-gradient(#ffa949, transparent 90%), linear-gradient(0deg, #fff, transparent), #ffa949 url('../img/mountains.jpg') no-repeat center;

background-size: cover; }

.title { color: white; font-size: 1.625rem; /* 26px/16px */ letter-spacing: .065em; font-weight: 200; border-bottom: 2px solid; padding-bottom: 10px; }

.intro { font-size: 1.25em; /* 20px/16px */ line-height: 1.6;
}

.primary-content, .main-header, .main-footer { text-align: center; }

.primary-content { padding-top: 25px; padding-bottom: 95px; }

.secondary-content { padding-top: 80px; padding-bottom: 70px; border-bottom: 2px solid #dfe2e6; }

.callout { font-size: 1.25em; border-bottom: 3px solid; padding: 0 9px 3px; margin-top: 20px; display: inline-block; }

.main-footer { padding-top: 60px; padding-bottom: 60px; border-bottom: 10px solid #ffa949; }

.t-border { border-top: 2px solid #dfe2e6; }

/* Layout Styles ------------------ */

.primary-content, .secondary-content { width: 75%; padding-left: 50px; padding-right: 50px; margin: auto; max-width: 960px; }

.wildlife { color: white; text-align: left; padding: 18% 24%; border-top: 10px solid #ffa949; margin: 105px 0 60px; background: #434a52 url('../img/bear.jpg') no-repeat center; background-size: cover; box-shadow: inset 0 0 50px 10px rgba(0,0,0, 1);

border-radius: 10px; }

.arrow { width: 50px; margin-top: 150px; }

/* Floated Columns ------------------ */

.resorts, .tips { width: 46.5%; }

.tips { float: left; }

.resorts { float: right; }

/* Float Clearfix ------------------ */

.group:after { content: ""; display: table; clear: both; }

/* Media Queries -------------------- */

@media (max-width: 960px) { body: { background-color: royalblue;
} p { color: white; } }

The media query isn't changing the background color when I resize the window. I'm not sure which browser it's loading on either. When I click on the preview button at the top right it just pops up in a different window all by itself.

I tried to find it to open it up with safari, but can't locate the file when I use the search button. It shows 6 other files with the name index.html but those were other projects. So how can I open this in another browser to test it there?