<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Poppins:wght@500&family=Roboto&display=swap" rel="stylesheet"> 
<body>
  <input type="checkbox">
  <div id="container">
    <h1><u>This Is Fact</u></h1>
    <h3>The Eiffel Tower can be 15 cm taller during the summer</h3>
    <p>When a substance is heated up, its particles move more and it takes up a larger volume – this is known as thermal expansion. Conversely, a drop in temperature causes it to contract again. The mercury level inside a thermometer, for example, rises and falls as the mercury’s volume changes with the ambient temperature. This effect is most dramatic in gases but occurs in liquids and solids such as iron too. For this reason, large structures such as bridges are built with expansion joints which allow them some leeway to expand and contract without causing any damage.</p>
  </div>
</body>
* {
  left: 0;
  top: 0;
  margin: 0;
}
input[type="checkbox"] {
  z-index: 3;
  width: 10vw;
  height: 4vw;
  -webkit-appearance: none;
  position: absolute;
  outline: none;
  border: none;
  cursor: pointer;
  left: 85vw;
  top: 10vh;
  border-radius: 2.5vw;
  background: #0B0E21;
}
input[type="checkbox"]:before {
  content: "";
  position: absolute;
  width: 3vw;
  height: 3vw;
  border-radius: 5vw;
  background: #f4f1de;
  left: .5vw;
  top: .5vw;
  transition: .5s;  
}
input[type="checkbox"]:checked {
  background: #f4f1de;
}
input:checked[type="checkbox"]:before {
  left: 6.5vw;
  background: #0B0E21;
}
#container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  background: #f4f1de;
}
h1 {
  text-align: center;
  color: #e07a5f;
  font-family: 'Oswald', sans-serif;
  font-size: 5vw;
  margin: 12vh auto 0 auto;
}
h3 {
  text-align: center;
  color: #3d405b;
  font-family: 'Poppins', sans-serif;
  font-size: 2.5vw;
  margin: 5vh auto;
}
p {
  color: #7E4D65;
  font-size: 2.5vw;    
  font-family: 'Roboto', sans-serif;
  text-align: left;
  margin: 2vh 2vw;
}


@media (max-width: 720px) {
  input[type="checkbox"] {
    width: 20vw;
    height: 8vw;
    left: 75vw;
    border-radius: 25vw;
    top: 5vh;
  }
  input[type="checkbox"]:before {
    width: 6vw;
    height: 6vw;
    top: 1vw;
    left: 1vw;
  }
  input:checked[type="checkbox"]:before {
    left: 13vw;
  }
  h1 {
    font-size: 10vw;
  }
  h3 {
    font-size: 6.2vw;
    text-align: left;
    margin-left: 2vw;
  }
  p {
    font-size: 5vw;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.