Shirley.css

1. shirleydiv {

 width: calc( 100vw - 250px);
 height: 70vh;
 background-color: #fa5;
 border-radius: 30px;
 border: 10px solid #bbb;
 box-shadow: 5px 5px 30px #000;

}

1. artuslogo {

 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);

} img.artuslogo2 {

 width: auto;
 max-height: 60vh;

}

1. quote1 {

 top: 3vh;
 left: 2vw;
 position: relative;
 max-width: 45vw;

}

1. quote2 {

 top: 7vh;
 left: 2vw;
 position: relative;
 max-width: 40vw;

}

1. quote3 {

 top: 11vh;
 left: 2vw;
 position: relative;
 max-width: 35vw;

}

1. quote4 {

 top: 15vh;
 left: 2vw;
 position: relative;
 max-width: 30vw;

}

1. quote5 {

 top: 19vh;
 left: 2vw;
 position: relative;
 max-width: 25vw;

}

.news {

 font-size: 0.75vw;
 line-height: 3vh;
 display: block;
 color: #ffffff;
 text-shadow: 1px 1px 4px #000000;
 font-weight: bold;
 font-family: "courier new";

}

@media (max-aspect-ratio: 3 / 1) {

 .news {
   font-size: 1vw;
   line-height: 2.75vh;
 }

} @media (max-aspect-ratio: 2 / 1) {

 .news {
   font-size: 1.25vw;
   line-height: 2.75vh;
 }

}

img.theshirley {

  width: auto;
  height: auto;
  max-height: 70vh;
  right: 0px;
  bottom: 0px;
  position: absolute;

}

@media (max-aspect-ratio: 1 / 1 ) {

 #quote1 {
   max-width: 55vw;
 }
 #quote2 {
   max-width: 50vw;
 }
 #quote2 {
   max-width: 45vw;
 }
 #quote2 {
   max-width: 40vw;
 }
 img.theshirley {
  right: -50px;
 }

}

@media (max-aspect-ratio: 1 / 2 ) {

 #quote1 {
   max-width: 60vw;
 }
 #quote2 {
   max-width: 55vw;
 }
 #quote2 {
   max-width: 50vw;
 }
 #quote2 {
   max-width: 45vw;
 }
 img.theshirley {
  right: -10px;
 }

}

@media (max-aspect-ratio: 1 / 3 ) {

 #quote1 {
   max-width: 65vw;
 }
 #quote2 {
   max-width: 60vw;
 }
 #quote2 {
   max-width: 55vw;
 }
 #quote2 {
   max-width: 50vw;
 }
 img.theshirley {
  right: -150px;
 }

}