Hi. Im a beginner at the most novice level.

I wrote css styling for a test site and by all (my) accounts the code should be working; but it isn't. My browser cannot detect between the landscape and portrait orientation and so it shows content askew. Need my code reviewed for mistakes. Please help.

* {
margin:0;
padding:0;
}

html {
font-size:10px;
line-height:1.7em;
}

@media screen
and (max-width: 600px)
and (max-height: 1020px),
screen and (orientation: portrait) and (max-width: 600px) {

#showcase {
background:url(img/Viewport.jpg);
background-size:cover;
background-position:center;
width:100vw;
height:100vh;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
text-align:center;
}

.container {
width:100vw;
display:flex;
flex-direction:column;
align-items:center;
}

#showcase .logo {
background:url(img/Logo.jpg) no-repeat;
background-size:cover;
align-items:center;
width:64vw;
height:32vh;
margin:2vh 0 2vh 0;
padding-bottom:1vh;
z-index:1;
}

#showcase p {
color:#fff;
padding:0 3%;
margin:3vh 0 2vh 0;
}

#showcase .button {
text-decoration:none;
color:#fff;
border:#fff 1px solid;
padding:0 3%;
border-radius:5px;
}

#showcase .button:hover {
background-color:#f25a42;
color:#fff;
}
}

@media screen
and (min-width: 240px)
and (min-height: 360px),
screen and (orientation: portrait) and (max-width: 600px) {

#showcase p, #showcase .button {
font-size: calc(10px + 12 * ((100vw - 240px) / 360));
line-height: calc(1.7em + (1.9 - 1.7) * ((100vw - 240px) / (600 - 240)));
}
}

@media screen
and (max-width: 600px)
and (max-height: 1020px),
screen and (orientation: portrait) and (max-height: 1020px) {
.fluid-type {
font-size: 22px;
line-height: 1.9em;
}
}

/* Landscape */

@media screen
and (max-width: 600px)
and (max-height: 1020px),
screen and (orientation: landscape) and (max-width: 1020px) {

#showcase {
background:url(img/landscape.jpg);
background-size:cover;
background-position:center;
width:100vw;
height:100vh;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
text-align:center;
}

.container {
width:100vw;
display:flex;
flex-direction:column;
align-items:center;
background:rgba(0,36,39,0.75);
}

#showcase .logo {
background:url(img/landscapelogo.jpg) no-repeat;
background-size:cover;
align-items:center;
width:64vw;
height:32vh;
margin:2vh 0 2vh 0;
padding-bottom:1vh;
z-index:1;
}

#showcase p {
color:#fff;
padding:0 3%;
margin:3vh 0 2vh 0;
}

#showcase .button {
text-decoration:none;
color:#fff;
border:#fff 1px solid;
padding:0 3%;
border-radius:5px;
}

#showcase .button:hover {
background-color:#f25a42;
color:#fff;
}
}

@media screen
and (max-width: 600px)
and (max-height: 1020px),
screen and (orientation: landscape) and (max-width: 1020px) {

#showcase p, #showcase .button {
font-size: calc(7px + 15 * ((100vw - 600px) / 420));
line-height: calc(1.7em + (1.9 - 1.7) * ((100vw - 240px) / (1020 - 600)));
}
}

@media screen
and (max-width: 600px)
and (max-height: 1020px)
screen and (orientation: landscape) and (max-height: 600px) {
.fluid-type {
font-size: 22px;
line-height: 1.9em;
}
}

body {
margin:0;
font-family:"Agency FB";
font-color:#fff;
}