@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Instrument+Serif:ital@0;1&display=swap');

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #eee7d8;
    color: #171717;
    font-family: "Space Grotesk", sans-serif;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Login, Signup */

#form-box {
    width: 420px;
    margin: auto;
    padding: 40px;

    background: #faf7ef;
    border: 3px solid #171717;

    box-shadow: 8px 8px 0 #171717;

    display: flex;
    flex-direction: column;
    gap: 16px;

    transform: rotate(-1deg);
}


#form-box label {
    font-family: "Instrument Serif", serif;
    font-size: 48px;
    font-style: italic;
}


input {
    width: 100%;
    padding: 14px;

    background: transparent;

    border: none;
    border-bottom: 2px solid #171717;

    font-size: 16px;
    font-family: inherit;

    outline: none;
}


input:focus {
    background: #fff4bd;
}


button {
    margin-top: 10px;

    padding: 12px 25px;

    background: #171717;
    color: white;

    border: 2px solid #171717;

    font-weight: bold;
    cursor: pointer;

    transition: .2s;
}


button:hover {
    background: #d85d32;
    transform: translate(-3px,-3px);
    box-shadow: 5px 5px 0 #171717;
}


.pagechange {
    color:#49734a;
    text-decoration: underline;
    font-weight:bold;
}


/* Home */

#signout {
    position:absolute;
    top:30px;
    left:30px;
}


#form-box input {
    border-radius:0;
}


table {

    width:85%;
    margin:70px auto;

    border-collapse:collapse;

    background:#faf7ef;

    border:3px solid #171717;

    box-shadow:10px 10px 0 #171717;
}


th {

    background:#171717;
    color:#faf7ef;

    padding:16px;

    font-size:18px;
}


td {

    padding:15px;

    border-bottom:1px solid #aaa;

    text-align:center;

}


tr:hover {

    background:#fff4bd;

}


a {

    color:#171717;

    font-weight:bold;

}


#clicks-count {

    font-size:20px;

}


#webname {

    position:absolute;

    top:30px;
    right:50px;

    font-family:"Instrument Serif";

    font-size:80px;

    transform:rotate(5deg);

}