Редизайн в необрутализм

1 files changed, 1151 insertions, 0 deletions

diff --git a/neo.css b/neo.css
new file mode 100644
index 0000000..5b48401
--- /dev/null
+++ b/neo.css
@@ -0,0 +1,1151 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box
+}
+
+html {
+    font-family: Arial, sans-serif
+}
+
+.container{
+
+    display: flex;
+
+    flex-direction: row;
+
+    justify-content: flex-start;
+
+    padding: 20px;
+}
+
+.nb-button.default {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #fff;
+    color: #000;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    border: 2px solid #000000;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    transition: box-shadow 0.2s ease, transform 0.1s ease
+}
+
+.nb-button.default:hover {
+    box-shadow: 3px 3px 0px #000000;
+    background-color: #aaa
+}
+
+.nb-button.default:focus {
+    outline-color: transparent
+}
+
+.nb-button.default.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-button.orange {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #ff5733;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    border: 2px solid #000000;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    transition: box-shadow 0.2s ease, transform 0.1s ease
+}
+
+.nb-button.orange:hover {
+    box-shadow: 3px 3px 0px #000000;
+    background-color: #d64b2b
+}
+
+.nb-button.orange:focus {
+    outline-color: transparent
+}
+
+.nb-button.orange.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-button.blue {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #0077b6;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    border: 2px solid #000000;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    transition: box-shadow 0.2s ease, transform 0.1s ease
+}
+
+.nb-button.blue:hover {
+    box-shadow: 3px 3px 0px #000000;
+    background-color: #005785
+}
+
+.nb-button.blue:focus {
+    outline-color: transparent
+}
+
+.nb-button.blue.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-button.green {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #40d39c;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    border: 2px solid #000000;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    transition: box-shadow 0.2s ease, transform 0.1s ease
+}
+
+.nb-button.green:hover {
+    box-shadow: 3px 3px 0px #000000;
+    background-color: #30ac7e
+}
+
+.nb-button.green:focus {
+    outline-color: transparent
+}
+
+.nb-button.green.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-button.sky-blue {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #b9e2f8;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    border: 2px solid #000000;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    transition: box-shadow 0.2s ease, transform 0.1s ease
+}
+
+.nb-button.sky-blue:hover {
+    box-shadow: 3px 3px 0px #000000;
+    background-color: #91bed6
+}
+
+.nb-button.sky-blue:focus {
+    outline-color: transparent
+}
+
+.nb-button.sky-blue.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-button.pale-red {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #ffc5c8;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    border: 2px solid #000000;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    transition: box-shadow 0.2s ease, transform 0.1s ease
+}
+
+.nb-button.pale-red:hover {
+    box-shadow: 3px 3px 0px #000000;
+    background-color: #ffb2b2
+}
+
+.nb-button.pale-red:focus {
+    outline-color: transparent
+}
+
+.nb-button.pale-red.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-button.pale-violet {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #bc98cb;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    border: 2px solid #000000;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    transition: box-shadow 0.2s ease, transform 0.1s ease
+}
+
+.nb-button.pale-violet:hover {
+    box-shadow: 3px 3px 0px #000000;
+    background-color: #b482c9
+}
+
+.nb-button.pale-violet:focus {
+    outline-color: transparent
+}
+
+.nb-button.pale-violet.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-button.soft-blue {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #4799ae;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    border: 2px solid #000000;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    transition: box-shadow 0.2s ease, transform 0.1s ease
+}
+
+.nb-button.soft-blue:hover {
+    box-shadow: 3px 3px 0px #000000;
+    background-color: #378589
+}
+
+.nb-button.soft-blue:focus {
+    outline-color: transparent
+}
+
+.nb-button.soft-blue.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-button.pale-cyan {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #b9e7de;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    border: 2px solid #000000;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    transition: box-shadow 0.2s ease, transform 0.1s ease
+}
+
+.nb-button.pale-cyan:hover {
+    box-shadow: 3px 3px 0px #000000;
+    background-color: #a0e5d7
+}
+
+.nb-button.pale-cyan:focus {
+    outline-color: transparent
+}
+
+.nb-button.pale-cyan.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-button.pale-yellow {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #fdfd96;
+    color: #000;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    border: 2px solid #000000;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    transition: box-shadow 0.2s ease, transform 0.1s ease
+}
+
+.nb-button.pale-yellow:hover {
+    box-shadow: 3px 3px 0px #000000;
+    background-color: #fcfc7e
+}
+
+.nb-button.pale-yellow:focus {
+    outline-color: transparent
+}
+
+.nb-button.pale-yellow.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.rounded {
+    border-radius: 9999px
+}
+
+.nb-input.default {
+    padding: 10px;
+    background-color: #fff;
+    color: #000;
+    border: 2px solid #ccc;
+    border-radius: 0.25rem;
+    box-shadow: 2px 2px 0px 0px #000;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.2s ease
+}
+
+.nb-input.default:hover {
+    background-color: #aaa
+}
+
+.nb-input.default:focus {
+    outline-color: transparent;
+    border-color: #aaa
+}
+
+.nb-input.default.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-input.default::placeholder {
+    color: #000;
+    opacity: 1;
+    text-align: left
+}
+
+.nb-input.orange {
+    padding: 10px;
+    background-color: #ff5733;
+    color: #000;
+    border: 2px solid #000;
+    border-radius: 0.25rem;
+    box-shadow: 2px 2px 0px 0px #000;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.2s ease
+}
+
+.nb-input.orange:hover {
+    background-color: #d64b2b
+}
+
+.nb-input.orange:focus {
+    outline-color: transparent;
+    border-color: #d64b2b
+}
+
+.nb-input.orange.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-input.orange::placeholder {
+    color: #000;
+    opacity: 1;
+    text-align: left
+}
+
+.nb-input.blue {
+    padding: 10px;
+    background-color: #0077b6;
+    color: #fff;
+    border: 2px solid #000;
+    border-radius: 0.25rem;
+    box-shadow: 2px 2px 0px 0px #000;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.2s ease
+}
+
+.nb-input.blue:hover {
+    background-color: #005785
+}
+
+.nb-input.blue:focus {
+    outline-color: transparent;
+    border-color: #005785
+}
+
+.nb-input.blue.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-input.blue::placeholder {
+    color: #fff;
+    opacity: 1;
+    text-align: left
+}
+
+.nb-input.green {
+    padding: 10px;
+    background-color: #40d39c;
+    color: #fff;
+    border: 2px solid #000;
+    border-radius: 0.25rem;
+    box-shadow: 2px 2px 0px 0px #000;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.2s ease
+}
+
+.nb-input.green:hover {
+    background-color: #30ac7e
+}
+
+.nb-input.green:focus {
+    outline-color: transparent;
+    border-color: #30ac7e
+}
+
+.nb-input.green.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-input.green::placeholder {
+    color: #fff;
+    opacity: 1;
+    text-align: left
+}
+
+.nb-input.sky-blue {
+    padding: 10px;
+    background-color: #b9e2f8;
+    color: #fff;
+    border: 2px solid #000;
+    border-radius: 0.25rem;
+    box-shadow: 2px 2px 0px 0px #000;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.2s ease
+}
+
+.nb-input.sky-blue:hover {
+    background-color: #91bed6
+}
+
+.nb-input.sky-blue:focus {
+    outline-color: transparent;
+    border-color: #91bed6
+}
+
+.nb-input.sky-blue.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-input.sky-blue::placeholder {
+    color: #fff;
+    opacity: 1;
+    text-align: left
+}
+
+.nb-input.pale-red {
+    padding: 10px;
+    background-color: #ffc5c8;
+    color: #fff;
+    border: 2px solid #000;
+    border-radius: 0.25rem;
+    box-shadow: 2px 2px 0px 0px #000;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.2s ease
+}
+
+.nb-input.pale-red:hover {
+    background-color: #ffb2b2
+}
+
+.nb-input.pale-red:focus {
+    outline-color: transparent;
+    border-color: #ffb2b2
+}
+
+.nb-input.pale-red.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-input.pale-red::placeholder {
+    color: #fff;
+    opacity: 1;
+    text-align: left
+}
+
+.nb-input.pale-violet {
+    padding: 10px;
+    background-color: #bc98cb;
+    color: #fff;
+    border: 2px solid #000;
+    border-radius: 0.25rem;
+    box-shadow: 2px 2px 0px 0px #000;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.2s ease
+}
+
+.nb-input.pale-violet:hover {
+    background-color: #b482c9
+}
+
+.nb-input.pale-violet:focus {
+    outline-color: transparent;
+    border-color: #b482c9
+}
+
+.nb-input.pale-violet.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-input.pale-violet::placeholder {
+    color: #fff;
+    opacity: 1;
+    text-align: left
+}
+
+.nb-input.soft-blue {
+    padding: 10px;
+    background-color: #4799ae;
+    color: #fff;
+    border: 2px solid #000;
+    border-radius: 0.25rem;
+    box-shadow: 2px 2px 0px 0px #000;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.2s ease
+}
+
+.nb-input.soft-blue:hover {
+    background-color: #378589
+}
+
+.nb-input.soft-blue:focus {
+    outline-color: transparent;
+    border-color: #378589
+}
+
+.nb-input.soft-blue.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-input.soft-blue::placeholder {
+    color: #fff;
+    opacity: 1;
+    text-align: left
+}
+
+.nb-input.pale-cyan {
+    padding: 10px;
+    background-color: #b9e7de;
+    color: #fff;
+    border: 2px solid #000;
+    border-radius: 0.25rem;
+    box-shadow: 2px 2px 0px 0px #000;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.2s ease
+}
+
+.nb-input.pale-cyan:hover {
+    background-color: #a0e5d7
+}
+
+.nb-input.pale-cyan:focus {
+    outline-color: transparent;
+    border-color: #a0e5d7
+}
+
+.nb-input.pale-cyan.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-input.pale-cyan::placeholder {
+    color: #fff;
+    opacity: 1;
+    text-align: left
+}
+
+.nb-input.pale-yellow {
+    padding: 10px;
+    background-color: #fdfd96;
+    color: #000;
+    border: 2px solid #000;
+    border-radius: 0.25rem;
+    box-shadow: 2px 2px 0px 0px #000;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.2s ease
+}
+
+.nb-input.pale-yellow:hover {
+    background-color: #fcfc7e
+}
+
+.nb-input.pale-yellow:focus {
+    outline-color: transparent;
+    border-color: #fcfc7e
+}
+
+.nb-input.pale-yellow.disabled {
+    background-color: #ccc;
+    cursor: not-allowed
+}
+
+.nb-input.pale-yellow::placeholder {
+    color: #000;
+    opacity: 1;
+    text-align: left
+}
+
+.text-black {
+    color: #000
+}
+
+.text-white {
+    color: #fff
+}
+
+.text-red {
+    color: #dc341e
+}
+
+.text-orange {
+    color: #ff5733
+}
+
+.text-blue {
+    color: #0077b6
+}
+
+.text-green {
+    color: #40d39c
+}
+
+.text-sky-blue {
+    color: #b9e2f8
+}
+
+.text-pale-red {
+    color: #ffc5c8
+}
+
+.text-pale-violet {
+    color: #bc98cb
+}
+
+.text-soft-blue {
+    color: #4799ae
+}
+
+.text-pale-cyan {
+    color: #b9e7de
+}
+
+.text-pale-yellow {
+    color: #fdfd96
+}
+
+.bg-black {
+    background-color: #000
+}
+
+.bg-white {
+    background-color: #fff
+}
+
+.bg-red {
+    background-color: #dc341e
+}
+
+.bg-orange {
+    background-color: #ff5733
+}
+
+.bg-blue {
+    background-color: #0077b6
+}
+
+.bg-green {
+    background-color: #40d39c
+}
+
+.bg-sky-blue {
+    background-color: #b9e2f8
+}
+
+.bg-pale-red {
+    background-color: #ffc5c8
+}
+
+.bg-pale-violet {
+    background-color: #bc98cb
+}
+
+.bg-soft-blue {
+    background-color: #4799ae
+}
+
+.bg-pale-cyan {
+    background-color: #b9e7de
+}
+
+.bg-pale-yellow {
+    background-color: #fdfd96
+}
+
+.dialog {
+    background: #fff;
+    border-radius: 20px;
+    filter: drop-shadow(4px 4px 0px #000);
+    padding: 20px;
+    border: 3px solid #000;
+    width: 20rem
+}
+
+.dialog p {
+    font-size: 18px
+}
+
+.button-container {
+    display: flex;
+    text-align: right
+}
+
+.marquee {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 2px solid black;
+    font-weight: bold;
+    position: relative
+}
+
+.marquee .marquee-content {
+    animation: marquee 10s linear infinite
+}
+
+.marquee .marquee-content span {
+    display: inline-block;
+    padding: 0 20px;
+    font-size: 24px
+}
+
+@keyframes marquee {
+    0% {
+        transform: translateX(100%)
+    }
+
+    100% {
+        transform: translateX(-100%)
+    }
+}
+.presentation {
+    font-family: Proza Libre, sans-serif;
+    border: 3px solid #000000;
+    display: flex;
+    height: 85vh;
+    border-radius: 1.5rem;
+    background-color: #ffc0cb;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 0 10%;
+}
+
+.description {
+    margin: 10px;
+    line-height: 1.5rem;
+    font-size: 1rem;
+}
+
+.card {
+    width: 450px;
+    margin: 20px;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 3px solid #000;
+    box-shadow: -3px 3px 0px #000000;
+    transition: box-shadow 0.2s ease, transform 0.2s ease
+}
+
+.card:hover {
+    box-shadow: 0px 0px 0px #000000;
+    transform: translate(-6px, 6px)
+}
+
+.card a {
+    margin: 0;
+    text-decoration: none;
+    color: inherit
+}
+
+.card-thumbnail img {
+    width: 100%;
+    height: auto
+}
+
+.card-content {
+    padding: 16px
+}
+
+.text-small {
+    font-size: 14px;
+    color: #888
+}
+
+.card-content div {
+    font-size: 16px;
+    line-height: 1.5;
+    color: #333
+}
+
+.card-content strong {
+    cursor: pointer
+}
+
+.avatar {
+    overflow: hidden;
+    width: 67px;
+    height: 67px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid #000;
+    border-radius: 50%;
+    box-shadow: 2px 2px 0 0 #031926
+}
+
+.avatar img {
+    border: 0;
+    max-width: 100%;
+    vertical-align: middle;
+    display: inline-block
+}
+
+.nb-label {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-family: "Public Sans", sans-serif;
+    font-size: 1rem;
+    color: black;
+    text-transform: uppercase
+}
+
+input.nb-checkbox {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    background-color: #fff;
+    border: 2px solid black;
+    border-radius: 4px;
+    cursor: pointer
+}
+
+input.nb-checkbox:checked {
+    background-color: #007bff;
+    color: #fff
+}
+
+input.nb-checkbox:checked::before {
+    content: "x";
+    font-weight: bold;
+    color: inherit;
+    left: 5px;
+    position: relative;
+    top: 0px;
+    font-size: 18px;
+    text-align: center
+}
+
+.badge {
+    width: fit-content;
+    padding: 5px;
+    border: 2px solid #000;
+    border-radius: 50px;
+    box-shadow: 3px 3px 0 0 #000
+}
+
+.badge .badge-inner {
+    display: flex;
+    height: 100%;
+    margin: 0;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid #000;
+    border-radius: 50px
+}
+
+.badge .badge-inner .badge-text {
+    padding: 10px;
+    margin: 0
+}
+
+#modal {
+    display: none
+}
+
+#modal:checked~.modal,
+#modal:checked~.modal-background {
+    display: block
+}
+
+.modal-background {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: none;
+    z-index: 9998
+}
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    display: none;
+    width: 300px;
+    height: 300px;
+    background-color: #fff;
+    box-sizing: border-box;
+    z-index: 9999
+}
+
+.modal>p {
+    padding: 15px;
+    margin: 0
+}
+
+.modal-header {
+    background-color: #f9f9f9;
+    border-bottom: 1px solid #dddddd;
+    box-sizing: border-box;
+    height: 50px
+}
+
+.modal-header h3 {
+    margin: 0;
+    box-sizing: border-box;
+    padding-left: 15px;
+    line-height: 50px;
+    color: #4d4d4d;
+    font-size: 16px;
+    display: inline-block
+}
+
+.modal-header label {
+    box-sizing: border-box;
+    border-left: 1px solid #dddddd;
+    float: right;
+    line-height: 50px;
+    padding: 0 15px 0 15px;
+    cursor: pointer
+}
+
+.modal-header label:hover img {
+    opacity: 0.6
+}
+
+.alert.success {
+    background-color: #92fca2;
+    border: 1px solid #40d39c;
+    padding: 0.1rem;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+    text-align: center;
+    font-size: 1.2rem;
+    font-weight: bold;
+    box-shadow: 2px 2px 0px #000
+}
+
+.alert.error {
+    background-color: #ffc5c8;
+    border: 1px solid #dc341e;
+    padding: 0.1rem;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+    text-align: center;
+    font-size: 1.2rem;
+    font-weight: bold;
+    box-shadow: 2px 2px 0px #000
+}
+
+.alert.warning {
+    background-color: #f8f894;
+    border: 1px solid #fdfd96;
+    padding: 0.1rem;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+    text-align: center;
+    font-size: 1.2rem;
+    font-weight: bold;
+    box-shadow: 2px 2px 0px #000
+}
+
+.alert.info {
+    background-color: #d5f0ff;
+    border: 1px solid #b9e2f8;
+    padding: 0.1rem;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+    text-align: center;
+    font-size: 1.2rem;
+    font-weight: bold;
+    box-shadow: 2px 2px 0px #000
+}
+
+.accordion-tab {
+    position: absolute;
+    opacity: 0;
+    z-index: -1
+}
+
+.accordion {
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 2px 2px 0px black;
+    border: 1px solid black
+}
+
+.accordion-label {
+    display: flex;
+    padding: 1em;
+    font-weight: bold;
+    cursor: pointer;
+    color: #fff
+}
+
+.accordion-content {
+    max-height: 0;
+    padding: 0 1em;
+    background: white;
+    transition: all 0.35s
+}
+
+.accordion-tab:checked~.accordion-content {
+    max-height: 100vh;
+    padding: 1em
+}
+
+.dropdown {
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 2px 2px 0px black;
+    border: 1px solid black;
+    padding: 10px;
+    cursor: pointer
+}
+
+.dropdown::after {
+    content: '\25BC';
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%)
+}
+
+.dropdown option {
+    background-color: #fff;
+    color: #333;
+    box-shadow: 2px 2px 0px black;
+    border: 1px solid black;
+    padding: 10px
+}
+
+.dropdown:focus {
+    outline: none;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
+}
\ No newline at end of file