* {
    padding: 0;
    margin: 0;
}

body {
    display: grid;
    grid-template-areas:
        "header header header header header"
        "menu main main main block"
        "menu main main main block"
        "menu contact contact contact block"
        "footer footer footer footer footer";
    gap: 10px;
    height: 100vh;
    background-color: black;
    color: white;
    padding: 10px;

    font-family: Verdana, Geneva, Tahoma, sans-serif;
    overflow-y: scroll;
    user-select: none;
}

a {
    text-decoration: none;
}

header {
    grid-area: header;
    height: 10vh;
    background: linear-gradient(120deg, rgb(17, 17, 17) 0%, rgb(53, 46, 46) 60%, rgb(41, 41, 41) 100%);
    background: url(grafitti.jpg) repeat;
    border-radius: 10px;

    font-size: 1.2rem;
    line-height: 10vh;
    text-align: center;
    text-shadow: -5px 0 black, 0 5px black, 5px 0 black, 0 -5px black;
}

header a {
    color: white;
    /* -webkit-text-stroke: 3px black; */
}

menu {
    grid-area: menu;
    background: linear-gradient(120deg, rgb(17, 17, 17) 0%, rgb(53, 46, 46) 60%, rgb(41, 41, 41) 100%);
    padding: 20px;

    border-radius: 10px;
}

menu button {
    width: 90%;
    height: 50px;
    margin: 20px auto;
}

menu button:hover {
    cursor: pointer;
}

button {
    background-image: url(graffiti-balckwhite.webp);
    background-color: rgba(255, 255, 255, 0.7);
    /* background-blend-mode: lighten; */
    border-radius: 5px;
    
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    color: white;
    font-weight: bolder;
    font-size: 1rem;
}

button a {
    color: white;
    font-weight: bolder;
    font-size: 1rem;
}

main {
    grid-area: main;
    width: 60vw;
}

form {
    background: linear-gradient(120deg, rgba(75, 75, 75, 1) 0%, rgb(100, 95, 95) 60%, rgba(147, 147, 147, 1) 100%);
    border-radius: 10px;
    padding: 10px;
}

fieldset {
    display: inline-block;
    width: 40%;
    margin: 10px;
    padding: 20px;
    border-radius: 5px;

    text-align: left;
}

textarea {
    font-size: 1rem;
    width: 90%;
    padding: 5px;
    margin: 2px;
}

input[type=text],
input[type=number],
input[type=email] {
    float: center;
    width: 50%;
    height: 15px;
    padding: 1px;
}

label {
    line-height: 15px;
    margin: 100px 0;
}

input[type=range] {
    margin-bottom: 20px;
}

input[type=button] {
    width: 30%;
    margin: 2px auto;
}

input[type=radio] {
    margin: auto;
}

.vecka {
    margin: auto;
}

.reset, .submit{
    width: 50px !important;
}

section {
    background: linear-gradient(120deg, rgba(34, 34, 34, 1) 0%, rgb(48, 43, 43) 75%, rgba(65, 65, 65, 1) 100%);
    text-align: center;
    padding: 20px;

    border-radius: 10px;
}

section button {
    width: 30%;
    height: 15%;
}


video {
    width: 90%;
    border-radius: 10px;
}

section img {
    display: block;
    width: 100%;
    margin: auto;
}

h3,
p {
    margin-bottom: 10px;
}

div+div {
    margin-top: 40px;
}

section+section {
    margin-top: 10px;
}

contact {
    grid-area: contact;
}

contact img {
    width: 15%;
}

contact section {
    margin: 0;
}

iframe {
    width: 90%;
    margin-bottom: 20px;
}

block {
    grid-area: block;
    height: 100%;
}

footer {
    grid-area: footer;
    height: 10vh;
    background: linear-gradient(120deg, rgb(17, 17, 17) 0%, rgb(53, 46, 46) 60%, rgb(41, 41, 41) 100%);
    background: url(grafitti.jpg) repeat;
    border-radius: 10px;

    text-align: center;
    line-height: 10vh;
    text-shadow: -1px 0 black, 1px 0 black, 1px 0 black, -1px 0 black;
}

footer p {
    width: 100%;
}

.day-selected {
    background-color: rgb(192, 171, 171);
}

/* ----- ------ */
/* MEDIA SCREEN */
/* ----- ------ */
@media screen and (max-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
    }

    nav {
        display: flex;
        justify-content: center;
        height: 15px;
        background-color: rgb(80, 80, 80);
        padding: 5px;
        border-radius: 5px;
        background: linear-gradient(120deg, rgba(75, 75, 75, 1) 0%, rgb(100, 95, 95) 60%, rgba(147, 147, 147, 1) 100%);

    }

    nav img {
        height: 100%;
        aspect-ratio: 1/1;
    }

    menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        width: 70%;
        top: 17%;
        background-color: rgb(60, 60, 60);
        padding: 10px;
        margin: 5px;

        border: solid grey 5px;
        border-radius: 0;
        border-bottom-right-radius: 10px;

        z-index: 100;
    }

    menu button {
        width: 100%;
        height: 40px;
        background-color: rgb(200, 200, 200);
        margin: 5px auto;
        border-bottom: solid black 3px;
        border-right: solid black 2px;
    }

    main {
        width: 100%;
    }

    fieldset {
        width: 70%;
    }
}

/* ---------- */
/* ANIMATIONS */
/* ---------- */
/* classes */
.body-load {
    animation: bodyLoadAnim 500ms;
}

.click {
    animation: clickAnim 250ms;
}

.menu-entry {
    animation: menuEntryAnim 500ms;
}

.menu-exit {
    animation: menuExitAnim 500ms;
}

.form-entry {
    animation: formEntryAnim 250ms;
}

.form-exit {
    animation: formExitAnim 250ms;
}

/* keyframes */
@keyframes bodyLoadAnim {
    0% {
        opacity: 0;
        transform: scale(1, 0.5) translateY(-800px);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1) translateY(0);
    }
}

@keyframes clickAnim {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes menuEntryAnim {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes menuExitAnim {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

@keyframes formEntryAnim {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes formExitAnim {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


.hidden {
    display: none;
    visibility: hidden;
}