Body{
 background-image: url('/img/back.png');
 background-color: var(--mainbackground-color);
 color: var(--maintext-color);
 font-size: var(--mainfont-size);
}
.maingrid div{
 Display:grid;
 grid-template-columns: auto auto;
}
.maingrid h1{
 font-size: var(--headerfont-size);
 color: var(--headertext-color);
 text-align:center;
}

.maingrid h2{
 color: var(--secondtext-color);
}


.maingrid div{
 Display:grid;
 grid-template-columns: auto auto;
}


.maingrid div a{
Display:grid;
grid-template-columns: auto;
}


a{text-decoration: none;}
a:hover {color: var(--title-color);}
a:visited {color: var(--title-color)}
a:link {color: var(--title-color);}


.icon {
 width: 450px;
 height: 450px;
 background-size: 100% 100%;
 border-radius: 40px;
 transition: all 0.1s linear;
 transition: right 0.1s linear;
 transition: left 0.1s linear;
 transition: width 0.1s linear;
}


.icon:hover {
   filter: brightness(0.4);
}


.title {
 width: 450px;
 font-size: var(--mainfont-size);
 text-align:center;
}


p{
 font-size: var(--mainfont-size);
 color: var(--maintext-color);
}


button {
         position:absolute;
         background-color: var(--mainbox-color);
         width:300px;
         font-size: var(--mainfont-size);
         border-radius: 5px;
         padding: 8px 9px;
}