body 
    margin: 0
    padding: 0
    font-family: 'Poppins', sans-serif

.modal-background
    background-color: rgba(0, 0, 0, 0.4)
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 100vh

    .modal
        background-color: #fcfafc
        color: #330033
        width: 40%
        margin: 50vh auto
        transform: translateY(-50%)
        padding: 60px 40px
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
        border-radius: 2px
        position: relative

        h4
            font-size: 22px

            .cursor-pointer
                cursor: pointer
                float: right
                padding-top: 5px
                padding-right: 2px
        
        .modal-btn
            float: right
            font-family: 'Poppins', sans-serif
            padding: 6px 10px

        .modal-mail
            display: block
            width: 100%
            margin: 20px 0
            padding: 10px 6px
            font-family: 'Poppins', sans-serif

            &:focus
                outline: none
        
        .hidden-radio ~ .hides
            display: none

        .hidden-radio:checked ~ .hides
            display: inline-block

.hidden
    display: none

h1, h2, h3, h4, h5, h6
    background-color: #663366
    color: #fcfafc

a
    color: #660066
    text-decoration: none

.active
    color: #eeaaee
    text-decoration: underline

a:hover
    color: #eeaaee
    text-decoration: underline

nav
    background-color: #eeeeee

    .burger-btn
        flex-direction: column
        gap: 3px
        align-items: center
        display: none
        justify-content: center

        &:hover
            cursor: pointer

        .burger-btn-bar
            height: 3px
            display: block
            width: 20px
            background-color: black


    ul
        display: flex
        gap: 30px
        margin: 0 30px
        padding: 0
        height: 50px
        align-items: center
    
        li
            list-style-type: none

@media (max-width: 1000px)
    .modal
        width: 60%!important

@media (max-width: 560px)
    .modal
        width: 80%!important
    
    nav

        .burger-btn
            display: flex
            height: 30px

        ul
            max-height: 0
            overflow: hidden
            transition: 300ms ease
            display: block
            height: auto
        
        #burger:checked ~ ul
            max-height: 300px
            padding-bottom: 30px