@import url(/css/colors.css);
@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Cursive:wght@400..700&display=swap');

:root {
    font-family: Arial, Helvetica, sans-serif
}

.bold {
    font-weight: 800;
}

.big {
    font-size: 5vw;
}

html body {
    background-color: rgb(233, 235, 242);
}

.pagecenter {
    margin: auto;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* Navbar */
.navbar-base {
    width: 100%;
    height: 70px;
    display: flex;

    padding-left: 10px;
    padding-right: 10px;
    align-items: center;

    background-color: white;
    
}

.navbar-link-a, .navbar-link-b, .navbar-link-c {
    transform: skew(-10deg);

    color: black;
    width: 20%;
    height: 100%;
    text-align: center;
    align-self: center;
    border-radius: 5px;
    padding-top: 20px;

    font-size: 20px;
    font-weight: bolder;
    
    transition-duration: 0.1s;
}

.navbar-link-a:hover {
    color: white;
    text-decoration: none;
    transform: skew(-20deg) scale(1.2) translate(10px,10px);
    background-color: var(--theme-primary-a);

    border-radius: 5px;

    transition-duration: 0.2s;
}

.navbar-link-b:hover {
    color: white;
    text-decoration: none;
    transform: skew(-20deg) scale(1.2) translate(10px,10px);
    background-color: var(--theme-primary-b);

    border-radius: 5px;

    transition-duration: 0.2s;
}

.navbar-link-c:hover {
    color: white;
    text-decoration: none;
    transform: skew(-20deg) scale(1.2) translate(10px,10px);
    background-color: var(--theme-primary-c);

    border-radius: 5px;

    transition-duration: 0.2s;
}

.hero {
    background-image: url("../image/bg2.webp"); /* Replace this!!! */
    background-repeat: no-repeat;
    background-size: cover;
    font-family: "Edu NSW ACT Cursive", cursive;
    color: black;

    display: grid;
    justify-content: center;
    align-items: center;
    place-items: center;
    padding: 10%;

    width: 100%;
    height: 100vh;
}

.darkholder {
    padding: 5%;
    padding-top: 10%;
    padding-bottom: 10%;
    display: block;
    background-color: rgb(34, 34, 34);
    color: white;
}

.center {
    display: grid;
    justify-content: center;
    align-items: center;
    place-items: center;
}

input {
    width: 200%;
    padding: 5%;
    align-self: center;
    color: white;
    background-color: rgb(72, 72, 72);
    border-style: solid;
    border-radius: 10px;
    border-color: rgb(108, 108, 108);
    border-width: 1px;

    stroke-width: 0;
}

input:hover {
    border-color: rgb(136, 136, 136);
}

input:focus {
    outline-width: 0;
    border-color: white;
}

.footer {
    background-color: rgb(233, 235, 242);
    padding: 2%;
}

.hidden {
    display: none;
}