*{box-sizing: border-box;padding: 0;margin: 0;}
:root{--color: #6b7c4e;}
.pr{display: grid;justify-content: center;height: 700px;width: auto;font-size: 30px;;grid-template-columns: repeat(4,1fr);
    grid-template-areas: "header header header header header"
    "nav main main main aside"
    "footer footer footer footer footer";}
.header{grid-area: header;background-color: rgba(245, 245, 245, 0.918);height: 280px;}
.list{background-color: rgba(0,0,0,.55);border-radius: 10px 10px;position: fixed;width: 100%;top: 1%;z-index: 1;}
.header h1{top: 35%;text-shadow: 10px 10px 10px grey;position: relative;text-align: center;font-weight: bold;font-size: 80px;background-color:whitesmoke;}
.header h2 span,.foot .col1 h2 span{color: rgb(167, 228, 24);}
.header h2,.foot .col1 h2{color: aliceblue;letter-spacing: 2px;font-size: 33px;font-family: 'Bebas Neue', sans-serif;;}
.header button{padding: 20px;margin: 9px;font-weight: bold;letter-spacing: 2px;background-color: rgb(197, 255, 8);border-radius: 3px 3px 3px 3px;border: 2px solid black;font-family:'DM Sans', sans-serif;text-transform: uppercase;}
.header button:hover{color: aliceblue;background-color: rgb(130, 196, 31);box-shadow: black 10px 10px 10px ;text-decoration: underline;}
.list ul{display: flex;flex-wrap: wrap;justify-content: space-around;flex-direction: row;align-items: baseline;}
.list li{list-style-type: none;}
.list ul a{text-decoration: none;color: whitesmoke;font-size: 23px;}
.list ul a:hover{color: greenyellow;;text-decoration: underline;;}
/* @media (min-width:800px) {.main .content{
display: flex;flex-direction: column;height: auto;flex-wrap: wrap;
}
    
} */
 @media (max-width:768px) {.pr .main .sec{
    display: flex;flex-direction: column;
 } 
 }



  @media (max-width:768px) {.pr .main .sec .image img{
    width: 150px;height: 150px;
 } 
 }

  @media (max-width:768px) {.pr .main .sec .btn{
    display: flex;flex-direction: column;
 } 
 }
 @media (max-width: 768px) {
    .pr .main .content{
        /* grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "nav"
            "main"
            "aside"
            "footer"; */width: auto;
            overflow: auto;
            display: flex;flex-direction: column;
        height: auto;
    }
 }

 @media (max-width: 768px) {
    .pr .foot{
            display: flex;flex-direction: column;
    }
 }
 
  @media (max-width: 768px) {
    .pr .header .list ul{
            display: flex;flex-direction: column;padding: 10px;
    }
 } 
  @media (max-width: 202px) {
    .pr .header .list ul{
            display: flex;flex-direction: column;padding: 40px;height: 334px;
    }
 } 

   @media (max-width: 202px) {
    .pr .aside{
    right: -130%;
    position: relative;
    width: 85%;
    font-size: 1px; 
    padding: 1px; 
    }
 } 
   @media (max-width: 202px) {
    .pr .aside .sidebar button{
    padding: 2px;
    position: relative;
    left: -25%;
    width: 100%;
    }
 } 
 
   @media (max-width: 202px) {
    .pr .main{
        width:fit-content;font-size: large;padding: 5px;position: relative;left: 220%;
    }
 } 
    @media (max-width: 202px) {
    .pr .foot{
        width:185%
    }
 } 
.main{grid-area: main;background-color: #6b7c4e;height: auto;padding: 30px;;}
.main .sec{display: grid;grid-template-columns: repeat(2,1fr);gap: 10px;}
.main span{color: greenyellow;}
.main .text p{color: whitesmoke;}
.main .btn{margin: 30px;margin-left: 1px;display: flex;gap: 10px;}
.main .btn button{padding: 25px;}
.main .image img{transition: all 1s .5s ease;animation-name: repeat;animation-timing-function:linear;animation-duration: 1s;animation-delay: .5s;animation-iteration-count: infinite;}
/* .main .image img:hover{transition:ease 1s .5s all;transform: translate(15px);cursor: pointer;} */
.main .btn .one{color: black;background-color: greenyellow;border: solid black 1px;}
.main .btn .one:hover{opacity: 90%;cursor: pointer;}
.main .btn .two{background-color:inherit;border: 1px solid white;color: aliceblue;}
.main .btn .two:hover{cursor: pointer;outline: 1px solid white;}
.main img{width: 300px;height: 300px;filter: drop-shadow(10px 9px 9px black)}
@keyframes repeat{
    25%{transform: translate(5px);}
    50%{transform: translate(10px);}
}
.main .content .tx{text-align: center;grid-column: 1/-1;}
.main .content hr{margin: 10px;}
.main .content h3{margin: 15px;}
.main .content .box{background-color: rgb(70, 132, 112);transition: all 1s .5s ease;border: 2px solid black;padding: 7px;width: auto;height: 100%;;border-radius: 10px 10px;}
.main .content .box:hover{border-left: 5px solid rgb(153, 229, 40);border-bottom: 5px solid rgb(153, 229, 40);}
.main .content  p{color: aliceblue;font-size: 20px;margin: 10px;}
.main .content .box img{height: 200px;width: 95%;display: block;margin: 1px;padding: 1px;border-radius: 10px 10px;}
.main .content .box img:hover{filter: blur(1px);transition: all 1s .5s ease;transform: scale(1.1);cursor: pointer;}
.main .content{display: grid ;grid-template-columns: repeat(2,1fr);width: auto;gap: 20px;}
.nav{grid-area: nav;position:sticky;overflow: auto;background-color: black;overflow-y: auto;padding: 22px;color: rgba(240, 248, 255, 0.718);}
   @media (max-width: 202px) {
    .pr .nav{
        width:150%;
        padding: 26px;
        font-size: 20px;
    }
 } 
.nav a{text-decoration: none;color: lightgray;font-size: 17px;}
.nav a:hover{color: yellow;}
.nav li:hover{transition:cubic-bezier(0.075, 0.82, 0.165, 1);transform:translateX(10px)}
.nav li{list-style-type: none;text-align: center;border-bottom:1px solid rgba(211, 211, 211, 0.584);;}
.aside{grid-area: aside;background-color:black;color:rgba(240, 248, 255, 0.718);padding: 5px;}
@media (max-width:768px) {.aside .sidebar{
    display: flex;flex-direction: column;width: 150px;;
}   
}

/* @media (max-width:768px) {.aside .sidebar button{
    margin-left: 10px;
}   
} */
.aside .sidebar .it,h4{font-size: 15px;border-bottom: 1px outset rgba(211, 211, 211, 0.473);padding: 5px;display: block;width: 150px;}
.aside .sidebar .delete{text-decoration: line-through;border: none;font-size: 15px; ;}
.aside .sidebar{padding: 15px;}
.aside .sidebar .navs{font-size: 15px;display: flex;flex-direction: column;gap: 17px;}
.aside .sidebar .navs span{display: inline-block;padding: 15px;color:rgb(255, 255, 255);font-weight: bold;}
.aside .sidebar .navs div{border-bottom:1px outset rgba(211, 211, 211, 0.473) ;padding: 10px;}
.aside .sidebar p{font-size: 15px;color: rgb(14, 241, 14);}
.aside .sidebar button{padding: 20px;margin: 15px;position: relative;left: -7%;width: 160px;;;font-weight: bold;letter-spacing: 2px;background-color: rgb(197, 255, 8);border-radius: 3px 3px 3px 3px;border: 2px solid black;font-family:'DM Sans', sans-serif;text-transform: uppercase;}
.aside .sidebar button:hover{background-color: rgb(141, 226, 14);cursor: pointer;;}
.aside .sidebar h3{color: rgb(177, 219, 10);font-family: Arial, Helvetica, sans-serif;}
.foot{grid-area: footer;display: grid;gap: 18px;line-height: 1.6;grid-template-columns: repeat(4,1fr);border: 1px outset rgba(211, 211, 211, 0.246) ;padding: 25px;background-color: black;height: 100%;width: 100%;;color:rgba(240, 248, 255, 0.718);;}
.foot .col1 p{font-size: 17px;margin: 10px;}
.foot h2{margin: 10px;}
.foot h5{font-size: 19px;color: aliceblue;}
.foot .col2 div,.col3 div,.col3 div,.col4 div{margin: 10px;}
.foot .col2 div:hover,.col3 div:hover,.col3 div:hover,.col4 div:hover{cursor: pointer;color: yellow;}
.foot .col2,.col3,.col3,.col4{font-size: 18px;color:rgba(211, 211, 211, 0.479);margin: 15px;}
.foot form{display: flex;}
.foot button{padding: 21px;border: 1px outset rgba(211, 211, 211, 0.479);background-color: rgb(234, 234, 15);}
.foot .col1 form input[type="email"]{background-color: rgba(34, 28, 28, 0.55);color:rgba(211, 211, 211, 0.479);padding: 10px;border: 1px outset rgba(211, 211, 211, 0.479);width: 260px;border-right: none;}
.foot h4{border-bottom: none;color: dimgray;
    width: 100%;
    font-family: math;
    letter-spacing: 1px;}
.foot li{list-style-type: none;position: relative;
    bottom: 30%;
    
}
.foot li a{text-decoration: none;margin: 25px;color: rgba(211, 211, 211, 0.473);font-size: 14px;}
.foot li a:hover{cursor: pointer;color: yellow;}