@import url(primitive.css);

/*
Different Screen sizes:
0-478px			Smaller smartphones
479-991px		Tablets, larger smartphones
991-1279px      Laptops, larger tablets in landscape, and small desktops
1280px+         Larger Desktops and monitors
*/

/* Sections */
.section_header {
    height: 664px;
    min-height: calc(100vh - 4rem);
    background-color: var(--cl-primary-400);
}
@media screen and (max-width: 991px) {
    .section_header {
        height: 536px;
        min-height: calc(100vh - 12rem);
    }
}
@media screen and (max-width: 478px) {
    .section_header {
        height: auto;
        min-height: auto;
    }
}

/* Text */
.headline_xxl--128px {
    width: 100%;
    height: auto;
    font-size: 128px;
    line-height: 118px;
}
@media screen and (max-width: 991px) {
    .headline_xxl--128px {
        font-size: 96px;
        line-height: 86px;
    }
}
@media screen and (max-width: 478px) {
    .headline_xxl--128px {
        font-size: 80px;
        line-height: 80px;
    }
}

/* Graphics */
.circle_arrow-wrapper {
    width: auto;
    height: 100%;
    display: flex;
    align-items: flex-start;
}
.circle_arrow {
    width: 46px;
    height: 46px;
    border: 2px solid var(--cl-neutral-black);
    border-radius: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--cl-secondary-400);
    color: var(--cl-neutral-black);
    flex-shrink: 0;
}

/* Lists */
.unordered_list {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.unordered_list-item {
    width: auto;
    height: auto;
    list-style-type: none;
}
.unordered_list-item a:hover {
    color: var(--cl-primary-400);
}

/* PHP password-check */
.input_check-wrapper {
    width: 100%;
    height: auto;
}
#input_check {
    width: 100%;
    height: auto;
    max-width: 574px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background-color: var(--cl-secondary-400);
}
#pw {
    width: 100%;
    height: auto;
    padding: 12px 24px;
    font-family: var(--ff-primary);
    font-size: 16px;
    line-height: 100%;
    color: var(--cl-neutral-black);
    background-color: var(--cl-neutral-white);
    border: 2px solid var(--cl-neutral-black);
    border-radius: 0;
}
#pw::placeholder {
    font-family: var(--ff-primary);
    font-size: 16px;
    line-height: 100%;
    color: var(--cl-neutral-800);
}
#input_check button {
    width: auto;
    height: auto;
    padding: 12px 24px;
    border: 2px solid var(--cl-neutral-black);
    color: var(--cl-neutral-black);
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}
#input_check button:hover {
    text-decoration: underline;
}
#input_check button:focus {
    text-decoration: underline;
}
#protected-area {
    width: 100%;
    display: none;
}
@media screen and (max-width: 991px) {
    #input_check {
        width: 100%;
        padding: 24px;
    }
}

/* Project site image-list */
.project_image-list {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    gap: 24px;
}
.image_content--big {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: end;
}
.image_content--big svg {
    display: none;
    width: auto;
    height: auto;
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--cl-neutral-white);
    cursor: pointer;
    mix-blend-mode: difference;
    transition: all 0.25s ease-in-out;
}
.image_content--big svg:hover {
    transform: scale(1.25);
}
.image_content--big img{
    width: 100%;
    height: auto;
}
.image_content--big p {
    width: 100%;
    height: auto;
    padding-top: 8px;
    background-color: var(--cl-secondary-400);
}
.image_content--big video {
    width: 100%;
    height: auto;
    padding: 0 25% 0 25%;
}
.video_content--big {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: stretch;
    aspect-ratio: 16 / 9;
}
#video_cookie-info {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background-color: #ffff00;
}
#video_cookie-info button {
    width: auto;
    height: auto;
    padding: 12px 24px;
    border: 2px solid var(--cl-neutral-black);
    color: var(--cl-neutral-black);
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}
#video_cookie-info button:hover {
    text-decoration: underline;
}
#video_cookie-info button:focus {
    text-decoration: underline;
}
#video {
    width: 100%;
    height: auto;
    display: none;
}
#video iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
@media screen and (max-width: 478px) {
    .image_content--big video {
        padding: 0 12.5% 0 12.5%;
    }
}