/*
the color palette!!!!!!!
--vista-blue: #9ba2ffff;
--rose-quartz: #a499beff;
--light-green: #b2ffa9ff;
--licorice: #191516ff;
--space-cadet: #2a2e45ff;
*/

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*DIRECT STYLING*/
body {
    font-family: "IBM Plex Mono", monospace;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*HOMEPAGE STYLING*/
#index{
    background: url(indexbg.jpeg);
    background-repeat: repeat;
    background-size: auto, auto;

}

#divtotale {
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 20px;
}

#divtotale img {
    max-width: 60%; 
    height: auto;
}
/*columns styling*/
.columnsContainer {
    text-align: center;
    margin: auto;
    padding-top: 30px;
    padding-left: 70px;
    padding-right: 70px;
    width:auto;
    height:auto;
}

* {
    box-sizing: border-box;
}

.column {
    float: left;
    padding: 10px;
    /*height: 300px;*/ 
    /*background-color: aqua;*/
    margin: 10px;
  }
  
.left, .right {
    width: 20%;
}

.middle {
    width: 55%;
    /*background-color: rgba(155, 162, 255, 0.9); */ 
    font-size: small;
}

.right{
    border-radius: 40px;
    color: #a499beff;
    height:auto;
    padding: 20px;
    background: rgb(168,240,159);
    background: linear-gradient(6deg, rgba(168,240,159,0.8) 0%, rgba(10,10,10,0.8) 0%, rgba(178,255,169,0.8) 100%);
}
.row:after {
    content: "";
    display: table;
    clear: both;
}  


#linksImage{
    width:100%; 
    height:auto;
    margin-top: 0;
    margin-bottom: 20px;
    padding:0;
}

#bigContainer{
    width:100%; 
    height: auto;
    padding: 20px;
    background-color: rgba(155, 162, 255, 0.9);
    border-radius: 40px;
    color: #191516ff;
    text-align: justify;
}

#pfp {
    border-radius: 50%;
    width: 100%; /* Set the maximum width to 100% */
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px; 
}

#smallContainerRight{
    width: 100%;
    height:auto;
    padding:20px;
    align-content: center;
}

#smallContainer{
    background-color: rgba(25, 21, 22, 0.9);
    border-radius: 40px;
    color: #a499beff;
}

#bigContainer.first {
    background-color: #b2ffa9;
opacity: 0.8;
background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #b2ffa9 11px ), repeating-linear-gradient( #19151655, #191516 );
}

#bigContainer.second{
    background-color: #b2ffa9;
opacity: 0.8;
background-image: radial-gradient(circle at center center, #191516, #b2ffa9), repeating-radial-gradient(circle at center center, #191516, #191516, 11px, transparent 22px, transparent 11px);
background-blend-mode: multiply;
}

#bigContainer.third{
    background-color: #b2ffa9;
opacity: 0.8;
background-image:  linear-gradient(30deg, #191516 12%, transparent 12.5%, transparent 87%, #191516 87.5%, #191516), linear-gradient(150deg, #191516 12%, transparent 12.5%, transparent 87%, #191516 87.5%, #191516), linear-gradient(30deg, #191516 12%, transparent 12.5%, transparent 87%, #191516 87.5%, #191516), linear-gradient(150deg, #191516 12%, transparent 12.5%, transparent 87%, #191516 87.5%, #191516), linear-gradient(60deg, #19151677 25%, transparent 25.5%, transparent 75%, #19151677 75%, #19151677), linear-gradient(60deg, #19151677 25%, transparent 25.5%, transparent 75%, #19151677 75%, #19151677);
background-size: 22px 39px;
background-position: 0 0, 0 0, 11px 19px, 11px 19px, 0 0, 11px 19px;
}

.innerBig{
 background-color: rgba(155, 162, 255, 0.9);
 border-radius: 0.30px;
 padding: 10px;
 border-style: ridge;
 border-width: 2px;
 border-color: #191516ff;
 visibility: hidden;
}

#smallContainer.first {
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(178, 255, 169, 0.9) 100%);
}

.innerSmall{
    background-color: rgb(25, 21, 22, 0.9);
    width: 100%; 
    height: auto;
    border-radius: 40px;
    padding: 10px;
    visibility: hidden;
    text-align: center;
}

#smallContainer.second{
    margin-top: 20px;
    background: rgb(178,255,169);
background: radial-gradient(circle, rgba(178,255,169,0.9) 0%, rgba(0,0,0,0.2) 37%);

}

#smallContainer.third{
        --s: 140px; /* control the size*/
        --c1: #b2ffa9;
        --c2: #001915;
        --c3: #000002;
        --c4: #9ba2ff;
        
        --_g: 
          #0000 25%,#0008 47%,var(--c1)  53% 147%,var(--c2) 153% 247%,
          var(--c1) 253% 347%,var(--c2) 353% 447%,var(--c1) 453% 547%,#0008 553%,#0000 575%;
        --_s: calc(25%/3) calc(25%/4) at 50%; 
        background:
          radial-gradient(var(--_s) 100%,var(--_g)),
          radial-gradient(var(--_s) 100%,var(--_g)) calc(var(--s)/2) calc(3*var(--s)/4),
          radial-gradient(var(--_s) 0   ,var(--_g)) calc(var(--s)/2) 0,
          radial-gradient(var(--_s) 0   ,var(--_g)) 0                calc(3*var(--s)/4),
          repeating-linear-gradient(90deg,var(--c3) calc(25%/-6) calc(25%/6),var(--c4) 0 calc(25%/2));
        background-size: var(--s) calc(3*var(--s)/2);
        margin-top:20px;
}

#logIcon{
    width: 67%;
    height: auto;
}