.logo {
        position: absolute;
        top:10px;
        
        animation: gelatine 2s infinite;
        }

        #factDisplay {
        font-size:15px;
        font-family: 'Freckle face';
        color:white;
        }

        .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;
        }

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




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

        
        
        .box3:hover{
            
           animation: gelatine .5s;
        }
.box4: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);
	}
}
        
       .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;
        flex-wrap: wrap;
        justify-content: center;
        align-items: top;
        position: relative;
        top:-30px;
        gap: 50px;
        max-width:80%;
        border-radius: 100px;
        border-style:solid;
        border-color:#0141FF;
        border-width:10px;
        background: linear-gradient(180deg, #9DC7FF, #0141FF);
        font-family: 'Freckle Face';
        font-size: 25;
        text-align: center;
        color:white;
        animation: float 5s infinite ;
        }
    
        .box1 {
    position: relative;
    left:-100px;
    
    height: 500px;
    width: 400px;
        }
        
    

        
      .container3 {
            
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            position: relative;
            top:-60;
            left:-5px;
            gap: 50px;
            width:100%;
            border-radius: 200px;
          border-width:5px;
        border-style:solid;
        border-color:#0141FF;
        background: linear-gradient(180deg, #9DC7FF, #0141FF);
        animation: float 4.5s infinite ;
        }  
        
        
        .box3 {
    position: relative;
    top:8px;
    border-radius:30px;
    border-width: 5px;
    border-style:solid;
    border-color:#0141FF;
    background-image: url(img/Illustration.png);
    background-size: cover;
    height: 80px;
    width: 250px;
    
    
        }
    
    
    .box4 {
    border-radius:30px;
    border-width: 5px;
    border-style:solid;
    border-color:#0141FF;
    background-image: url(img/sallydressupthumb.png);
    background-size:cover;
    background-repeat: no-repeat;
    height: 80px;
    width: 250px;
        }
       
        .myBox {
    transform: rotate(-7deg);
    padding-left: 30px;
    position: relative;
    top:240px;
    left:60px;
    font-family: "Freckle Face";
    font-size: 20px;
    width: 230px;
    height: 180px;
    overflow: auto;
        }
     
        #pc {
            
           
            position: absolute;

            
        }
        

.container4 {
            
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-end;
        align-items:flex-end;
        position: relative;
    
        }


.box5 {
    
    position: absolute;
    
        }

.myBox2 {
    
    font-family: 'Slackey';
    font-size: 20px;
    width: 430px;
    height: 180px;
    position: relative;
    overflow:hidden;
        }

.container5 {
    
    z-index: -1;
    display: flex;
   justify-content:flex-end;
    align-items:flex-end;
    position: absolute; 
    right:500px;
    top:-15px;
    
    
    
}

.container6 {
    
    z-index: -1;
    display: flex;
   justify-content:flex-end;
    align-items:flex-end;
    position: absolute; 
    right:150px;
    top:-150px;
    
    
}

.buttons {
   display:flex;
    flex-direction: row; 
    
}
.box6 {
   font-family: 'Freckle Face';
   display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:-40;
    left:-5px;
    gap: 50px;
    width:50%;
    border-radius: 200px;
    border-width:5px;
    border-style:solid;
    border-color:#0141FF;
    background: linear-gradient(180deg, #9DC7FF, #0141FF);
    animation: float 4.0s infinite ;
    
    
}


.box7 {
     font-family: 'Freckle Face';
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:-40;
    left:-5px;
    gap: 50px;
    width:50%;
    border-radius: 200px;
    border-width:5px;
    border-style:solid;
    border-color:#0141FF;
    background: linear-gradient(180deg, #9DC7FF, #0141FF);
    animation: float 4.5s infinite ;
    
    
    
}

  ::-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;
}