body{
    background: rgb(240, 204, 251);
    .bigshot-one-regular {
  font-family: "Bigshot One", serif;
  font-weight: 400;
  font-style: normal;
}
}
body, html {
    scroll-behavior: smooth;
}
h1{
    .bigshot-one-regular {
  font-family: "Bigshot One", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20em;
}
}



.logo{
    img{
        max-width:20%;
    }
   
}

.menu{
    list-style: none;
}

.menu-item{
    margin-right: 2.5em;
}

.menu-item:last-of-type{
    margin-right:0;
}

a.menu-item-link{
    text-wrap-style: none;
}

.menu-item-link{
    text-decoration: none;
}

.menu-item-link::after{
    content:'';
}

.menu-item:hover > .menu-item-link::after{
    background-color: red;
}
.accordion-title {
    cursor: pointer;
    &:hover {
        color: rgb(211, 4, 142);
    }
}
.sub-menu{
    height: 0;
    overflow: hidden;
    padding: 0;
    transition: all 150ms;
}
.sub-menu.open {
    height: auto;
    padding: 20px 0;
}
.sub-menu .menu-item{
    margin-top: 0.5em;
    white-space: nowrap;
}

.has .sub-menu:hover .sub-menu{
    opacity: 1;
    visibility: visible;
}

.parallax{
    background: url(../images/maxresdefault.jpg) no-repeat fixed 1% 1%;
    background-size: cover;
    height:10vh;

}

@media screen and (max-width:1100px){
    header{ padding:20px;
    }
}

@media screen and (max-width:800px) {
    header{
        
        z-index:5;
        
    }
    nav{
        position: absolute;
        background-color: black;
        top:100%;
        width:100vw;
        left:0;
        bottom: 0;
        z-index: -1;
    }
    .menu{
        display: block;
        padding:20px;
    }
    .menu-item{
        margin-right: 0;
        margin-bottom: 0.75em;
        
    }
    .sub-menu{
        position: static;
        visibility: visible;
        opacity: 1;
        height: 0;
        overflow: hidden;
        padding: 0;
    }
    .has-submenu:hover .sub-menu{
        height: auto;
        padding: 20px;
    }
    .menu-item-link::after{
        display: none;
    }
}

.partOne{
    background-color: rgb(237, 205, 163);
    
    display:block;
    
    block-size: 30em;
    border-radius: 10px;
    border: 3px solid black;
    padding:20px;
    

    img{
        float: left;
        max-width: 275px;
    }

    p{
        text-indent: 1em;
        padding-left: 17em;
    }
}

.partTwo{
    background-color: rgb(173, 237, 163);
    
    display:block;
    
    block-size: 30em;
    border-radius: 10px;
    border: 3px solid black;
    padding:20px;
    

    #p2Img{
        float: right;
        max-width: 275px;
    }

    p{
        text-indent: 1em;
        padding-left: 5px;
    }
}
.partThree{
    background-color: rgb(152, 147, 251);
    
    display:block;
    
    block-size: 30em;
    border-radius: 10px;
    border: 3px solid black;
    padding:20px;
    

    #p3Img{
        float: left;
        max-width: 275px;
    }

    p{
        text-indent: 1em;
        padding-left: 16.5em;
    }
}

.partFour{
    background-color: rgb(245, 160, 255);
    
    display:block;
    
    block-size: 30em;
    border-radius: 10px;
    border: 3px solid black;
    padding:20px;
    

    #p4Img{
        float: right;
        max-width: 275px;
    }

    p{
        text-indent: 1em;
        padding-left: 5px;
    }
}