body{
    background-color: #5f0484;
    background-image: url(../img/bg.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: 'Montserrat', sans-serif;
    font-size: smaller;
    min-height: 100vh;
    color: white;
}

.fullscreen{
    min-height: 100vh;
}

.test{
    border: 1px solid white;
}

.standardimage{
    width: 100%;
    height: auto;
}

.iconimage{
    height: 60px;
    width: auto;
}

.xliconimage{
    height: 110px;
    width: auto;
}

a{
    text-decoration: none;
}

a:hover{
    text-decoration: none;
}

.xltext{
    font-size: xx-large;
}

.whitescreen{
    background-color: rgba(255, 255, 255, 0.596);
    color: black;

}

.rightwall{
    border-right: 3px solid rgb(45, 45, 209);
}

.bottomborder{
    border-bottom: 10px solid transparent;
    border-image: linear-gradient(to right, #DC24C5 ,#3851b779, rgba(255, 255, 0, 0));
    border-image-slice: 1;
}

.topborder{
    border-top: 10px solid transparent;
    border-image: linear-gradient(to left, #DC24C5 ,#3851b779, rgba(255, 255, 0, 0));
    border-image-slice: 1;
}

.fancyborder{
    border: 3px solid transparent;
    border-image: linear-gradient(to right, #DC24C5 ,#3851b779, rgba(255, 255, 0, 0));
    border-image-slice: 1;
    transition: 0.5s;

}

.fancyborder:hover{
    border: 3px solid transparent;
    border-image: linear-gradient(to right, #DC24C5 ,#3851b779, rgba(255, 255, 0, 0));
    border-image-slice: 1;
    background-color: rgba(255, 255, 255, 0.829);
    color: black;
    transform: scale(1.02);
    transition: 0.5s;

}

.iconsizeup{
    transform: scale(1.2);
}

.buttonstyle1{
    background-color: white;
    color: #5f0484;
    font-weight: bold;
    border-radius: 10px;
    transition: 0.5s;
    border: none;
}

.buttonstyle1:hover{
    background-color: #7b069d;
    transition: 0.5s;
    color: white;
    border: none;
}

.activebuttonstyle1{
    background-color: #7b069d;
    transition: 0.5s;
    color: white;
    border: none;
}

.clickable{
    transition: 0.5s;
}

.clickable:hover{
    transform: scale(1.1);
    transition: 0.5s;
}

.hideori{
    opacity: 0;
}

.hidetillscroll{
    opacity: 0;
}


.fadefromleft1{
    animation: 1s ease-in-out 0s 1 forwards slideInFromLeft;
}
.fadefromleft2{
    animation: 1s ease-in-out 0.2s 1 forwards slideInFromLeft;
}
.fadefromleft3{
    animation: 1s ease-in-out 0.4s 1 forwards slideInFromLeft;
}
.fadefromleft4{
    animation: 1s ease-in-out 0.6s 1 forwards slideInFromLeft;
}
.fadefromtop1{
    animation: 1s ease-in-out 0s 1 forwards slideInFromTop;
}
.fadefromtop2{
    animation: 1s ease-in-out 0.2s 1 forwards slideInFromTop;
}
.fadefromtop3{
    animation: 1s ease-in-out 0.4s 1 forwards slideInFromTop;
}
.fadefromtop4{
    animation: 1s ease-in-out 0.6s 1 forwards slideInFromTop;
}
.fadein{
    animation: 1s ease-in-out 0s 1 forwards FadeIn;
}
.fadein2{
    animation: 1s ease-in-out 0.2s 1 forwards FadeIn;
}
.fadein3{
    animation: 1s ease-in-out 0.4s 1 forwards FadeIn;
}
.fadein4{
    animation: 1s ease-in-out 0.6s 1 forwards FadeIn;
}
.fadeout{
    animation: 1s ease-in-out 0s 1 forwards FadeOut;
}

    @keyframes slideInFromLeft {
        0% {
          opacity: 0;
          transform: translateX(-100%);
        }
        100% {
        opacity: 1;
          transform: translateX(0);
        }
      }

      @keyframes slideInFromTop {
        0% {
            opacity: 0;
            transform: translateY(-100%);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes FadeIn {
        0% {
            opacity: 0;

        }
        100% {
          opacity: 1;

        }
      }
      @keyframes FadeOut {
        0% {
            opacity: 1;

        }
        100% {
          opacity: 0;

        }
      }