*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

html{
    scroll-behavior: smooth;
}

nav{
    background-color:rgb(26, 26, 26) ;
    text-align: center;
    padding: 15px;
    justify-content: end;
    grid-template-columns: 1fr 1fr;
    gap: 2.074rem;
    display: grid;
}

nav a::after{
    content: "";
    position:absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    left: 0;
    background: rgb(29, 97, 199);
    transition: width 0.3s ease-in-out;
}

nav a:hover::after{
    width: 100%;
}

nav a{
    text-decoration: none;
    color: white;
    position: relative;
    display: inline-block;
}

nav a:hover{
    background-color:rgb(26, 26, 26);
    display: block; 
    
}

header{
    color: white;
    text-align: center;
    font-size: 50px;
}



body{
    background-color: rgb(26, 26, 26);


}

h1, h2 {
    text-align:center;
    color: white;
    align-items: baseline;
    animation: fadeInUp 0.9s  ease-out forwards;
}

h1{
    padding-top: 50px;
}

h2{
padding: 12px;
font-size: 15px;
}

.whitekey {
            width: 100px;
            height: 350px;
            background: rgb(255, 255, 255);
            box-sizing: border-box;
            border-radius: 10px;
            z-index: 1;
            text-align: center;
            box-shadow: 8px 8px 5px rgba(112, 110, 100, 0.65);
            outline: 1px solid black; 
}

.whitekey:active{
    background: lightgray;
    transform: scale(0.98) translateY(-4px);
    transition: transform 0.2s ease-in-out ;    
}

.blackkey {
            width: 50px;
            height: 225px;
            background: rgb(0, 0, 0);
            box-sizing: border-box;
            border-radius: 10px;
            color: white;
            text-align: center;
            box-shadow: 8px 0px 5px rgba(112, 110, 100, 0.65);
            z-index: 2;
}


.blackkey:active{
    background: gray;
    transform: scale(0.98) translateY(-4px);
    transition: transform 0.2s ease-in-out ;    
}


.keyboard1{
    display: grid;
    grid-template-columns:repeat(8, 6.254rem);
}

.keyboard2{
    display: grid;
    grid-template-columns:repeat(2, 6.254rem);
    padding: 0px 0px 0px 75px;
}

.keyboard3{
    display: grid;
    grid-template-columns:repeat(3, 6.254rem);
    padding: 0px 0px 0px 375px;
}

.keyboard1, .keyboard2, .keyboard3{
    position: absolute;
    margin: 25vh 27vw;
    
}

footer{
    background-color:rgb(26, 26, 26) ;
    text-align: center;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    bottom: 0;
    width: 100%;
    justify-content: end;
    gap: 2.074rem;
    color: white;
} 

footer a{
    text-decoration: none;
    color: white;
    position: relative;
    display: inline-block;
}

footer a:hover{
    background-color: rgb(29, 97, 199)   ;
    display: block; 
}


footer a::after{
    content: "";
    position:absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    left: 0;
    background:blue;
    transition: width 0.3s ease-in-out;
}

      @keyframes fadeInUp {
        0%{
            opacity: 0;
            transform: translateY(6.283rem);
        }

        100%{
            opacity: 1;
            transform: translateY(0);
        }
      }