body {
    font-family: roboto;
    background-image: url("images/librumbackgroundwithblue.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    color: white;
    background-color: black;
    overflow-x: hidden;
    margin-bottom: 0em;
    height: 100vh;

    .checkboxmenutoggle {
        display: none;
    }

    .navbar {
        background: rgba(255, 255, 255, 0.078);
        border-radius: 4em;
        box-shadow: 
            -2px -2px 4px rgba(255, 255, 255, 0.2),
            2px 2px 4px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(7.4px);
        position: fixed;
        z-index: 999;
        text-align: left;
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        height: 4em;
        padding: 0em;
        margin-left: 5%;
        margin-top: 1em;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        color: white;

        .logoimage {
            height: 70%;
            width: auto;
            padding: 0.5em 0 0 2em;
        }

        .companyname {
            font-weight: 1000;
            border-radius: 5px;
            margin: 0;
            margin-left: 0.3em;
            margin-right: 0.2em;
            margin-bottom: 0.1em;
            align-self: center;
            margin-right: auto;
            margin-left: 1em;
        }

        .navbarbutton {
            height: 80%;
            width: 7em;
            align-self: center;
            color: white;
            border-radius: 4em;
            border: none;
            font-size: 1.2em;
            margin-right: 1em;
            background: rgba(255, 255, 255, 0.044);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(7.4px);
            display: none;
            transition: 300ms;
        }

        .navbarbutton:hover {
            transform: scale(1.05);
            cursor: pointer;
            background: rgba(255, 255, 255, 0.125);
        }

        .navbarbutton:active {
            /*what to put here??????? purrrrrrrr UWU*/
            cursor: pointer;
            transform: scale(0.97);
            background: rgba(255, 255, 255, 0.066);
        }

        .navbarmenubutton {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80%;
            width: 2.7em;
            align-self: center;
            color: white;
            border-radius: 4em;
            border: none;
            font-size: 1.2em;
            margin-right: 0.6em;
            border: 1px solid rgba(255, 255, 255, 0);
            background: rgba(255, 255, 255, 0.044);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(7.4px);
            transition: 300ms;
        }

        .navbarmenubutton:active {
            cursor: pointer;
            transform: scale(0.97);
            background: rgba(255, 255, 255, 0.066);
        }
    }

    .mobilemenudiv {
        position: fixed;
        top: 6em;
        margin-left: 5%;
        width: 90%;
        background: rgba(255, 255, 255, 0.078);
        border-radius: 2em;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(7.4px);
        box-shadow: 
            -2px -2px 4px rgba(255, 255, 255, 0.2),
            2px 2px 4px rgba(0, 0, 0, 0.3);
        display: none;
        flex-direction: column;
        padding: 1em 0;
        z-index: 998;
        transform: translateY(-20px);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;

        .mobilemenudivbutton {
            width: 90%;
            margin: 0.5em auto;
            padding: 1em;
            background: rgba(255, 255, 255, 0.044);
            border: none;
            border-radius: 2em;
            color: white;
            font-size: 1.2em;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(7.4px);
            transition: 300ms;
        }

        .mobilemenudivbutton:active {
            transform: scale(0.98);
            background: rgba(255, 255, 255, 0.066);
        }
    }

    .checkboxmenutoggle:checked ~ .mobilemenudiv {
        display: flex;
        transform: translateY(0);
        opacity: 1;
    }

    /*index.html content starts here*/

    .topinformationdiv {
        height: 98vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        h1 {
            font-size: 4em;
            transform: rotate(-5deg);
            /*text-align: center;*/
        }
    }

    .maincontentdiv {
        background: rgba(255, 255, 255, 0.078);
        box-shadow: 
            -2px -2px 4px rgba(255, 255, 255, 0.2),
            2px 2px 4px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(7.4px);
        border-top-left-radius: 2em;
        border-top-right-radius: 2em;
        /*width: 98vw;*/
        width: auto;
        height: auto;
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        box-sizing: border-box;
        padding: 1em;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin-left: 0.5em;
        margin-right: 0.5em;
        overflow-x: hidden;

        p {
            width: 95%;
            margin: 1em;
            font-size: 1.3em;
            text-align: center;

            a {
                color: white;
            }
        }

        img {
            width: 180%;
            margin: 1em;
            border-radius: 1em;
        }
    }

    /*members.html content starts here*/
    
    .memberswrapper {
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 6em;
        justify-content: center;
        align-items: center;

        .memberinfodiv {
            background: rgba(255, 255, 255, 0.078);
            border-radius: 2em;
            box-shadow: 
                -2px -2px 4px rgba(255, 255, 255, 0.2),
                2px 2px 4px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(7.4px);
            margin: 3em;
            padding: 1em;
            width: 80%;
            text-align: center;
            margin-bottom: 1em;
            margin-top: 1em;
            overflow-y: hidden;
            transition: 300ms;
            height: 15em;

            .memberimage {
                border-radius: 50%;
                height: 10em;
            }

            .membertitletext {
                color: rgb(182, 182, 182);
            }
        }

        .memberinfodiv:hover {
            transform: scale(1.05);
            height: 24em;
        }
    }

    /*projects.html content starts here*/

    .projectwrapper {
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 6em;
        justify-content: center;
        align-items: center;

        .projectinfodiv {
            background: rgba(255, 255, 255, 0.078);
            border-radius: 2em;
            box-shadow: 
                -2px -2px 4px rgba(255, 255, 255, 0.2),
                2px 2px 4px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(7.4px);
            margin: 3em;
            height: fit-content;
            padding: 1em;
            width: 80%;
            text-align: center;
            margin-bottom: 1em;
            margin-top: 1em;
            overflow-y: hidden;
            transition: 300ms;
            height: 15em;

            .projectimage {
                border-radius: 1.5em;
                height: 10em;
            }

            .projecttitletext {
                color: rgb(182, 182, 182);
            }

            .projectlaunchbutton {
                height: 10%;
                width: 7em;
                align-self: center;
                color: white;
                border-radius: 2em;
                border: none;
                font-size: 1em;
                background: rgba(255, 255, 255, 0.044);
                backdrop-filter: blur(15px);
                -webkit-backdrop-filter: blur(7.4px);
                transition: 300ms;
                text-align: center;
            }

            .projectlaunchbutton:hover {
                transform: scale(1.05);
                cursor: pointer;
                background: rgba(255, 255, 255, 0.125);
            }

            .projectlaunchbutton:active {
                cursor: pointer;
                transform: scale(0.97);
                background: rgba(255, 255, 255, 0.066);
            }
        }

        .projectinfodiv:hover {
            transform: scale(1.05);
            height: 24em;
        }
    }
}

@media only screen and (min-width: 825px /*600px*/) {
    body{
        .navbar {
            .logoimage {
                padding: 0.5em 0 0 2em;
            }

            .navbarbutton {
                display: unset;
            }

            .navbarmenubutton {
                display: none;
            }
        }

        /*index.html content starts here*/

        .maincontentdiv {
            padding: 2em;
            border-top-left-radius: 4em;
            border-top-right-radius: 4em;
            margin-left: 1em;
            margin-right: 1em;

            p {
                width: 35%;
                margin: 2em;
                font-size: 1.5em;
            }

            img {
                width: 40%;
                margin: 2em;
                transform: rotate(11deg);
            }
        }

        /*members.html content starts here*/

        .memberswrapper {
            padding: 6em 0 0 0;
            justify-content: center;
            align-items: flex-start;

            .memberinfodiv {
                width: 20%;
                margin: 1em 2em;
            }
        }

        /*projects.html content starts here*/

        .projectwrapper {
            padding: 6em 0 0 0;
            justify-content: center;
            align-items: flex-start;

            .projectinfodiv {
                width: 20%;
                margin: 1em 2em;
            }
        }
    }
}

@media only screen and (max-width: 390px) {
    body {
        .navbar {
            .companyname {
                display: none;
            }
        }
    }
}