body{
 padding 100px;
 font-family: cursive; color: #616161; background: #f3e5f5;
 /*width: 1366px;*/
}
/* Styles for the 'invisible' navigator */

#hidden{
 opacity: 0%; width: 70px;
 border: 3px solid purple; position: fixed;
 left: 0; height: 60px; border-radius: 0 50px 50px 0;
 background: #ce93d8e8;
 line-height: 60px; overflow: scroll; top: 0px;
 transition-property: opacity, top, width, height;
 transition-duration: 0.5s; border-left: none; overflow: hidden;
}
#hidden:hover{
 opacity: 100%; width: fit-content; height: 300px; top: 100px
}
#hidden a{
 color: purple; text-decoration: none; font-size: 100%;
 transition: padding .5s; margin-left: 40px; cursor: pointer;
}
#hidden a:hover{
 border: 3px dotted purple; padding-left: 30px; border-radius: 1em;
}
/* Keep things #hidden  */

/* styles for 'head set', first things first*/
/*for the navigations and header*/

#first{
    background-image: url('caps/capground.jpg');
    background-repeat: round;
 }
li img{
    width: 70px; height: 40px; float: left;
}
nav ul{
 display: flex; margin: 0; background: #f3e5f5cc;
 justify-content: flex-end;
}
nav ul li a{
 text-decoration: none; color: inherit; cursor: pointer; transition: font-size 0.3s;
}
nav ul li a:hover{
 font-size: 1.2em;
}
nav ul li a:active{
 color: #9C27B0;
}
nav ul li{
 width: 20%;
 text-align: center; padding: 1em; border-radius: 1em;
}
/*for header*/
header{
 background: #e1bee7cc;
}
h1{margin: 0;}
h1+p{
    text-align: center; font-style: oblique;
}
/*end of first*/

/*contain only one 'instance' of pages & no other navs*/
#Buy, #Reg{
    opacity: 0; height: 0;
}
#hidden{
    display: none;
}
#Buy, #Reg, #homepage{
    transition: opacity .5s; border-bottom: 5px solid transparent;
}

/*General styles*/
h1, h3{
 text-align: center; color: gray;
}
p{
 font-size: large;
/*  font-family: sans-serif; */
}
.partition{
    height: 15px
}

/*flexing things*/
#homepage{
    display: flex;
}

#pics{
    padding: 1em; background: #ce93d8; text-align: center;
    border-radius: 0 .5em 0 0; width: 80%; display: flex;
    justify-content: center; gap: 10px
}
#pic img{
    width: 400px; height: 500px;
    transition: transform 10s linear; position: relative;
}
#pic, .cover{
    height: 500px; width: 400px; overflow: hidden; border-radius: 2em; cursor: none;
    border: 15px double purple; background: #dab0e2;
    transition: opacity .5s;
}
#pic{border: none}
#pic img:hover{
    transform: scale(1.5) rotate(5deg);
}
#previous, #next{
    align-self: center; padding: inherit; color: purple;
    border: 2px solid purple; cursor: pointer;
}
#previous{
    border-radius: 2em 0.5em 0.5em 2em;
    border-left: 6px double purple;
}
#next{
    border-radius: .5em 2em 2em .5em;
    border-right: 6px double purple;
}
/*section styles*/
#mum{
    border: 0.1em solid purple; border-radius: .5em 0 0; width: 40%;
    background: #e1bee7; line-height: 2em;
    border-bottom: none; border-right: none; padding: 1em;
}
/*flexing ending*/
footer{
    background: #AB47BC; color: #E1BEE7;/* font-family: calibri;*/
    font-size: small; padding-left: 2em;
}
#foot{
    color: white;
}
@media screen and (max-width: 980px){
    #homepage, #hidden{
        display: block;
    }
    #mum, #pics{
        width: -webkit-fill-available; border-radius: 1em;
        border-right: 0.1em solid #9C27B0;
    }
/*     #mum{
        line-height: 3em;
    } */
    #pic, #pic img{
        height: 700px; width: 600px;
    }
    #first{
        background: #8000806b;
    }
    nav ul{
        display: none;
    }
    nav::before{
        content: url('images/menu.png') ' <--- Tap for menu';
        color: #822b82;
    }
    body{
        font: 2em monospace; color: #9c27b0
    }
    #pics{
         border-left: .1em solid purple;
         border-bottom: .1em solid purple;
         background: #e1bee7

    }
}