body{
    margin:0;
    font-family: 'Comic Sans MS';
    font-size: calc(100vw * 0.01);
    text-align: justify;
    color: #ffffff;
}

.intro{
    background:url('https://newevolutiondesigns.com/images/freebies/cool-wallpaper-3.jpg'),linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde);
    width:100%;
    height:300vh;
    background-size:cover;
    background-blend-mode: hard-light;
    animation: hue-rotate 3s linear infinite;
}

.back {
    background-attachment: fixed;
}
.p {
   margin: 0 40px 20px 40px;
   padding: 5px; 
}
.text {
   background:blue;
   color:white;
}
.image {
   float:right;
   margin: 4px 10px 10px 10px;
   border:1px solid #CCCCCC;
   padding:6px;
   width: 300px;
   height: 200px;
}
.image2 {
   float:left;
   margin: 4px 10px 10px 10px;
   border:1px solid #CCCCCC;
   padding:6px;
   width: 300px;
   height: 200px;
}
h1 {
    font-family: 'Courier New';
    font-size: 70px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 0 0 3px green, 0 0 18px #333;
}
.h {
  writing-mode: vertical-rl;
}

img.rot {
  animation: 1s linear 0s normal none infinite running rot;
  -webkit-animation: 1s linear 0s normal none infinite running rot;
  width: 400px;
  height: 600px;
  border-radius: 8000px;
  box-shadow: 0 0 0 3px green, 0 0 18px #333;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


@keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}