 <style>
        p {
          	font-family: Montserrat,sans-serif;
          		
          }
          	
        	body{
        		background-color: whitesmoke;
        		color: #004B5B;
        		padding: 30px;
          	margin: 50px;
        		border: 12px;
        	}

        	h1{
        		color: red;
        	  	font-family: Montserrat,sans-serif;
        	  	font-size: 700%;
              font-weight: 700;
          }
          	h2{
        	
        	  	font-family: Montserrat,sans-serif;
        	  	font-size: 220%;
              line-height: 1.6em;
        	  	text-decoration: underline;
        	  	text-decoration-style: dotted;
        	  	text-underline-offset: 10px;
        	  	
          }
        	text1{
        		
        	  	font-family: Montserrat,sans-serif;
        	  	font-weight: 500;
        	  	font-size: 125%;
          		line-height: 1.3em;
              padding: 0%;
          }
          	
          	text2{
        		
        	  	font-family: Montserrat,sans-serif;
        	  	font-weight: 500;
        	  	font-size: 125%;
        	  	text-indent: 0%;
          		line-height: 1.3em;
          		
          }

          a {
            color: red;
          }
          
          p.solid {
        		
        	 font-family: Montserrat,sans-serif;
        	 font-weight: 700;
        	 font-size: 140%;
           line-height: 1.3em;
           border-style: solid;
        	 border color: hotpink;
        	 padding: 50px;
        	 border-radius: 2px 2px;
          }
         


        .topnav {
          overflow: hidden;
          font-family: Montserrat,sans-serif;
          font-size: 250%;

         
        }

        label .menu {
  position: absolute;
  right: -100px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: red;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 red, 0 0 0 0 red;
  cursor: pointer;
  
}

label .hamburger {
  position: absolute;
  top: 135px;
  left: 50px;
  width: 30px;
  height: 3px;
  background: white;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: white;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

label input { display: none; }

label input:checked + .menu {
  box-shadow: 0 0 0 100vw red, 0 0 0 100vh red;
  border-radius: 0;
  
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
  
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
  
}

label input:checked + .menu + ul { opacity: 1; }

label ul {
  z-index: 200;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
}

label a {
  margin-bottom: 1em;
    display: block;
  font-family: Montserrat,sans-serif;
  font-size: 35px;
  display: whitesmoke;
  color: whitesmoke;
  text-decoration: none;
  
}


ul,
ol {
  margin: 0.75em 0;
  padding: 1em;
  list-style: none;
}
ul li::before {
  content: "";
  border-color: transparent white;
  border-style: solid;
  border-width: 0.65em 0 0.65em 0.95em;
  display: block;
  height: 0;
  width: 0;
  left: -1.8em;
  top: 1.75em;
  position: relative;
}

ol li::marker {
  content: "▶";
}



        
        
        @media screen and (max-width: 1200px) {
    
          h1{
              font-size: 500%;
          }
      
          }
        
        @media screen and (max-width: 1200px) {
          .topnav.responsive {position: relative;}
          .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
          }

        @media screen and (max-width: 800px) {
          
          h1{
              font-size: 300%;
          }
            h2{
                font-size: 180%;
      
          }
          text1{
              font-size: 100%;
            
          }
            
            text2{
            
              font-size: 100%;
         
          }

          }

    
          }
          .st0 a {
          	color: white;
          	width: 20%;
          	position: justified;         
          }
          .icon {
          size: 400%;
          display: inline-block;
          cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}
          }

         

    </style>