/*Top Navigation Bar*/
.navbar {
    display: flex;
    padding: 0.2%;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid black;
}

.navbar a {
    
    font-family: "Noto Sans", sans-serif;
    margin-top: auto;
    margin-bottom: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.navbarlinks {
    text-decoration: none;
}

/* Mobile Navigation Bar*/
.dropdown{
    display: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    border-bottom: 2px solid black;
    text-align: center;
    padding: 2%;


}

.dropdown a {

    display: inline-block;
    background: white;
    border: 2px solid black;
    border-radius: 15px;
    text-decoration: none;
    padding: 1em;
}

.dropdownButton {
    display: none;
    margin-right: 20px;
}

.divtoggle {
    display: none;
}

/* Anchor Logo to Left of page*/
.logo {
    display: inline-block;
    text-align: start;
    height: auto;
    max-width: 20%;
    padding: 0.2%;
}

/*Grid Layouts*/
.twoWide {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 550px;
    margin-bottom: 3%;
}

.twoWideEven {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 550px;
    margin-bottom: 3%; 
}

.threeWide {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 550px;
}

.fourWide {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
}

/*Project page layouts*/
    
.content {
    display: block;
    height: auto;
    border-bottom: 2px solid black;

}

.contentAlternative {
    display: block;
    height: auto;
    border-bottom: 2px solid black;
}

.contentgrid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 10em;
}

.contentgridAlternative {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 10em;
}

.contentWrapper {
    display: inline-block;
}







/*On smaller width screens, display grid content as stacked rather than side by side*/
@media (width <= 50rem) {
    
    .twoWide{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 600px;
    }

    .twoWideEven{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 600px;
    }

    .threeWide{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 550px;
    }

    .fourWide{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .dropdownButton {
        display: inline-block;

        background: white;
        border: 2px solid black;
        border-radius: 15px;
        text-decoration: none;
        padding: 1em;
        color: black;
        font-family: "Rubik", sans-serif;
        font-weight: 400;
        font-size: 18px;
        text-decoration: none;
    }

    .navbarlinks {
        display: none;
    }

    .divtoggle {
        display: inline-block;
    }

}

/*Styling for all containers located in grid layouts*/
.card {
    margin: 2%;
    padding: 3%;
    border: 2px solid black;
    border-radius: 8px;
    overflow: hidden;
    height: fit-content;
}

.card:hover {

    transition: 1s;
    
    box-shadow:
    2.2px 2.5px 13.8px rgba(0, 0, 0, 0.082),
    5.7px 6.2px 33.3px rgba(0, 0, 0, 0.117),
    11.2px 12.2px 62.6px rgba(0, 0, 0, 0.145),
    20.6px 22.6px 111.7px rgba(0, 0, 0, 0.173),
    39.6px 43.3px 208.9px rgba(0, 0, 0, 0.208),
    96px 105px 500px rgba(0, 0, 0, 0.29);

}

/*Responsive scaling for images*/
img {
    max-width: 100%;
    height: auto;
}

/*Text styling*/
p {
    font-family: "Rubik", sans-serif;
    font-weight: 400;
    font-size: 18px;

}

a {
    font-family: "Rubik", sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-decoration: none;
    
}

a:hover {
    color: #FF0000;
    transition: 0.5s;
}

h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    font-size: 400%;
}

h2{
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-size: 150%;
    margin-left: 2%;
}

h3{
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
}

.projectsTitle {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-size: 200%;
}

.projectsIntro {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-size: 300%;
    margin-bottom: 3%;
    margin-left: 1.5%;
}

/*Footer styling*/
footer {
    border-top: 2px solid black;
    text-align: center;
    padding: 5px;
    margin-top: 10%;
}

/*Fancy Button*/
.learnMore {
    display: inline-block;
    background: white;
    border: 2px solid black;
    border-radius: 15px;
    text-decoration: none;
    padding: 1em;
}

.learnMore:hover {
    color: white;
    background: darkgray;
    transition: 0.5s;
}

.error404 {
    position: fixed;
    inset: 0px;
    width: 30%;
    height: 30%;
    max-width: 100vw;
    max-height: 100dvh;
    margin: auto;
    border: 2px solid black;
    border-radius: 8px;
    padding: 2%;
}

.contact {
    position: fixed;
    inset: 0px;
    width: 20%;
    height: 20%;
    max-width: 100vw;
    max-height: 100dvh;
    margin: auto;
    border: 2px solid black;
    border-radius: 8px;
    padding: 2%;
}

.codetext {
    font-family: "Spline Sans Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
}

.container {
    display: flex;
}

/*Change colour schemes if theme is set to dark mode*/
@media (prefers-color-scheme: dark) {

    body {
        background: #25252A;
    }

    .card {
        background: #2D2F3D;
        border: 2px solid #5F5F7F;
;
    }

    a {
        color: white;
    }

    p {
        color: white;
    }

    h1 {
        color: white;
    }

    h2{
        color: white;
    }


    h3 {
        color: white;
    }

    .navbar {
        border-bottom: 2px solid #5F5F7F;
    }

    .logo {
        filter: invert(1);
    }

    footer {
        border-top: 2px solid #5F5F7F;
    }

    .learnMore {
        display: inline-block;
        background: #4E4B76;
        border: 2px solid #5F5F7F;
        border-radius: 40px;
        text-decoration: none;
        padding: 0.7em;
    }
    
    .dropdown a {
        display: inline-block;
        background: #4E4B76;
        border: 2px solid #5F5F7F;
        border-radius: 40px;
        text-decoration: none;
        padding: 0.7em;
        margin: 0.5em;
    }

    .dropdownButton {
        border: 2px solid #5F5F7F;
        background: #2D2F3D;
        color: white;
    }

    .learnMore:hover {
        color: white;
        background: #7C7C98;
    }

    .dropdown {
        border-bottom: 2px solid #5F5F7F;
        background: #2D2F3D;
        
    }

    .content {
        border-bottom: 2px solid #5F5F7F;
    }

    .contentAlternative {
        border-bottom: 2px solid #5F5F7F;
        background: #2D2F3D;
    }

    .error404 {
        background: #2D2F3D;
        border: 2px solid #5F5F7F;
    }

    .contact {
        background: #2D2F3D;
        border: 2px solid #5F5F7F;
    }

}