:root{

  --maincolor:#b4b4b4;

  --bordercl:#b4b4b4;

  --callouctcolor:#c15a31;

  --hovercolor:#b4b4b4;

}



html{

  font-family:"Roboto Mono",monospace;

  font-size:16px;

  letter-spacing:-0.5px;

  line-height:1.75;

}



body{

  margin:0;

  background:#f5f5f5;

  color:#232333;

}



.content{

  max-width:900px;

  margin:0 auto;

  padding:0 1rem;

}





a{

  color:inherit;

  text-decoration:none;

  border-bottom:3px solid var(--maincolor);

}

a:hover{

  background:var(--hovercolor);

  color:#fff;

}





.visibledevice{display:none;}

.visibledesktop{display:block;}



@media (max-width:783px){

  .visibledesktop{display:none;}

  .visibledevice{display:block;}

  .content{max-width:100%;padding:0;}

}





header{margin-bottom:2rem;}

.main{font-size:1.5rem;margin-bottom:0.5rem;}

#title{border-bottom:none;}





#menudes{

  padding:7px 0;

  border-top:1px solid var(--bordercl);

  border-bottom:1px solid var(--bordercl);

}

#menudes>li{

  display:inline-block;

  width:24%;

  border-right:1px solid var(--bordercl);

  text-align:center;

}

#menudes>li:last-child{border-right:none;}





#menumob{

  display:flex;

  flex-direction:column;

  gap:0.5rem;

}





.single-description{

  display:flex;

  justify-content:space-between;

  text-transform:uppercase;

  border-bottom:1px solid var(--bordercl);

  margin:-10px 0 10px;

}





#baner{

  text-align:left;

  margin-top:2rem;

}

#baner h1{font-size:1.5rem;margin-bottom:0.5rem;}



#baner h1::before{

  content:"#";

  color:var(--bordercl);        

  margin-right:0.4rem;

}





.wrapper{

  position:relative;

  border-top:1.3px dashed var(--bordercl);

  border-left:1.3px dashed var(--bordercl);

  padding:15px 10px 10px;

  max-width:800px;

  margin:0 auto 1.5rem;

}

.wrapper label{

  position:absolute;

  top:-10px;

  left:10px;

  background:#f5f5f5;

  padding:0 5px;

  border:0.1px solid var(--bordercl);

  line-height: 1.2;

  white-space: nowrap;

}



@media (max-width: 600px) {

  .wrapper label {

    position: static;

    display: inline-block;

    margin-bottom: 0.5rem; 

    white-space: normal;   

  }

}



footer{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:1rem;

  margin-top:2rem;

  padding-top:0.5rem;

  border-top:1px solid var(--bordercl);

}

.soc{border-bottom:none;}

.footer-info{

  text-align:center;

  font-size:13px;

  margin-top:10px;

}

.ref {

  font-size: 0.7em;        

  vertical-align: super;  

  text-decoration: none;  

  line-height: 1;         

  margin-left: 2px; 

  border-bottom: none;  

}



.ref:hover {

  text-decoration: underline;

}





.single-description{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:.5rem;

  flex-wrap:wrap;

  font-size: clamp(.9rem, 2.2vw, 1rem);

}

.single-description p{ margin:0; white-space:nowrap; }

.single-description .kicker{ white-space:normal; } 





@media (max-width: 783px){

  .single-description{

    display:grid;

    grid-template-columns: 1fr auto;

    grid-template-areas:

      "kicker kicker"

      "date   by";

    row-gap:.25rem;

  }

  .single-description p:nth-child(1){ grid-area: date; }

  .single-description .kicker{

    grid-area: kicker;

    font-size: clamp(1rem, 4.6vw, 1.15rem);

    text-align:left; 

  }

  .single-description p:last-child{

    grid-area: by;

    justify-self:end;

  }

}



.references {

  font-size: 0.85em;

}