@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


.nav
{
 vertical-align:middle;
 padding: 1% 20px 1% 20px;
 display:inline-block;
 color:white;
 margin-left:5px;
 font-size: 30px;
 font-family:Poppins;
 text-decoration:none;
}

.centerimg
{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.background
{
  background-color:#fff; 
  background-image:url('CSS/Images/Backdrop.png');  
  background-size:cover; 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: multiply; 
  justify-content:center;
}

.special
{
 filter:drop-shadow(0px 0px 3px #ff0099);
 font-family:Poppins; 
 text-align:center; 
 color:white;
}

.backpanel
{
  left:0; 
  right:0; 
  top:0;
  margin: 0 auto; 
  width:1200px; 
  height: 100vh;
  position:fixed;
  background-color:#00000099; 
  filter:drop-shadow(0px 0px 50px);
  z-index:-1;
}

p
{
 font-size:20px;
 font-family:Poppins; 
 text-align:center; 
 color:white;
}

.dropShadow
{
  filter:drop-shadow(0px 0px 3px #ff0099);
}

.highlighter
{
  transition:0.2s;
}

.highlighter:hover
{
  transform:translate(0px,-5px) rotate(10deg);
  color:#ff0099;
  filter:drop-shadow(0px 0px 6px #ff0099);
}

.link
{
 font-size:21px;
 font-family:Roboto; 
 text-align:center; 
 color:#ff0099;
 text-decoration:none;
 transition: 200ms;
}

.link:hover
{
  font-size:24px;
  transition: 200ms;
  color:#FFFF00;
}

@keyframes backdropSlideDown
{
  from{background-position-y: 0%;}
  to{background-position-y:100%;}
}

@keyframes spinner
{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes backdropSlideUp
{
  from{background-position-y:100%;}
  to{background-position-y:0%;}
}

.copyright
{
  position:fixed; 
  right:20px; 
  bottom:0px;
  text-align: right; 
  font-size:12px; 
  filter:drop-shadow(2px 2px 1px #000)
}

@keyframes backdropSlideDiag
{
  from{background-position-y:100%;background-position-x: 100%;}
  to{background-position-y:0%;background-position-x:0%;}
}

#notfoundgraphic
{
  animation-timing-function: linear;
  animation-name:spinner; 
  animation-duration: 5s; 
  animation-iteration-count: infinite;
}

.creationlist
{
  display:flex; 
  align-items: center; 
  flex-direction: column; 
  width:900px;
  border-radius: 25px;
  flex-grow:1;
  gap:20px;
  margin: 0 auto 50px auto;
}

.creationitem
{
  width:100%; 
  border-radius: 25px; 
  background-color: #202020; 
  height:200px; 
  overflow:hidden;
  background-size: cover;
  background-position:50%;

  outline-width: 2px;
  outline-color: #272727;
  outline-style:dashed;

  filter:drop-shadow(0px 0px 10px) contrast(1);

  display:flex;
  align-items:center;
  flex-direction: row;
  transition:200ms;
}

.creationitem:hover
{
  transition:200ms;
  filter:drop-shadow(0px 0px 10px) contrast(1.2);
}

.creationitemlogo
{
  background-size:contain; 
  background-repeat:no-repeat;
  background-position: center center;
  width:50%; 
  height:100%; 
  margin: auto 10px auto 10px;
  filter:drop-shadow(0px 0px 10px #000000);
}

.creationitempanel
{
  width:110%; 
  height:100%; 
  background-image:linear-gradient(to right, #00000077, #000000);
  filter:drop-shadow(-10px 0px 5px)
}

.creationitempanel p
{
  margin: 10px 10px 10px 10px;
  text-align: left;
}

.webringlist
{
  display:flex; 
  align-items: center; 
  flex-direction: row; 
  width:900px;
  border-radius: 25px;
  flex-grow:1;
  flex-wrap: wrap;
  justify-content: center;

  gap:20px;
  margin: 0 auto 50px auto;
}

.webringitem
{
  width: 250px; 
  height:125px;
  
  flex:0 250px;

  border-radius: 90px; 
  background-color: #202020; 
  overflow:hidden;
  background-size: cover;
  background-position:50%;

  outline-width: 2px;
  outline-color: #272727;
  outline-style:dashed;

  filter:drop-shadow(0px 0px 10px) contrast(1);

  align-items:center;
  transition:200ms;
}

.webringitem:hover
{
  transition:200ms;
  filter:drop-shadow(0px 0px 10px) contrast(1.2) brightness(1.25);
}

.divider
{
  background-color:white;
  margin:auto; 
  margin-top:0px; 
  display:block; 
  width:400px; 
  height:2px; 
  margin-bottom:80px;
}

.webringitempanel
{
  width:100%; 
  height:100%; 
  display:flex;
  flex-direction: column;
  background-image:linear-gradient(to bottom, #00000000, #000000BB);
}

.webringitempanel a
{
  font-family:Poppins; 
  color:white;
  font-size:18px;
  filter:drop-shadow(0px 0px 2px #000);
  margin: auto auto auto auto;
  padding: auto 0;
  text-align: center;
  vertical-align:middle;
  line-height:125px;
  justify-content:center;
  text-shadow: 2px 2px #888;
  text-decoration:none;
  transform:scale(1);
  transition-duration: 200ms;
  width:100%;
  height:100%;
}

.webringitempanel:hover a
{
  transform:scale(1.1)
}

.linkblock
{
  font-size:20px;
  line-height:30px;
  vertical-align: middle;
  font-family:Poppins; 
  text-align:center; 
  color:white;
  text-decoration:none;

  width:300px;
  
  padding-bottom:20px;
  padding-top:20px;

  margin: 0 auto;
  border-radius:25px;
  background-color:#ff0099;

  outline: 2px dashed #ff0099;

  text-shadow: 1px 1px #000;
  transition:200ms;
}

.linkblock:hover
{
  width:425px;

  transition:200ms;
  background-color:#000000;
  outline-color:#ff0099;
  color:#ff0099;
}

.creationitempanellinkblock
{
  display:flex; 
  align-items: space-evenly; 
  justify-content: space-evenly;
}

.sideborder
{
  animation-name:backdropSlideDown;
  animation-duration:16s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  background-size:contain;
  background-repeat:repeat-y;
  background-image: url('CSS/Images/SideBorder.png');
  display:block;
  background-blend-mode:normal; 

  width:10%; 
  height:100%; 
  top:0%; 
  left:0%; 
  position:fixed; 
  z-index:-1;
}

#logo
{
  display:block;
  transition:0.2s;
}
#logo:hover
{
  transform:scale(1.1);
}