@charset "utf-8";

*{
  margin:0;
  padding:0;
  overflow-y: auto;
  box-sizing: border-box;
}

body{
    font-family: "Inter", sans-serif, 'Segoe UI',Tahoma,Geneva,Verdana;
    color:#333333;
    background-color:#F8F9FA;
}

h1 { 
  font-size: clamp(1rem, 6vw, 2.5rem);
  color:#5FC9F3;
  font-weight: 600;
  padding: 0 2%;
}

p { 
  font-size: clamp(1rem, 2.8dvw, 1.5rem); 
  color:#4A4E69;
  text-align: left;
  line-height: 1.5;
}

a {
  cursor: pointer;
  text-decoration:underline;
  color:#5FC9F3;
  transition: all 0.3s ease;
}
a:hover {
  color:#0D47A1;
  text-decoration:none;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  /* justify-content: center;  */
  align-items: center; 
  text-align: center;
  background-color:#F8F9FA;
  z-index: 10000;
} 

.index-header{
    border-bottom: #e8e9ea 1px solid;
}

.search-container {
    display: flex;
    background-color:#F8F9FA;
    justify-content: center; 
    align-items: center;     
    margin-top: 11%;
    height: auto;           
    padding: 1rem;
}
.search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #898989;
    padding: 0.3rem .6rem;
    border-radius: 22px;
    flex-wrap: wrap;
    max-width: 700px;
    background-color: #f9f9f9;
}

.search-box > .logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.search-form > input {
    flex: 1; 
    font-size: 1rem;
    /* padding: 0.5rem; */
    padding: 0;
    height: 38px;
    width: 500px;
    border: none;
    /* border: 1px solid #898989; */
    /* border-radius: 5px; */
    background: transparent;
    outline: none;
    box-sizing: border-box;
}

.search-form > button {
  cursor:pointer;
  align-items: center;
  justify-content: center;
  width:38px;
  height:38px;
  border: none;
  background-image: url('/images/vm-magnifying.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color:transparent;
  outline: none;
}

section{
  position: relative;
  padding-top: .5%;
  background-color:#F8F9FA;
  height:auto;
  text-align:center;
  z-index: 8000;
}

article{
  width:280px;
  height:auto;
  display:inline-block;
  padding:12px;
  background-color:transparent;
  overflow-y:hidden;
}

.uno, .due, .tre, .quattro, .cinque, .sei,
.sette, .otto, .nove, .dieci, .undici, .dodici {
  position:relative;
  background-color:transparent;
  font-weight: normal;
  width:auto;
} 

.uno a:link, .due a:link, .tre a:link, 
.quattro a:link, .cinque a:link, .sei a:link, 
.sette a:link, .otto a:link, .nove a:link, 
.dieci a:link, .undici a:link, .dodici a:link {
  text-decoration:none;
}

.uno{
  color:#5B84B1FF;
  font-family:Tahoma;
  margin-left:25px;
  writing-mode:vertical-lr;
  text-orientation:upright;
  font-size:36px;
  z-index:1; 
}
.uno a:link{color:#5B84B1FF;}

.due {
  color:#5F4B8BFF;
  font-family:sans-serif;
  margin-left:13px;
  margin-top:10px;
  font-size:34px;
  z-index:2;
}
.due a:link{color:#5F4B8BFF;}

.tre {
  color:#a393eb;
  font-family:'Lucida Sans Regular';
  writing-mode:vertical-lr;
  text-orientation:mixed;
  padding-left:178px;
  margin-top: -100px;
  font-size:32px;
  z-index:3;
}
.tre a:link{color:#a393eb;}

.quattro {
  color:#007cb9;
  font-family:Verdana;
  margin-left:10px;
  margin-top:-15px;
  padding-bottom:2%;
  font-size:26px;
  z-index:4;
}
.quattro a:link{color:#007cb9;}

.cinque {
  color:#42EADDFF;
  font-family:'Trebuchet MS';
  margin-left:50px;
  margin-top:-30px;
  font-size:22px;
  width:120px;
  z-index:5;
}
.cinque a:link{color:#42EADDFF;}

.sette {
  color:#66bfbf;
  font-family:Verdana;
  margin-top: -190px;
  font-size:30px;
}
.sette a:link{color:#66bfbf;}

.sei {
  color:#f8da5b;font-family:Cambria;
  writing-mode:vertical-lr;
  margin-left: 55px;
  margin-top:10px;
  font-size:28px;
  z-index:9;
}
.sei a:link{color:#f8da5b;}

.otto {
  color:#5fc9f3;
  font-family:Cambria;
  margin-left:85px;
  margin-top: -100px;
  font-size:26px;
}
.otto a:link{color:#5fc9f3;}

.nove{
  color:#d59bf6;
  font-family:Cambria;
  margin-left: -20px;
  margin-top:5%;
  font-size:18px;
  z-index: 11;
}
.nove a:link{color:#d59bf6;}

.dieci {
  color:#FFD662FF;
  font-family:Calibri;
  margin-left:100px;
  margin-top:-40px;
  font-size:26px;
  z-index: 10;
}
.dieci a:link{color:#FFD662FF;}

.undici {
  color:#38598b;
  font-family:Calibri;writing-mode:vertical-lr;
  text-orientation:upright;
  margin-left:220px;
  margin-top:1%;
  margin-bottom:2px;
  font-size:13px;
}
.undici a:link{color:#38598b;}

.dodici {
  color:#5dacbd;
  font-family:Calibri;
  margin-left:105px;
  margin-top:-90px;
  font-size:16px;
  z-index:12;
}
.dodici a:link{color:#5dacbd;}

.hr-ads {
  padding:.2%;
}

.hr-ads iframe, .hr-ads div, .hr-ads ins{
  width:100%;
  text-align:center;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border:0 !important;
}

.hr-line{display:flex;gap:1%;align-items:center;padding:.6% 8%;}
.hr-line::before {content:"";flex:.3;height:1px;background:#898989;}
.hr-line::after{content:"";flex: 2.90;height: 1px;background:#898989;}


footer {
  position: relative;
  padding-top: .5%;
  padding-bottom: 1%;
  width: 100%;
  bottom: 0;
  text-align: center;
  font-weight: 100;
  background-color:#F8F9FA;
    /* border: 1px red solid; */
}

footer > img{
  width: 180px;
}

footer > p {
  text-align: center;
   font-size: clamp(0.6rem, 2.5vw, .8rem);
}


@media (max-width: 600px) {

section > .index-container{
  position: relative;
  padding-top: 8%;
}

.search-container {
  padding: .3%;
  position: fixed;
  bottom: 0;
  height: 50px; 
  width: 100%;
  background-color:#F8F9FA;
  z-index: 9000;
}

.search-box {
  padding: 0.1rem .3rem;
  border-radius: 18px;
  width: 100%;
  gap: 0.1rem;
}

.search-box > .button{
  gap: 0.1rem;
}

.search-form {
  flex-direction: row;
  width: 100%;
}

.hr-line{padding:0 2%}
.hr-line::before {flex:.2;}
.hr-line::after{flex:2.8;}


footer {
margin-bottom: 15%;
}
}