@import url('https://fonts.googleapis.com/css2?family=Oregano&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Oregano', cursive;
}

body{
background:#ffee8f;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}

.phone{
width:100%;
max-width:600px;
margin:0 auto;
}

.hero{
min-height:100vh;

background:
linear-gradient(rgba(0,140,200,0.85), rgba(0,140,200,0.0) 40%),
url("pic.jpeg");

background-size:cover;
background-position:center;

text-align:center;
color:#333;

padding:30px 20px;
}

/* TITLE */

h1{
font-size:50px;
color:#ffd84d;

margin-top:30px;
margin-bottom:10px;
}

/* PERKS TITLE */

h2{
font-size:30px;
color:#333;

margin-top:25px;
margin-bottom:10px;
}

/* PERKS LIST */

p{
font-size:27px;

margin-top:10px;
}

/* MIDDLE TEXT */

.middle-text{
font-size:35px;
color:#333;

position:relative;
top:155px;
}
/* GOLD BUTTON */

.cta{

background:rgba(217,195,111,0.5);

width:90%;
max-width:320px;

padding:16px 20px 26px 20px;

border-radius:35px;

margin:0 auto;
margin-top:250px;

color:black;

text-align:center;

font-size:36px;

line-height:1.2;

text-decoration:none;   /* removes underline */
display:block;          /* makes link behave like a button */

}