.navbar{
    color: rgb(0, 0, 0);
    text-decoration: none;
    padding-left: 60px;
    padding-right: 60px;
    animation: onstart 200ms reverse;
    animation-iteration-count: 1;
    position: relative;
}
.nav{
    display: flex;
    text-align: center;
    border-style: groove;
    border-radius: 10pt;
    background-color: rgb(233, 233, 233);
    justify-content: space-between;
    background-image: linear-gradient(to top, rgba(112, 112, 255, 0.5), rgb(255, 255, 255));
    background-repeat: no-repeat;
}
.navbar:hover{
    animation: onhover 400ms forwards;
    animation-iteration-count: 1;
    position: relative;
}
html{
    zoom: 200%;
}
.box{
    flex: 1;
    display: flex;
    border-style: groove;
    border-radius: 10pt;
    background-color: rgb(233, 233, 233);
    justify-content: space-between;
    background-image: linear-gradient(to top, rgba(112, 112, 255, 0.5), rgb(255, 255, 255));
    background-repeat: no-repeat;
    margin: 20px;
    padding: 10px;
    animation: onstartbox 200ms forwards;
    animation-iteration-count: 1;
    position: relative;
}
.scripbox{
    display: flex;
}
.box:hover{
    animation: onhoverbox 400ms forwards;
    animation-iteration-count: 1;
    position: relative;
}

@keyframes onstart {
    0%      {font-size: medium;}
    100%    {font-size: xx-large;}
}
@keyframes onhover {
    0%      {font-size: medium;}
    100%    {font-size: xx-large;}
}
@keyframes onstartbox {
    0%      {top: 100px;}
    100%    {top: 0px;}
}
@keyframes onhoverbox {
    0%      {top: 0px; background-image: linear-gradient(to top, rgba(112, 112, 255, 0.5), rgb(255, 255, 255));}
    75%     {top: 115px; background-image: linear-gradient(to top, rgba(130, 130, 255, 0.5), rgb(255, 255, 255));}
    100%    {top: 100px; background-image: linear-gradient(to top, rgba(168, 168, 255, 0.5), rgb(255, 255, 255));}
}