:root {
    --textColor: #464e45;
    --darkPink: #f72c5b;
    --pink: #ff748b;
    --lightPink: #ffd7d7;
    --darkGreen: #345b2f;
    --green: #a7d477;
    --lightGreen:#e4f1ac;
    --white: #fbf7f7;
    
    --greenOpaco: #d2ebb7;
    --pinkOpaco: #ddbbbb;
    --darkPinkOpaco: #df315a;

    --lighterPink: #ffeaea;
    --lighterGreen:#fdfff4;

    --brightGreen: #5cb300;
    --greenTransparente: #a7d477a4;
    --lightGreenTransparente: #e4f1aca8;
    --lightPinkTransparente: #ffd7d7b0;
    --pinkTransparente: #ff748bc0;
    --darkGreenTransparente:#345b2f81;
    --darkPinkTransparente: #df315a60;

    --greenGradient: url('./imagenes/webrings/barrita1.gif') 160px 0 no-repeat, linear-gradient(to bottom,var(--lightGreen) 0%,var(--green) 100%);
    --pinkGradient: url('./imagenes/webrings/barrita2.gif') 160px 0 no-repeat,  linear-gradient(to bottom,var(--lighterPink) 0%,var(--pink) 100%);

    --pinkHorizontal:linear-gradient(to left,var(--lightPink) 0%,transparent 100%);
    --greenHorizontal:linear-gradient(to left,var(--lightGreen) 0%,transparent 100%);
}

@font-face {
  font-family: "Averia";
  src: 
    url("font/Averia.ttf") format("truetype"),
    url("font/Averia.woff2") format('woff2'),
    url("font/Averia.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
}

@font-face {
  font-family: "candycore";
  src: url("font/Y1CandyCore.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  letter-spacing: 2px;
}

body{
  font-family: "Averia";
  background-image: url('./imagenes/webrings/bg.gif');
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-color: var(--lightGreen);
  color: var(--textColor);
  cursor: url(./imagenes/cursor.png), auto;
  font-size: 14px;
}

a{
  cursor: url(./imagenes/cursorlink.png), auto;
}

h1, h2{
  font-family: "candycore";
  margin: 10px;
  margin-right: 20px;
}

p{
  margin: 10px;
}

.barrita{
  width: 100%; 
  margin-left: auto;
  margin-right: 0;
  height: 50px;
  align-content: center;
  background-blend-mode: soft-light;
   position: relative;
}

.pinklink{
  color: var(--darkPink);
}

.pinklink:hover{
  color: var(--white);
  background-color: var(--pink);
}

.pinklink:hover > h2{
  background: linear-gradient(to right, transparent, var(--pink));
  text-shadow: 0px 0px 5px var(--darkPinkOpaco);
  color: var(--white);
}

.greenlink{
  color: var(--darkGreen);
}

.greenlink:hover{
  color: var(--white);
  background-color: var(--darkGreenTransparente);
}

.greenlink:hover > h2 {
  background: linear-gradient(to right, transparent, var(--green));
  text-shadow: 1px 1px 5px var(--darkGreen);
  color: var(--white);
}

.imgbutton{
  margin-right: 10px;
  border: 2px solid var(--lightPink);
}

.imgbutton:hover{
  border: 2px solid var(--pink);
}