body{
    background: url(../fotos/background.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: 50%;
}



#header{
    display: grid;
    grid-template-columns: auto 84% 8%;
}
#titol{
    text-align: center;
    align-content: center;
    grid-column: 2;
    font-size: 30px;
    height: 120px;
    margin: 0px;
    text-shadow: 1px 1px 4px #FCFCFC;
}
h1{
    color: #FCFCFC;
    flex: auto;
}
img{
    width: 100px;
    height: 100px;
    grid-column: 3;
    float: inline-end;
    filter: drop-shadow(1px 1px 1px white);
    transition: 0.2s;
}
img:hover{
    filter: drop-shadow(1px 1px 3px white);
}



#divInfo{
    padding-bottom: 5px;
}
#infoTitol{
    color:#FCFCFC;
    font-size: 25px;
    text-align: center;
}
#infoText{
    color:#FCFCFC;
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
}



#divVariants{
    display: grid;
    grid-template-columns:auto 17% 17% 12% 17% 17% auto;
    grid-template-rows:auto 100px 125px;
    grid-gap: 10px;
    margin-top: 13px;
    padding-bottom: 20px;
    background-color: #1e232685;
    border-radius: 50px;
    margin-left: 70px;
    margin-right: 70px;
    transition: 0.3s;
}
#divVariants:hover{
    background-color: #1e2326be;
}
#titolVariants{
    color:#FCFCFC;
    grid-column: 1/8;
    grid-row: 1;
    font-size: 40px;
    margin-top: 0px;
    text-align: center;
    margin-bottom: 10px;
}
#variant1{
    background: url(../fotos/Gruz_Mother_Awake.png), url(../fotos/Gruz_Mother_Awake.png);
    background-color: #FCFCFC;
    background-size:contain, contain;
    background-repeat:no-repeat, no-repeat;
    background-position:29%, 73%;
    grid-column: 2/4;
    grid-row: 2;
    border:0px;
    border-radius: 15px;
    transition: 0.2s;
    color:#02111B;
    font-size: 30px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#variant1:hover{
    cursor: pointer;
    background-color: #e3e3e3;
}
#variant2{
    background: url(../fotos/B_Radiance.png), url(../fotos/B_Radiance.png);
    background-color: #FCFCFC;
    background-size: contain, contain;
    background-repeat: no-repeat, no-repeat;
    background-position: 23%, 77%;
    grid-column: 5/7;
    grid-row: 2;
    border: 0px;
    border-radius: 15px;
    transition: 0.2s;
    color:#02111B;
    font-size:30px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#variant2:hover{
    cursor: pointer;
    background-color: #e3e3e3;
}
#variantPersonalitzat{
    background-image: url(../fotos/knight.png), url(../fotos/knight.png);
    background-color: #FCFCFC;
    background-size: contain, contain;
    background-repeat: no-repeat, no-repeat;
    background-position: 26%, 74%;
    margin-top: 40px;
    grid-column: 3/6;
    grid-row: 3;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    transition: all 0.3s ease;
}
#titolPersonalitzat{
    font-size: 30px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    transition:opacity 0.3s ease;
}
#hiddenElements{
    opacity: 0;
    position:absolute;
    display:grid;
    grid-template-columns: 50% auto;
    grid-template-rows: auto;
    grid-gap: 50px;
    transition: opacity 0.3s ease;
}
#variantPersonalitzat:hover{
    transition-delay: 0.1s;
    background-image: none;
    background-color: #e3e3e3;
}
#variantPersonalitzat:hover #titolPersonalitzat{
    opacity: 0;
}
#variantPersonalitzat:hover #hiddenElements{
    transition-delay: 0.2s;
    opacity: 1;
}
#formPersonalitzat{
    grid-column: 1/3;
    grid-row: 1;
}
#divBotoPersonalitzat{
    align-content: center;
    text-align: center;
    grid-column: 3;
    grid-row: 1;
}
#botoPersonalitzat{
    width: 60px;
    height: 25px;
}
#botoPersonalitzat:hover{
    cursor: pointer;
}