body{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    background-color: #00008B;
    margin:0px
}
nav a{
    text-decoration:none;
    color:turquoise;
    text-align:center;
    font-size:large;
    margin-bottom:8px
}
#bg1{
    grid-column:2/3;
    grid-row:2/4;
    text-align:center;
    background-image: linear-gradient(#00008B , #613092c7);
    margin:0px;
    color:white;
    border-top:2px solid  #b5a642;
    border-left:1px solid  #b5a642;
    border-right:2px solid  #b5a642;

}
#bg2{
    grid-column:1/2;
    grid-row:2/4;
    color:purple;
    text-align:center;
    background-image:linear-gradient(#00008B, #FFD900C7);
    margin:0px;
    border-top:2px solid #b5a642;
    border-left:2px solid  #b5a642;
    border-right:1px solid  #b5a642;
    border-top-left-radius: 30px;

}
#bg3{
    grid-column:3/4;
    grid-row:2/4;
    text-align:center;
    color:teal;
    margin:0px;
    background-image:linear-gradient(#00008B, #d53600);
    border-top:2px solid #b5a642;
    border-left:1px solid  #b5a642;
    border-right:1px solid  #b5a642;

    border-top-right-radius: 30px;
}
#cover1{
    grid-column:1/2;
    grid-row:3/4;
    margin-left:auto;
    margin-right:auto
}
#cover2{
    grid-column:2/3;
    grid-row:3/4;
    margin-left:auto;
    margin-right:auto
}
#cover3{
    grid-column:3/4;
    grid-row:3/4;
    margin-left:auto;
    margin-right:auto
}
.spindisc:hover{
    animation: 2s workpls linear 0s infinite;
  border-radius: 900px;
}
@keyframes workpls{
    0%{

    }
    100%{
       transform:rotate(360deg)
    }
}
h1{
    text-align:center;
    margin:0px;
    color:white;
    grid-column:1/4;
    grid-row:1/2;
    background-image:radial-gradient( #613092c7,#00008B, #FFD900C7, #d53600, #00008B )

}
nav{
    grid-column:1/4;
    grid-row:1/2;
    display:flex;
    flex-direction:column;
    margin-top:52px

}
nav a:hover{
    background-color:white;
    color:blue
}
#p1{
    background-image:linear-gradient(#FFD900C7,#00008B);
    text-align:center;
    color:white;
    margin:0px;
    padding-top:15px;
    border-left:2px solid  #b5a642;
   border-right:1px solid  #b5a642;
   border-bottom: 2px solid  #b5a642;
   
}
#p2{
    text-align:center;
    color: #FF6347;
    margin:0px;
    border-left:1px solid  #b5a642;
    border-bottom: 2px solid  #b5a642;
    border-right:1px solid  #b5a642;
    padding-top:15px;
    background-image:linear-gradient( #613092c7, #00008B )

}
#p3{
    border-left:1px solid  #b5a642;
    border-bottom: 2px solid  #b5a642;
    border-right:2px solid  #b5a642;
    margin:0px;
    text-align:center;
    padding-top:15px;
    background-image:linear-gradient( #d53600,  #00008B);
    color:#89CFF0;
}
@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
    }
    #bg2{
        grid-column:1/3;
        grid-row:2/4;
        border:none
    }
    #cover1{
        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
    }
    #bg1{
        grid-column:1/3;
        grid-row:4/6;
        border:none

    }
    #cover2{
        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
    
    }

#bg3{
grid-column:1/3;
grid-row:6/8;
border:none

}
#cover3{
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
    }
    #bg1{
        grid-column:1/2;
        grid-row:3/4;
        border-top:3px solid white
    }
    #cover1{
        grid-column:1/2;
        grid-row:3/4;
        margin-bottom:0px
        
    }
    #p1{
        grid-column:1/2;
        grid-row:4/5;
        border:3px solid white;
       margin:0px;
      padding-top:50px;
      
      
    }
    #bg2{
        grid-column:1/2;
        grid-row:5/6;

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

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

#bg3{
grid-column:1/2;
grid-row:7/8;

}
#cover3{
grid-column:1/2;
grid-row:7/8;

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

}
}