/*The following style is to be applied to the Demos section*/
.demos{
    padding: 175px 200px;
    position: relative;
    min-height: 100vh;
    max-width: 80vw;
    z-index: 1;
    font-family: 'Inter';
}
.demo h2{
    font-size: 5rem;
    color:var(--color-accent1)
}
.demo #introduction{
    font-size: 3rem;
    color:var(--color-accent3)
}
.demo .title{
    font-size: 2.3rem;
    padding-top: 1.3rem;
    padding-bottom: .5rem;
}
.demo > p{
    font-size: 1.9rem;
}
p.demo::first-line{
    font-size: 5rem;
}
ol>p{
    color:rgb(223, 98, 9);
}
ol{
    padding-left: 25px;
}
#testLink:hover{
    color:blue;
    font-size: 1.9rem;
}
#testLinkVisit:visited{
    color:hotpink;
}
/*End of Demo section*/



/*Menu Section*/
.menu{
    padding-top: 150px;
}
.menu>h2{
    font-size: 5rem;
    color:var(--color-accent1);
    margin-bottom: 32px;
}
/* set of 5 article boxes*/
#article-set #menu1{
    display:flex;
    flex-flow: row wrap;
    justify-content: space-around;
    gap: 16px;
}
/* each box within article*/
#article-set > article{
    border:2px solid rgb(77, 77, 77);
    flex: 1 0 40%;
    min-height: 200px;
}
/*first box*/
#article-set article:nth-child(1){
    flex: 1 0 100%;
    padding: 16px;    
}
/* Heading in each box*/
article > h2{
    padding:16px;
}
/*set of three divs*/
#menu1 > div{
    border:2px solid var(--color-accent5);
    flex: 1 0 30%;
    min-height: 160px;
}
/*each button*/
.menu button{
    margin: 20px auto;
    display: block;
    padding: 8px;
    background-color: var(--color-accent4);
}
.menu button:hover{
    cursor: pointer;
}
/*applies to only button 1c*/
.menu #button1c{
    position:relative;
    border:2px solid var(--color-accent1);
    width:75px;
    height:75px;
    overflow: hidden;
}
.b1c1, .b1c2, .b1c3 {
    transition: all .8s linear;
}
/*Closed state c3*/
.menu1cClosed .b1c1, .menu1cClosed .b1c2, .menu1cClosed .b1c3{
    width: 50px; 
    height: 10px;
    background-color: var(--color-accent3);
    position: absolute;
}
.menu1cClosed  .b1c1{
    left: 10px;
    top: 10px;
}
.menu1cClosed .b1c2{
    left: 10px;
    top: 30px;
}
.menu1cClosed .b1c3{
    left: 10px;
    top: 50px;
}
/*Open state 1c*/
.menu1cOpened .b1c1, .menu1cOpened  .b1c2, .menu1cOpened  .b1c3{
    width: 50px; 
    height: 10px;
    background-color: var(--color-accent3);
    position: absolute;
}
.menu1cOpened  .b1c1{
    left: 10px;
    top: 30px;
    transform: rotate(225deg);
}
.menu1cOpened .b1c2{
   left:100px;
   top:30px;
}
.menu1cOpened .b1c3{
    left: 10px;
    top: 30px;
    transform: rotate(-225deg);
}


/*Menu Button 2d*/
.menu #button2d{
    position:relative;
    bottom:30px;
    border:2px solid var(--color-accent1);
    width:100px;
    height:115px;
    overflow: hidden;
}
.menu2dClosed .b2d1, .menu2dClosed .b2d2, .menu2dClosed .b2d3, .menu2dClosed .b2d4, .menu2dClosed .b2d5{
    width: 75px; 
    height: 10px;
    background-color: var(--color-accent3);
    position: absolute;
}
.menu2dClosed  .b2d1{
    left: 10px;
    top: 10px;
}
.menu2dClosed .b2d2{
    left: 10px;
    top: 30px;
}
.menu2dClosed .b2d3{
    left: 10px;
    top: 50px;
}
.menu2dClosed .b2d4{
    left: 10px;
    top: 70px;
}
.menu2dClosed .b2d5{
    left: 10px;
    top: 90px;
    color: var(--color-accent3);
    font-size: 5px;
}
.b2d1, .b2d2, .b2d3, .b2d4, .b2d5 {
    transition: all .8s linear;
}
/*Menu 2d Opened*/
.menu2dOpened .b2d1, .menu2dOpened .b2d2, .menu2dOpened .b2d3, .menu2dOpened .b2d4, .menu2dOpened .b2d5{
    width: 75px; 
    height: 10px;
    background-color: var(--color-accent3);
    position: absolute;
}
.menu2dOpened  .b2d1{
    left: -100px;
    top: 10px;
}
.menu2dOpened .b2d2{
    left: 100px;
    top: 30px;
}
.menu2dOpened .b2d3{
    left: -100px;
    top: 50px;
}
.menu2dOpened .b2d4{
    left: 100px;
    top: 70px;
}
.menu2dOpened .b2d5{
    left: 10px;
    top: 70px;
    height:30px;
    color:whitesmoke;
    font-size: 24px;
}
/*Menu 3d*/
.menu #button3d{
    transition: all .8s linear;
}
.menu .menu3dClosed{
   transform: rotate(405deg);
}
/*Menu 4d*/
.menu #button4d{
    position:relative;
    border:2px solid var(--color-accent1);
    width:75px;
    height:75px;
    overflow: hidden;
}
.menu4dClosed .b4d1, .menu4dClosed .b4d2, .menu4dClosed .b4d3, .menu4dClosed .b4d4{
    width: 50px; 
    height: 5px;
    background-color: var(--color-accent3);
    position: absolute;
}
.menu4dClosed  .b4d1{
    left: 10px;
    top: 10px;
}
.menu4dClosed .b4d2{
    left: 10px;
    top: 20px;
}
.menu4dClosed .b4d3{
    left: 10px;
    top: 30px;
}
.menu4dClosed .b4d4{
    left: 10px;
    top: 40px;
}

.b4d1, .b4d2, .b4d3, .b4d4{
    transition: all .8s linear;
}
/*Menu 4d Opened*/
.menu4dOpened .b4d1, .menu4dOpened .b4d2, .menu4dOpened .b4d3,.menu4dOpened .b4d4{
    width: 50px; 
    height: 5px;
    background-color: var(--color-accent3);
    position: absolute;
}
.menu4dOpened  .b4d1{
    left: -100px;
    top: 10px;
}
.menu4dOpened .b4d2{
    top: 43px;
    transform: rotate(90deg);
}
.menu4dOpened .b4d3{
    top: 60px;
    transform: rotate(120deg);
    left:15px;
}
.menu4dOpened .b4d4{
    transform: rotate(-120deg);
    top: 60px;
    right: 20px;
}



/*section for gallary*/
.divider{
    height: 25px;
    margin-top: 25px;
    margin-bottom: 25px;
    background-color: var(--color-accent1);
    display: grid;
    grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-3-start] 1fr [row-3-end];
    grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-23-start] 1fr [col-3-end];
}
.sep-black{
    background-color: var(--color-accent3);
}
.sep-box1{
    grid-area: 1/1/3/2;
}
.sep-box2{
    grid-area: 2/2/4/3;
}
.sep-box3{
    grid-area: 1/3/3/4;
}

.gallery{ /*please help me understand this. I do not understand how to keep the images in place when resizing. I have stareted to 
    understand how grids are set up and kind of understand how to posititon but when resizing things 
    get messy. also, is there a way to use half units with grid? for placeholders 5-8 to follow picture need to be sized differently. 
    what are some ways to contain elements that are inside of other elements?*/
    display:grid;
    border: 2px solid red;
    height: 75vh;
    gap: 9px;
    grid-template-columns: [grid-col-start]1fr [col-2-start]1fr [col-3-start]1fr [col-4-start]1fr [col-5-start]1fr [col-6-start]1fr [col-7-start]1fr [col-8-start]1fr[grid-col-end];
    grid-template-rows: [grid-row-start]1fr [row-2-start]1fr [row-3-start]1fr [grid-row-end];
    grid-template-areas: "one one one one one one one one"
                        "four four four . five five six six"
                        "four four four . seven seven eight eight"     
}
.inline-gallery{
 grid-area: one;
}

#imageFour{
    grid-area: four;
}
#imageFive{
    grid-area: five;
}
#imageSix{
    grid-area: six;
}
#imageSeven{
    grid-area: seven;
}
#imageEight{
    grid-area: eight;
}