* {
    box-sizing: border-box;
}

html {
    padding: 0px;
}

body {
    font-family: Inter;
    background-color: #f4f6f9;
    color: #323232;
    padding: 0px;
    padding-top: 75px; /* HACK: fix */
}

h1 {
    font-size: 4em;
}

h2 {
    font-size: 3em;
}

.gretxt {
    color: rgb(0, 190, 0)
}

.yeltxt {
    color: rgb(190, 190, 0)
}

.retxt {
    color: rgb(190, 0, 0)
}

.aretxt {
    color: rgb(95, 0, 0)
}

hr {
    border-radius: 10px;
    border: 3px solid #f4f6f9;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 0px 0px 20px #0004;
}

.header {
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    background: #62f046;
}

.header h1 {
    font-size: 50px;
}

#topbar_things {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 20px;
}

#navbar {
    position: static;
    border-radius: 1000px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #323232;
    text-align: center;
    box-shadow: 0px 0px 20px #0004;
    background: #f4f6f950;
    z-index: calc(1/0);
    transition: box-shadow 0.5s, transform 0.5s;
}

#navbar:hover {
    box-shadow: 0px 0px 40px #0004;
    transform: scale(1.01);
}

#navbar button {
    background-color: transparent;
    font-size: 5mm;
    padding: 10px;
    border-radius: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #323232;
    border: none;
    transition: padding-left 0.5s, padding-right 0.5s, background-color 0.5s;
}

.dropdown button:after {
    content: " ▾";
}

#navbar button:hover:enabled, .dropdown:hover button {
    background-color: #00000021 !important;
}

#navbar button:hover:enabled {
    padding-left: 20px;
    padding-right: 20px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.drop-content-wrapper {
    visibility: hidden;
    position: absolute;
    top: calc(100%);
    left: 0;
    padding-top: 20px;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s;
}

.links {
    width: max-content;
    text-align: left;
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0px 0px 20px #0004;
    background: #f4f6f950;
    transition: box-shadow 0.5s, transform 0.5s;
}

.links:hover {
    transform: scale(1.01);
    box-shadow: 0px 0px 40px #0004;
}

.links a {
    color: #323232;
    text-decoration: none;
    display: block;
    padding: 10px;
    border-radius: 20px;
    transition: padding-left 0.5s, padding-right 0.5s, background-color 0.5s;
}

.links a:hover {
    padding-left: 15px;
    padding-right: 15px;
    background-color: #00000021;
}

.dropdown:hover .drop-content-wrapper {
    visibility: visible;
    opacity: 1;
}

.content {
    margin-left: 200px;
    padding-left: 20px;
}

.leftcolumn {
    float: left;
    width: 200px;
    padding-top: 20px;
}

.borderpic {
    border: 2px solid black;
    border-radius: 5px;
}

.card {
    border-radius: 15px;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 0px 0px 20px #0004;
}

.wrestrict {
    width: 400px;
}

.footer {
    padding: 10px;
    text-align: left;
    background: #ddd;
    margin-top: 10 px;
}

#rcorners {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

p {
    font-size: 1em;
}

input[type="text"] {
    border: none;
    border-radius: 12.5px;
    height: 25px;
    width: 200px;
    text-align: center;
    font-size: 16px;
}

.fancy {
    background-color: transparent;
    font-size: 5mm;
    padding: 10px;
    border-radius: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #323232;
    border: none;
    box-shadow: 0px 0px 20px #0004;
    transition: padding-left 0.5s, padding-right 0.5s, box-shadow 0.5s;
}

.fancy:hover {
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0px 0px 40px #0006;
}

.fancy:active {
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 3px 3px 10px #0004;
}