body, html {
    height: 100%;
    width: 100%;    
    padding: 0px;
    margin: 0px;
    overflow: hidden;

}

body {
    background-color: rgb(0, 0, 0);
    color: rgba(57, 204, 143, 0.37);
    font-size: 3vw;
    cursor:default;
}

.credits {
    display: grid;
    margin:0px;
    grid-template: auto auto auto/ auto auto auto;
    row-gap: 10px;
    min-height: max-content;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
}

#intro {
    /*background-color: blueviolet;*/
    grid-row: 1/2;
    grid-column: 1/4;
    align-self: center;
    justify-self: center;
    margin-top: 0%;
    min-height: auto;

    /*
    background-image: url("./modelling/pictures/FCBE34EC-2E13-4B6B-A003-AE03F755ABE0.JPG");
    width: 50vw;
    background-position: cover;
    margin: 5px;*/
    font-family: "Lancelot", serif;
  font-weight: 400;
  font-style: normal;

    animation: miniani 12s ease-out 0s infinite alternate;

}



#starterPic {
    width: 100%;
    height: 20vh;
    max-height: 50vh;
    left: 0px;
    background-color: aliceblue;
    z-index: -1;



}

#intro:hover {
    color: #000;
    animation: none;
}



#Projects {
    grid-row: 2/3;
    grid-column: 1/4;
    font-size: 2.5rem;
    margin-left: 2vw;
    align-self: center;

    font-family: "Ballet", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    
}

#Projects a {
    word-break: keep-all;

}


.bottomBar {
    /*background-color: cadetblue;*/
    background-color: #00000000;
    display: none;  /*  grid ///  none  ;*/
    grid-row: 3/4;
    grid-column: 1/4;
    padding: 0px;
    margin: 0px;
    height: auto-fill;
    width: 100%;
    bottom: 0;
    align-items: center;
    justify-items: center;
    grid-template: 1fr / auto auto;
    font-size: 2.3rem;
    font-family: "Ballet", cursive;
    /*"Lancelot", serif;*/
  font-weight: 400;
  font-style: normal;
}

.bl:hover {
    color:#dfdbfd;
}

#bio {
    grid-column: 1/2;
    align-self: center;
}

#contact:hover {
    grid-column: 2/3;
}

a {
    color: #fff;
    text-decoration: none;
    cursor:crosshair;
}

a:hover { 
    text-shadow: 0 3px 2px #747474; 
    text-decoration: underline;
}



@keyframes miniani {
    0%{
        filter: blur(0px);
        background-color: #000;
    }
    15%{
        filter: blur(3px);        
    }
    17%{background-color: #04082b69;}
    20%{background-color: #eefab156;}
    25%{
        filter: blur(21px);
        color: #000;
    }
    30%{background-color: rgba(160, 133, 196, 0.411);}
    32%{background-color: #69eb7467;}
    37%{background-color: rgba(205, 92, 92, 0.185);}
    45% {
        outline: 3px dotted rgb(255, 255, 255);
        color: aqua;
    }

    50%{
        text-shadow: 9px 0px 17px #eefab1, -21px 0px #fdf0d8, 0px 21px #d4fbfd, 0px -35px 6px #dfdbfd;
        background-color: #181818;
        color: rgb(78, 224, 107);
        padding-right: 100%;
        padding-left: 100%;
    }
    55% {
        color: #eb55ca;
    }
    60% {
        color: #f8e944;
    }
    75% {
        outline: 3px solid #f7dfce;
        filter: blur(0px);
    }
    80%{filter: blur(1px);}
    85%{
        border-color: chartreuse;
        filter: blur(4px);
    }
    87%{
        border-color: #bdf5e2;
        filter: blur(5px);
    }
    89%{
        border-color: #7c95ad;
        filter: blur(2px);
    }
    90% {
        
        background-color: #000;
    }
    100% {
        text-shadow: 0px 0px 0px #000;
        filter: blur(0px);
        color: aliceblue;
        outline: 0px solid rgb(0, 0, 0);

    }
}