@font-face {
    font-family: A;
    src: url(Fonts/SansStdVF.ttf);
}
@font-face {
    font-family: B;
    src: url(Fonts/SansExpVF.ttf);
}
@font-face {
    font-family: C;
    src: url(Fonts/clarissans.ttf);
}
@font-face {
    font-family: D;
    src: url(Fonts/Mairy\ Regular.otf);
}
@font-face {
    font-family: E;
    src: url();
}
.colorcode{
  color:#8F00FF #FBFFFF #0E0E10 ;
}
*{
    box-sizing: border-box;
}
body{
background-image: linear-gradient( 90deg,  rgba(218,255,234,1) 5.3%, rgba(232,255,231,1) 11.6%, rgba(240,255,233,1) 17.4%, rgba(243,255,226,1) 22.9%, rgba(253,255,228,1) 28.5%, rgba(255,248,225,1) 33.9%, rgba(255,241,229,1) 39.4%, rgba(255,228,222,1) 44.8%, rgba(255,231,231,1) 50.3%, rgba(255,231,243,1) 56.9%, rgba(255,229,255,1) 63.2%, rgba(245,228,255,1) 69.1%, rgba(236,228,255,1) 74.7%, rgba(231,238,255,1) 80.4%, rgba(229,249,255,1) 85.8%, rgba(231,255,250,1) 90.6%, rgba(229,255,243,1) 94.4%, rgba(220,255,228,1) 98.3% );}
.temp{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 70%;
    height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;

    img{
        position: absolute;
        width: 350px;
    }
    h3{
        position: absolute;
        bottom: 15%;
        width: 300px;
        font-family: C;
        letter-spacing: 2px;
        color:#FBFFFF;
        background-color:#8F00FF;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 10px;
        border-radius: 10px;
    }
}
/* Desktop styles */
@media screen and (min-width: 768px){
    .index-header{
        width: 550PX;
        height: 100%;
    }
}   
/* Mobile styles */
@media screen and (max-width: 767px) {
    .index-header{
        width: 400PX;
        height: 100%;    
    }
}
.index-header{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;

    IMG{
        width: 70%;
        position: absolute;
        margin-top: -250PX;
    }
    /*.homelink{
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        text-align: center;
        text-decoration: none;
        justify-content: center;
        flex-direction: row;
        padding: 15px;
        background-color: #8F00FF;
        color: #FBFFFF;
        width: 70%;
        border-radius: 10PX;
        font-family: B;
        margin-top: 100PX;
    }*/
    /* From Uiverse.io by barisdogansutcu */ 
    .homelink{
    padding: 17px 40px;
    border-radius: 50px;
    cursor: pointer;
    border: 0;
    background-color: white;
    box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 15px;
    transition: all 0.5s ease;
    position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        text-align: center;
        text-decoration: none;
        justify-content: center;
        flex-direction: row;
        padding: 15px;
        color:#8F00FF;
        width: 70%;
        border-radius: 10PX;
        font-family: B;
        margin-top: 200PX;
    }

    .homelink:hover {
    letter-spacing: 3px;
    background-color: hsl(261deg 80% 48%);
    color: hsl(0, 0%, 100%);
    box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
    }

    .homelink:active {
    letter-spacing: 3px;
    background-color: hsl(261deg 80% 48%);
    color: hsl(0, 0%, 100%);
    box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
    transform: translateY(10px);
    transition: 100ms;
    }

        legend{
            font-family: b;
            margin-top: 350PX;
            margin-left: 80px;
            margin-right: 80px;
            display: flex;
            justify-content: center;
        }
}