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;
        flex-direction: column;
        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;
max-width: 70%;
height: auto;
display: flex;
}
        
        

        
         .buttons {
        display: flex;
        gap:5em;
        position: fixed;
        bottom: 70px;
        left: 20px;
            
            
        }
        
        .buttons img {
        position: fixed;
        width: 50px;
                    
        }
        
        .mayhem_sprite {
            position: fixed;
            right: 0px;
            margin-top:150px;
            bottom:-10px;
        }
    
        
        .mayhem_sprite img {
            
            width: 100%;
        object-fit:contain;
        
        }
        
        
        .text {
            
        font-size:30px;
        font-family: 'Freckle Face';
        
            
        }
        
        ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
            
        
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #2a4cff;
    box-shadow: inset 0 0 6px rgba(19, 34, 117);
}    
        
        
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px #00a0ff;
    border-radius: 10px;
}