html, body{
    box-sizing:border-box;
    height: 100%;
    font-size: 20px;
    margin: 0rem;
    padding: .625rem;
}


.container{
    background-color: rgb(251, 201, 242);
    border:2rem solid transparent;
    display:grid;
    grid-row-gap:1rem;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows:12rem auto auto auto auto auto auto 18.75rem 18.75rem 6.25rem 8.438rem 9.375rem;
    grid-template-areas: 
    "h h h h h h h h h h h "
    "a a a . b b b . c c c "
    "a a a . b b b . c c c "
    "d d d d d d d d d d d "
    "e e e e . . . g g g g "
    "e e e e . . . g g g g "
    ". . . . . . . . . . . "
    ". . . . . . . . . . . "
    "i i i i i i i i i i i "
    "i i i i i i i i i i i "
    "j j j j j j j j j j j "
    "f f f f f f f f f f f "
    
}

.myGradient{
    background:linear-gradient(to right,rgb(248, 5, 127), rgb(246, 63, 154), hotpink, rgb(253, 141, 197), rgb(246, 193, 219) );
}
.myGradient1{
    background:linear-gradient(to right,red,rgb(245, 113, 113), rgb(245, 97, 156));
    }
.myGradient2{
    background:linear-gradient(to left,navy, royalblue,purple, rgb(226, 54, 226));
}
.myGradient3{
    background:linear-gradient(to right,rgb(242, 116, 242), plum, pink);
}

.backgroundimg{
    background-image:url("/images/background.png");
    background-color: #e891eb;
    height:100%;
    background-size: cover;
    position: relative;
    background-repeat: repeat;
}
img{
    max-width: 100%;
    height:auto;
}
h1{
    color:black;
    text-decoration: overline;
    font-weight: bolder;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.parallax{
    background-image: url('../images/contentd.jpg');
    height:100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.para{
    height:25rem;
    background-color:plum;
    font-size: 2.25rem;
}
.header{
    grid-area: h;
    background-image: url('../images/backgroundimage.jpg');
    background-color: salmon;
    text-transform: uppercase;
    text-align: center;
    color:white;
    border: .25rem solid whitesmoke;
    padding: .625rem 4.375rem 2.5rem 3.125rem;
}

nav ul{
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
}
nav ul li{
    margin-right: .5rem;
}

nav > ul > li > a {
    color:white;
    font-size: 1.563rem;
}
nav> ul> li> a:hover {
    color:white;
}

.contenta{
    grid-area: a;
    background-color: white transparent;
    border: .177rem solid whitesmoke;
    text-align: center;
    display:flex;
    justify-content: center;
}

.opacity{
    display: flex;
}
#justin{
    opacity:1;
}

#justin:hover {
    opacity: 0.5;;
}
.contentb{
    grid-area: b;
    background-color: rgb(255, 255, 255);
    border: .188rem solid whitesmoke;
    text-align: center;
    padding-top:2rem;
    
}
.p{
    font-size: 2rem;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color:#e716ef;
}
.contentc{
    grid-area: c;
    background-color:white; 
    border: .188rem solid whitesmoke;
    text-align: center;
   
    
}

.contentd{
    grid-area: d;
    background-color: mediumorchid;
    text-align: center;
    border:.188rem solid white;
}

.contente{
    grid-area: e;
    background-color: rgb(255, 255, 255);
    border: .188rem solid white;
}

.contente-text{
    text-align: center;
    position: relative;
    color:rgb(251, 201, 242);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    overflow: hidden;
}

.contentg{
    grid-area: g;
    background-color: rgb(255, 255, 255);
    text-align: center;
    border: .188rem solid white;
}

.contentg-text{
    text-align: center;
    position: relative;
    color:rgb(251, 201, 242);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    overflow: hidden;
}

.contenti{
    grid-area: i;
    background-color: rgb(244, 148, 249);
    text-align: center;
    border: .188rem solid white;
    overflow:hidden;
    
}

.contentihome{
    grid-area: i;
    background-color:rgb(244, 148, 249) ;
    overflow:hidden;
    border: .188rem solid white;
    position:relative;
    width:70%;
    padding-top:56.25%;
    margin-left:auto;
    margin-right:auto;
}

.contentitoys{
    grid-area:i;
    background-color:rgb(244, 148, 249) ;
    overflow:hidden;
    border: .188rem solid white;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

h3{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:black;
    text-align: center;
}

.contenticlothes{
    grid-area: i;
    margin-left: auto;
    margin-right: auto;
}

    .slider-container{
    width: 11.7rem;
    height:13.5rem;
    background-color: #e716ef;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0rem;
    text-align: center;
    overflow: hidden;
    }

        .image-container {
            height:13.5rem;
            width:36rem;
            background-color: lightpink;
            border: .313rem solid black;
            position: relative;
                 transition: left 3s;
                 -webkit-transition: left 3s;
                 -moz-transition: left 3s;
                 -o-transition: left 3s;
            
        }
        .slider-image {
            float: left;
            margin: 0rem;
            padding: 0rem;
        }
        .button-container{
            top:-70px;
            position:relative;
        }
        .slider-button{
            display:inline-block;
            height:10px;
            width:10px;
            border-radius: 5px;
            background-color: red;
        }
        #slider-image-1:target ~ .image-container{
            left:0rem;
        }
        #slider-image-2:target ~ .image-container{
            left: -12rem;
        }
        #slider-image-3:target ~ .image-container{
            left: -24rem;
        }
     /*This is my code for my slider*/  
        
     .contentisongs{
        grid-area: i;
        margin-left: auto;
        margin-right: auto;
        border: .5rem solid hotpink;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     }
     .topartist{
        font-weight: bolder;
        text-decoration: underline;
        font-family:Georgia, 'Times New Roman', Times, serif;
     }
.responsive-frame{
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
}
.contentj{
    grid-area:j;
    background-color: none;
    
}
.footer{
    grid-area: f;
    border: .25rem solid white;
    display: flex;
    justify-content: space-around;

    background-color: rgb(237, 188, 255);
    color:rgb(255, 0, 251);
    text-align: left;
}

.footer > ul{
    margin-left:0rem;
    list-style-type: none;
}

.footer > ul > a{
    text-decoration: none;
}

.footer > ul > a > li{
    color: black;
}

.symbol ul{
    padding-left: .3rem;
}

.fa{
    padding: .3rem;
    text-align: center;
    text-decoration:dotted;
    margin: .04rem .04rem;
}

.fa:hover{
    opacity: 0.7;
}

.fa-facebook {
    background: #e891eb;
    color: white;
}

.fa-twitter{
    background:#e716ef;
    color:black;
}

.fa-instagram{
    background:#e891eb;
    color:white;
}

.fa-snapchat-ghost{
    background:#e716ef;
    color:black;
    text-shadow: -.063rem 0 black, 0 .063rem black, .063rem 0 black,0 -.063rem black;
}

form{
    border: .04rem solid purple;
}

.container2{
    padding: .04rem;
    background-color:rgb(13, 13, 13);
}

input[type=text], input[type=submit]{
    width: 100%;
    padding: .02rem;
    margin: .02rem solid #ccc;
    box-sizing: border-box;
}

input[type=submit]{
    background-color: #eb82eb;
}

.button{
    background-color: transparent;
    border-radius: .3rem;
    color:white;
    cursor:pointer;
    
}

.button:hover{
    background-image: linear-gradient(90deg, hotpink, pink, lightpink);
    animation:slide 3s linear infinite;
}

@keyframes slide{
    to{
        background-position: 20vw;
    }
}

@media only screen and (max-device-width:780px){

    .contentb{
        padding-top: 0rem;
    }

    .p{
        font-size: .8rem;
    }
    nav>ul>li{
        margin-right: .3rem;
    }
    nav> ul >li >a{
        font-size: .8rem;
    }

}

table{
    font-size: 2rem;
}
h2{
    font-style: oblique;
    text-align: center;
    color:#e716ef;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.hide{
    display: none;
}


.mydiv{
    text-align: center;
    color:#e716ef;
    font-size: 1.375rem;
}

.mydiv:hover + .hide{
    display:block;
    margin:1.25rem auto;
    
}
a:link{
    color:black;
}
a:visited{
    color:white;
}
a:hover{
    color:rgb(237, 127, 127);
    text-decoration: none;  /*this makes the underline disappear */
}
a:active{
    color:orange;
}