/**************
|  style.css  |
**************/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

html {
  background-color: blue;
}

body {
  background: linear-gradient(to bottom right, red, orange, yellow, green, blue, indigo, darkviolet);
  font-family: 'Roboto', sans-serif;
  background-color: white;
  font-family: sans-serif;
  text-align: center;
  min-height: 97.9vh;
  padding: 10px 0;
  color: #222;
  margin: 0;
}

.container {
  width: 40%;
  padding: 0 20px;
  text-align: left;
  margin: 20px auto;
  border-radius: 25px;
  background-color: #ccc;
  box-shadow: 24px 24px 49px black;
  outline: solid 9px rgba(255, 255, 255, 0.6);
}

h1 {
  margin: 0;
  padding: 10px 0;
  font-weight: 700;
}

span {
  font-weight: 900;
  letter-spacing: 0.125rem;
  text-shadow: 1px 1px 2px black;
}

.r {
  color: red;
}

.o {
  color: orange;
}

.y {
  color: yellow;
}

.g {
  color: green;
}

.b {
  color: blue;
}

.i {
  color: indigo;
}

.v {
  color: darkviolet;
}

/************** media queries **************/

@media only screen and (max-width: 1900px) {
  .container {
    width: 60%;
  }
}

@media only screen and (max-width: 1440px) {
  .container {
    width: 75%;
  }
}

@media only screen and (max-width: 1000px) {
  .container {
    width: 87.5%;
  }
}

@media only screen and (max-width: 900px) {
  h1 {
    font-size: 28px;
  }
}

@media only screen and (max-width: 775px) {
  h1 {
    font-size: 25px;
  }
}

@media only screen and (max-width: 700px) {
  h1 {
    font-size: 22px;
  }
}

@media only screen and (max-width: 610px) {
  .container {
    width: 85%;
  }
  h1 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 560px) {
  h1 {
    font-size: 18px;
  }
}

@media only screen and (max-width: 510px) {
  h1 {
    font-size: 16px;
  }
}

@media only screen and (max-width: 460px) {
  h1 {
    font-size: 14px;
  }
}

/*******************************************/