/*this controls all of the background*/
body{border-radius: 5px;
    background: linear-gradient(
        90deg,
     /*red*/   rgba(255, 0, 0, 1) 0%,
     /*orange*/ rgba(255, 154, 0, 1) 10%,
     /*yellow*/   rgba(208, 222, 33, 1) 20%,
     /*green*/   rgba(79, 220, 74, 1) 30%,
     /*cyan*/   rgba(63, 218, 216, 1) 40%,
     /*light blue*/   rgba(47, 201, 226, 1) 50%,
     /*blue*/   rgba(28, 127, 238, 1) 60%,
     /*dark blue*/   rgba(95, 21, 242, 1) 70%,
     /*purple*/   rgba(186, 12, 248, 1) 80%,
     /*purplepink*/   rgba(251, 7, 217, 1) 90%,
     /*pink*/   rgba(255, 0, 0, 1) 100%
    );
    /*full screen background + helvetica on the whole site*/
width:100vw; height:100vh; font-family:helvetica;}

/*where the position of glitter text is set*/
h1{margin-top:50px; margin-left: 37%; width:70px}

/*the position of each asset*/
.text{width: 300px; margin-left: 60%}
.tv{margin-left:31%;margin-top:2%;float: left}
.video{z-index: 2; width:415px; height:320px ; margin-top:6.5%; margin-left: -68.6%}
.remote{ margin-left:60%; margin-top:-8%; width: 400px}
/*the remote moves because of this*/
.remote:hover{ transform:rotate(15deg);	}

/*footer style*/
p{margin-top:-8%}

/* HERE IS MY BREAKPOINT FOR SMARTPHONES 411x758*/
@media screen and (max-width: 500px) {
    body{border-radius: 5px;
    background: linear-gradient(
        90deg,
     /*red*/   rgba(255, 0, 0, 1) 0%,
     /*orange*/ rgba(255, 154, 0, 1) 10%,
     /*yellow*/   rgba(208, 222, 33, 1) 20%,
     /*green*/   rgba(79, 220, 74, 1) 30%,
     /*cyan*/   rgba(63, 218, 216, 1) 40%,
     /*light blue*/   rgba(47, 201, 226, 1) 50%,
     /*blue*/   rgba(28, 127, 238, 1) 60%,
     /*dark blue*/   rgba(95, 21, 242, 1) 70%,
     /*purple*/   rgba(186, 12, 248, 1) 80%,
     /*purplepink*/   rgba(251, 7, 217, 1) 90%,
     /*pink*/   rgba(255, 0, 0, 1) 100%
    );
    /*full screen background + helvetica on the whole site*/
width:100%; height:100%; font-family:helvetica;}
    .tv{width: 100%; margin-left:0%}
    .video{z-index: 2; width:300px; height:230px ; margin-top:14%; margin-left: -100%}
/*where the position of glitter text is set*/
.text{width: 300px; margin-left: -140%}

.remote{ margin-left:60%; margin-top:-8%; width: 200px}
/*the remote moves because of this*/
.remote:hover{ transform:rotate(15deg); }
}