@font-face{
    src: url(https://rayvern.neocities.org/segoesc.ttf);
    font-family: "segoe script";
}

body{
  background-image:url(https://rayvern.neocities.org/images/Yasha2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

p{
  color:white;
  }
  
  
  #container{
    border:2px solid;
    }
  #container p{
    background-color:pink;
    }

 #container2{
    border:2px solid;
    }
  #container2 > p{
    background-color:cyan;
    }
  
    
  #container4{
    border:2px solid;
    }
  #container4 + p{
    background-color:pink;
    }

#div1{
  background-color:red;
  width: 100px;
  height: 100px;
  display: inline-block;
  }
  #span1{
  background-color:blue;
  width: 100px;
  height: 100px;
  display: inline-block;
 }
 
  #div2{
  background-color:red;
  width: 100px;
  height: 100px;
  display: block;
  }
  #span2{
  background-color:blue;
  width: 100px;
  height: 100px;
  display: block;
  }
  
  #div3{
  background-color:red;
  display: inline;
  }
  #span3{
  background-color:blue;
  display: inline;
  }
  
  #div4{
  background-color:red;
  display: inline-block;
  height:100px;
  width:100px;
  visibility:hidden;
  }
  #span4{
  background-color:blue;
  height:100px;
  width:100px;
  display: inline-block;
  }

#image1{
  float: left;
  margin: 2px;
  margin-right: 4px;
  }

.box{
    border: 5px;
    padding: 15px;
    width: 50%;
    height: auto;
    margin: 50px;
    text-align: center;
    font-size:4em;
    
  max-height: 75%;  
  }
  
  #box1{
    background-color:lightgreen;
    margin-left: 80px;
    }
    
  #box2{
    background-color:white;
    margin-right:auto;
    }
    
  
  #box3{
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: relative;
    top: 100px;
    }
    #box4{
    width: 200px;
    height: 200px;
    background-color: green;
    position: fixed;
    top:0px;
    right:0px;
    }
    #box5{
    width: 100px;
    height: 100px;
    top:50px;
    bottom:50px;
    background-color: blue;
    position: absolute;
    }
    #box6{
    width: 200px;
    height: 200px;
    background-color: brown;
    position: sticky;
    top:0px;
    }
  
  #hborder{
    border-style:dashed;
    border-width:5px;
    border-color:cyan;
    border-radius:15px;
    }
    
  #pborder{
    border-bottom: 3px dotted green;
    border-right: 3px dotted red;
    border-left: 3px dotted yellow;
    border-top: 3px dotted magenta;
    
    border-radius: 10px
    }
    
 #hshadow{
  text-shadow: 3px 3px 5px grey,
  -3px -3px white;
 }
 
 #pshadow{
    height: 200px;
    width: 200px;
    background-color: black;
    box-shadow: 5px 5px 7px lightblue;
    overflow: auto;
   }
   
   
#button1{
  font-size:25px;
  background-color:grey;
  color:lightblue;
  border-radius:5px
  }
#button1:hover{
  font-size:50px;
  background-color:red;
  color:black;
  border-radius:10px;
  }
  
#button2{
  font-size:25px;
  background-color:lightgreen;
  color:green;
  border-radius:25px
  }  
#button2:active{
  font-size:15px;
  background-color:pink;
  color:red;
  border-radius:25px
  }
  
  #greeting{
    color:white;
    font-size:25px;
    }
  #greeting p{
     background-color:orange;
     padding: 10px;
     display: none;
    }
  #greeting:hover p{
     display:block;
    }
  
  a:visited{
    color: grey;
    }


h1{
  font-family:verdana, arial;
  color:white;
}
#p1{
  font-family:"lucida console", "courier new";
  font-size:18px;
  font-weight:bold;
  font-style:italic;
  color:#F07D28;
}
#p3{
  font-family:DynaPuff;
  color:rgb(113,0,0);
}
#p5{
  font-family:"segoe script";
  color:hsl(303,53%,68%);
}
.even{
  color:magenta;
}



.pagination{
      text-align: center;
    }
.pagination a{
      background-color:grey;
      color:black;
      text-decoration:none;
      padding: 8px 15px;
      display: inline-block;
    }
.pagination a.active{
   background-color:darkgreen;
   font-weight:bold;
   border-radius:5px;
   }
.pagination a:hover:not(.active){
    background-color:lightgreen;
    border-radius:5px;
   }


<!-- hsl is called hls in CSP you have to just switch the two percentage values around
also cmyk doesnt work lol -->