Responsive Basics

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>

body {
margin:0;
}

.header {
font-size:8vw;
text-align:center;
font-family:arial;
text-shadow:3px 3px 3px red;
}

.responsive {
display:none;
font-size:8vw;
text-align:center;
font-family:arial;
text-shadow:3px 3px 3px red;
}

.landscape {
display:none;
font-size:8vw;
text-align:center;
font-family:segoe script;
font-weight:900;
}

iframe {
border:5px solid red;
padding:2px;
width:70vw;
height:39vw;
display:block;
margin:auto;
}

.box {
margin:8vw 0 6vw 0;
}

.about {
text-decoration:none;
font-size:8vw;
color:black;
font-family:arial;
text-shadow:3px 3px 3px red;
}

.text {
text-indent:100px;
padding:6vw 4vw 8vw 4vw;
display:block;
font-size:3vw;
text-align:justify;
text-justify:inter-word;
font-family:courier;
font-weight:bold;
}


                @media all and (max-width: 425px){
.header { display:none;  }
.responsive {
font-size:9vw;
color:red;
display:block;
text-shadow:3px 3px 2px black;
}
.about {
font-size:8vw;
color:green;
font-weight:900;
text-shadow:3px 3px 3px black;
}
.about:after {
content:'Click here!';
display:block;
font-size:8vw;
color:green;
font-weight:900;
text-shadow:3px 3px 3px black;
}
.text {
text-indent:50px;
padding:6vw 6vw 8vw 6vw;
font-size:5vw;
font-family:segoe print;
}
iframe {
border:0;
padding:0;
width:80vw;
height:45vw;
}
}

          @media all and (min-width: 426px) and (max-width: 538px){
.header { display:none;  }
.responsive { display:none;  }
.landscape {
display:block;
font-size:10vw;
text-align:center;
font-family:impact;
font-weight:900;
}
.about {
text-decoration:underline;
font-size:8vw;
font-weight:900;
font-family:impact;
text-shadow:0 0 0 black;
}
.text {
text-indent:50px;
padding:6vw 6vw 8vw 6vw;
font-size:4vw;
font-family:arial;
font-weight:bold;
}
iframe {
border:0;
padding:0;
width:90vw;
height:50vw;
border-radius:20px;
}
}


</style>
</head>
<body>
<h1 class='header'>Responsive Basics</h1>
<h1 class='responsive'>Responsive <br> Basics</h1>
<h1 class='landscape'>Responsive</h1>


<div class='box'>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qJ0_r1Emui8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<center><a class='about' href='http://www.bebobestmusic.com'>About</a></center>

<span class='text'>Italian composer, producer and multi-instrumentalist Bebo Best and his Super Lounge Orchestra blend bossanova, nu funk, and jazz-dance with the sounds of 60s and 70s lounge and exotica.</span>


</body>
</html>