<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* jens-rwd.css */

ul li {
  list-style: none;
}

header {
  text-align: center;
  margin-bottom: 3.5rem;
}

h1 {
  font-size: 3.5rem;
}


img {
  /* round the corners - less sharp edges */
  display:block;
  margin-left: 45%;
  margin-right: 45%;
  border-radius: 37px;
  margin-bottom: 4 em;
  padding-bottom: 6 em;
  
}


a {
  padding-top: 6 rem;
  padding-top: 10%;
  font-size: 5.5rem;
  /* get rid of blue underline on hyperlink */
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;

  border: 5px solid black;
  border-radius: 40px;

  background-color: rgb(216, 240, 237);
  color: black;
}

a {
    background-color: bisque;
    font-size: 5.5 rem;
    font-weight:normal;
    /* get rid of blue underline on hyperlink */
    text-decoration: none;
    color: black;
    background-color: #ccc;;
    margin-left: 8%;
    margin-bottom:  6%;
    margin-top: 8%;
  
    padding-bottom:  4%;
    padding-top: 4 rem; 
    padding-left: 6%;
    padding-right: 4%;
    
    border: 5px solid black;
    border:1px solid black;
    background-color:#ccc;
    
    /* curves instead of sharp corners */
    border-radius: 1 rem;
    display: block;
    float:down;
}
a:link {
  color: blue;
}
a:visited {
  color: blue;
  background-color: rgb(193, 245, 193);
  padding-left: 6%;
  padding-right: 4%;
  /* get rid of blue underline on hyperlink */
  text-decoration: none;
}
a:hover {
  /* get rid of underline on hyperlink */
  text-decoration: none;
  margin: 7%;
  margin-left: 5%;
  background-color: gold; /* gold looks vivid */
  color: black;
  
}
a:active {
  color: red;
  font-weight: bold;
}
a:visited {
  color: white;
  background-color: rgb(102, 86, 86);
  padding: 30px;
  text-decoration: none;
}

a:focus {
  color: rgb(194, 148, 148);
  background-color: pink;
  text-decoration: none;
}

a:hover {
  color: blue;
  background-color: gold;
  text-decoration: none;

}

a:active {
	color: red;
	background-color: gold;
  text-decoration: underline;
}
body {
    margin: 5%;
    font-family: Georgia, "Times New Roman", Times, serif;
    background-image: linear-gradient
        (to top, skyblue, bisque 25%, bisque 50%);
   
 }

h1, h2 {	
	color: #399;}
h1 {
	font-size: 1.5em;
}
h2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1 rem;
}
small {
  color: black;
  }

ul {
  list-style: none;
}
 
@media screen and (max-width: 600px) {
    /* for screen viewport width less than or equal to 600px */
    body {
         background-color: rgb(17, 17, 232);
         background-image: linear-gradient(to top, red, bisque 50%);
    }
    img {
      float: left; /* move image left if room for it */
      margin: 1 em;
      margin-bottom: 3 em;
    }

    }

    /* @media must fit at end of the css file */

@media screen and (min-width: 700px) {
  body {
      font-size: 0.7em;
      /* use another background-image so we can see when this stuff is working */
      background-image: 
          linear-gradient(to bottom, rgb(218, 233, 238), aquamarine);
  }

  h1 {
      font-size: 2.2em;
  }
  h2 {
      font-size: 1.9em;
  }
  
  a {
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding: 10px;
      text-decoration: none;
  }
  figcaption {
      font-size: 1.6em;
      padding: 5px;
  }  
  img {
      /* width: percentage of screen width */
      width: 40%;
      /* center image */
      display: block;
      margin-left: 3%;
      margin-right: 50%;
      float: left;  /* move image left if room for it */ 
      margin-top: 2 rem;
      padding-bottom: 15%;
  } 
}
</pre></body></html>