body{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    background-color:#b62020
    ;
    margin:0px
}

h1{
   grid-column:1/4;
   grid-row:1/2;
   text-align:center;
   flex-direction:row;
   background-image:radial-gradient(#008080, #b62020,#29274C, white, #b62020);
   margin:0px
}
nav{
    grid-column:1/4;
    grid-row:1/2;
    display:flex;
    flex-direction: column;
    margin-top:60px;
}
nav a{
    text-decoration:none;
    text-align:center;
    font-size:large;
    color:white;
    margin:5px
}
nav a:hover{
    color:blue;
    background-color:white;
    animation: 3s getbigger linear 0s infite;
}

#album1{
    height:200px;
    width:200px;
    grid-column:1/2;
    grid-row:3/4;
    margin-left:auto;
    margin-right:auto
}
#album2{
    grid-column:2/3;
    grid-row:3/4;
    margin-left:auto;
    margin-right:auto
}
.spinningdisc:hover{
    animation:2s player linear 0s infinite;
    border-radius:200px;
    

}
@keyframes player{
    0%{

    }

    
    100%{
        transform:rotate(360deg)
    }
}
.Numba1{
    color:white;
    grid-column:1/2;
    grid-row:2/4;
    text-align:center;
    margin:0px;
    background-image:linear-gradient(#b62020, #008080 70% );
    border-top:2px solid black;
    border-left:2px solid black;;
    border-right:1px solid black;

}
.Numba2{
    color:#FFB6C1;
    margin:0px;
    text-align:center;
    grid-column:2/3;
    grid-row:2/4;
    background-image:linear-gradient(#b62020, white 70%);
    border-top:2px solid black;
    border-left:1px solid black;;
    border-right:1px solid black;
}
#album3{
    grid-column:3/4;
    grid-row:3/4;
    margin-left:auto;
    margin-right:auto;
    
}
.Numba3{
    text-align:center;
    color:white;
    margin:0px;
    background-image: linear-gradient( #b62020, #29274C 70%) ;
    grid-column:3/4;
    grid-row:2/4;
    border-top:2px solid black;
    border-left:1px solid black;;
    border-right:2px solid black;
}
.p1{
    text-align:center;
    background-image:linear-gradient(#008080, #b62020);
    margin:0px;
    padding-top:15px;
    color:pink;
    border-bottom: 2px solid black;
    border-left:2px solid black;;
    border-right:1px solid black;

}
    .p2{
        text-align:center;
        background-image:linear-gradient(white,  #b62020);
        margin:0px;
        padding-top:15px;
        color:black;
        border-bottom: 2px solid black;
        border-left:1px solid black;;
        border-right:1px solid black;

    }
    .p3{
        text-align:center;
        background-image:linear-gradient( #29274C,  #b62020);
        margin:0px;
        color:white;
        border-bottom: 2px solid black;
        border-left:1px solid black;;
        border-right:2px solid black;
    }
    @media (max-width:982px){
        body{
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(7, 1fr);
        }
        h1{
            grid-column:1/2;
            grid-row:1/2;
    
        }
        nav{
            grid-column:2/3;
            grid-row:1/2;
            margin:0px
        }
        .Numba1{
            grid-column:1/3;
            grid-row:2/4
        }
        #album1{
            grid-column:1/2;
            grid-row:2/4;
            margin-top:auto;
            margin-bottom:auto
        }
        .p1{
            grid-column:2/3;
            grid-row:2/4;
            padding:0px;
            border:none;
            background-image:none;
            margin-bottom:auto;
            margin-top:auto;
            font-size:small
        }
        .Numba2{
            grid-column:1/3;
            grid-row:4/6;

        }
        #album2{
            grid-column:1/2;
            grid-row:4/6;
            margin-top:auto;
            margin-bottom:auto
        }
        .p2{
            grid-column:2/3;
            grid-row:4/6;
            background-image:none;
            margin-top:auto;
            margin-bottom:auto;
            border:none;
            padding:0px;
            font-size:small
        
        }

.Numba3{
    grid-column:1/3;
    grid-row:6/8;

}
#album3{
    grid-column:1/2;
    grid-row:6/8;
    margin-top:auto;
    margin-bottom:auto
}
.p3{
    grid-column:2/3;
    grid-row:6/8;
    margin-top:auto;
    margin-bottom:auto;
    background-image: none;
    border:none;
    font-size:small
}
    }
    @media(max-width:700px){
        body{
            grid-template-columns: 1fr;
            grid-template-rows: repeat(8, 1fr);
        }
        h1{
            grid-column:1/2;
            grid-row:1/2;
    
        }
        nav{
            grid-column:1/2;
            grid-row:2/3;
            margin-bottom:auto;
            margin-top:auto

        }
        nav a{
            font-size:x-large;
         margin:20px
        }
        .Numba1{
            grid-column:1/2;
            grid-row:3/4
        }
        #album1{
            grid-column:1/2;
            grid-row:3/4;
            margin-bottom:0px
            
        }
        .p1{
            grid-column:1/2;
            grid-row:4/5;
            border:3px solid black;
           margin:0px;
          padding-top:50px;
          
          
        }
        .Numba2{
            grid-column:1/2;
            grid-row:5/6;

        }
        #album2{
            grid-column:1/2;
            grid-row:5/6;
            margin-bottom:0px

        }
        .p2{
            grid-column:1/2;
            grid-row:6/7;
            border:3px solid black;
           margin:0px;
          padding-top:50px;
          font-size:medium
        
        }

.Numba3{
    grid-column:1/2;
    grid-row:7/8;

}
#album3{
    grid-column:1/2;
    grid-row:7/8;
   
}
.p3{
    grid-column:1/2;
    grid-row:8/9;
    border:3px solid black;
           margin:0px;
          font-size:medium;
          padding-top:50px

}
    }