@import url('https://fonts.googleapis.com/css2?family=Livvic&display=swap');
@media (max-device-width: 1000px) {
  html {font-size: 10pt;}
  .kampo {
    display: inline-flex;
    margin: .5em;
    padding: .5em;}
  .kampo:hover {border-color: var(--Sanga);}
}
@media (min-device-width: 1000px) {
  html {font-size: 13pt;}
  .kampo {
    margin: .5em;
    padding: .5em;
    position: absolute;
    transition: height 1s, border-color .5s;}
  .kampo:hover {width: 80%;
    height: 72%;
    font-weight: bold;
    border-color: var(--Sanga);}
}
:root {
  --Fono: rgb(230,230,245);
  --Fono2: rgb(245,240,255);
  --Blanka: rgb(255,255,255);
  --Griza: rgb(150,170,190);
  --Sanga: rgb(130,0,0);
}
* {
  transition: all .3s;
}
a {
  text-decoration: none;
}
body {
  padding: 1em;
  background-color: var(--Fono);
  font-family: 'Livvic', Arial, Helvetica, sans-serif;
}
.elstara {
  font-size: 1em;
  color: var(--Sanga);
}
.ero {
  background-color: var(--Fono2);
  border: 2px solid var(--Griza);
  margin: 1em .5em;
  padding: .5em 1em .7em 1em;
  border-radius: .5em 0;
}
.kampo {
  width: 70%;
  height: 60%;
  justify-content: center;
  background: linear-gradient(to bottom, var(--Fono), var(--Griza));
  border-radius: 0em 1em 1em 1em;
  border: .2em solid var(--Fono);
  color: var(--Sanga);
  box-shadow: .1em .2em .3em black;
}
#kampoj {
  text-align: center;
}
#kapo {
  text-align: center;
  padding: 1em 0em;
  background-color: var(--Blanka);
}
#kbildo {
  width: 10rem;
  display: block;
  margin: auto;

}
#KieNiEstas {
  font-size: 1.8em;
  text-align: center;
  font-weight: bold;
  background-color: var(--Griza);
  color: var(--Blanka);
  padding: .5em;
  margin-bottom: 1em;
}
.kion {
  font-weight: bold;
  color: var(--Sanga);
  margin-bottom: .5em;
}
.kiu {
  margin-right: 1em;
}
#kunKapo {
  font-size: 1.4em;
  font-weight: bold;
  color: var(--Sanga);
}
li {
  margin: 1em 0;
}
.ligilo {
  cursor: pointer;
  color: rgb(255,255,255);
  background-color: var(--Sanga);
  padding: .1em .5em;
  border-radius: .5em 0;
  margin-left: .5em;
}
.ligilo:hover {
  background-color: var(--Griza);
}
.ml {
  height: 1.6em;
}
p {
  text-align: justify;
}
.piedaLinio {
  display: block;
  font-size: .8rem;
  margin: 1rem 0;
  text-align: center;
}
#piedo {
  margin-top: 2em;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  padding: .2em 0 0 0;
  background-color: var(--Griza);
  color: var(--Blanka);
}
#piedo img {
  height: 4rem;
}
.rkiu {
  padding-left: 1em;
  color: #700;
}
.rtitolo {
  color: #000;
  font-weight: bold;
}
.runuo {
  display: inline-block;
  width: fit-content;
  background-color: rgba(200,210,220,.5);
  margin: 1em;
  padding: .5em 1em;
  border-radius: .3em;
  border: 1px solid #999;
}
.runuo:hover {
  background-color: rgb(190,200,210);
}
.runuo:active {
  transform: scale(.9);
}
.sekTek {
  font-size: .9em;
}
.sekTit {
  background-color: #fff;
  width: fit-content;
  padding: .2em 1.3em .2em 1em;
  border-radius: 0 .5em .5em 0;
  box-shadow: 1px 1px 2px;
  cursor: pointer;
  font-size: 1.2em;
}
.sekTit:active {
  transform: scale(80%);
}
#subKapo {
  color: var(--Sanga);  
}
.ujo {
  width: 8em;
  height: 6em;
  font-size: 1.4em;
  margin: .2em;
  display: inline-flex;
  position: relative;
  justify-content: center;
}