@font-face {
  font-family: centuryGothic;
  src: url(centurygothic.ttf);
}

:root{
  --grad-bg:grey
}

img {
  height: 200px;
  width: 200px;
  border-radius: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

h3{
  color:white;
  text-align:center;
  margin-top:25px;
  font-size: 25px;
  margin-bottom: 100px;
}

h1{
  font-size: 200px;
  color: white;
  text-align: center;

  margin-top: 50px;
  margin-bottom: 0px;
}

h2{
  color: white;
  text-align: center;
  font-size: 50px;
}

html{

  padding-top:0px;
  margin-top: 0px;
  background-color: black;
  background-image: linear-gradient(90deg,var(--grad-bg) 5%,black 5% 95%);
  background-size: 4rem 4rem ;

}


body {
  margin-top:000px;
  margin-bottom: 0px;
  padding-top: 0px;
  min-height: 100vh;
  border: 1px solid black;
  width: 99%;
  margin-left: 0px;
  
  background-image: linear-gradient(90deg,black ,transparent ,black );
  font-family:centuryGothic ;
}



#red:hover {
  color: rgb(252, 68, 36);
}

#blue:hover {
  color: rgb(0, 140, 255);
}

#orange:hover {
  color: orange;
}

#green:hover {
  color: rgb(52, 255, 96);
}

#yellow:hover {
  color: yellow;
}

/*
.color-title:hover{
  font-size: 55px;
  font-weight: bold;
}*/