html{
        background-attachment: fixed;
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;
        background-image:url(img/artbg.png) }
    
        .logo {
        position: absolute;
        top:10px;
        
        animation: gelatine 2s infinite;
        }

        #factDisplay {
        font-size:15px;
        font-family: 'Freckle Face';
        color:black;
        }

        .home:hover{
            
          animation: gelatine .5s;
        }

        
        
        .about:hover{
            
            animation: gelatine .5s;
        }

        
    
        .art:hover{
            
            animation: gelatine .5s;
        }

    
        .network:hover{
            
            animation: gelatine .5s;
        }

        
        .ask:hover{
            
            animation: gelatine .5s;
        }

        
        .mail:hover{
            
            animation: gelatine .5s;
        }

    



@keyframes gelatine {

            from,
            to {
                transform: scale(1, 1);
            }

            25% {
                transform: scale(.9, 1.1);
            }

            50% {
                transform: scale(1.1, .9);
            }

            75% {
                transform: scale(.95, 1.05);
            }
        }
        
        @keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-10px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}




        
        .menubar {
            display: flex;
            justify-content:center;
            flex-direction: row;
            flex-shrink:100%;
            z-index: -1;
        }
        
        .menubar img {
            width: 100%;
            object-fit:contain;
            
        }

        
        .container1 {
            display: flex;
            align-items:center;
            justify-content: center;
            position: relative;
            top:-110px;
            gap:2em;
        }
        
        .container1 img {
            width: 130%;
            object-fit:contain;
            
        
        }
        
        
        .container2 {
            display: flex;
            position: relative;
            width:100%;
            
        }
    
        
       
        
        
        .artrow {
        padding:40px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;  
        position: absolute;
        top:40px;
        gap:0.5em;
        left: 1%;
        right:1%;
       border-radius:200px;
       background-color: rgba(255, 255, 255, 0.8);
       max-width: 2000px;  
       font-size:15px;
        }
        
        
        .artrow img {
        
        border-radius: 20px;
        }
        
        
        
        
        .buttons {
        display: flex;
        gap:5em;
        position: fixed;
        bottom: 70px;
        left: 20px;
            
            
        }
        
        .buttons img {
        position: fixed;
        width: 50px;
                    
        }
        
        
        .mayhem_sprite {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            right: -0px;
            bottom:-10px;
            
        }
    
        
        .mayhem_sprite img {
            width: 100%;
        object-fit:contain;
        
        }
        
        
        .date {
            
        font-size:50px;
        font-family: 'Freckle Face';
        color:54D6FF;
        position: absolute;
        margin-top: -3%;
        margin-left: 40%;
            
        }