style.css

/* Font: Inter */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('./src/fonts/inter-v12-latin-ext_latin-600.eot');
    src: local(''), url('./src/fonts/inter-v12-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./src/fonts/inter-v12-latin-ext_latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('./src/fonts/inter-v12-latin-ext_latin-600.woff') format('woff'), /* Modern Browsers */
    url('./src/fonts/inter-v12-latin-ext_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./src/fonts/inter-v12-latin-ext_latin-600.svg#Inter') format('svg');
    /* Legacy iOS */
    font-display: swap;
}


/* Font: Quicksand */

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    src: url('./src/fonts/quicksand-v30-latin-600.eot');
    /* IE9 Compat Modes */
    src: local(''), url('./src/fonts/quicksand-v30-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./src/fonts/quicksand-v30-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('./src/fonts/quicksand-v30-latin-600.woff') format('woff'), /* Modern Browsers */
    url('./src/fonts/quicksand-v30-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./src/fonts/quicksand-v30-latin-600.svg#Quicksand') format('svg');
    /* Legacy iOS */
    font-display: swap;
}

:root {
    --background-color: #0f0f0f;
    --accent-color: #282a35;
    --text-color: #ffffff;
    --nav-hover-color: #383a45;
}

* {
    color: var(--text-color);
}

html,
body {
    background-color: var(--background-color);
    margin: 0;
    scroll-behavior: smooth;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--accent-color);
    color: var(--text-color);
    font-family: "Quicksand";
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    float: left;
}

nav li a,
nav li span {
    display: block;
    color: white;
    text-align: center;
    padding: 1rem 1rem;
    text-decoration: none;
}

nav li a:hover:not(.active):not(.no_action) {
    background-color: var(--nav-hover-color);
}

.nav_float_right {
    float: right;
}

nav>ul>li>a>i {
    font-size: 100%;
}

#notenapp-logo {
    background-image: url("/src/images/logo-108p.webp");
    background-size: contain;
    width: 3.25rem;
    aspect-ratio: 1/1;
}


/* 
Main content
*/

main {
    font-family: "Inter";
}

#centered_slogan {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 0 10vw;
}

#centered_slogan span {
    background-image: linear-gradient(45deg, #3333ff, #ff6666);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: min(10vmin, 5.5rem);
}

.main_row {
    /* width: 80vw; */
    min-height: 20vh;
    padding: 0 min(100px, 10vw);
    display: grid;
    grid-template-rows: 1fr;
    grid-auto-rows: 1fr;
    gap: 0 2rem;
    grid-auto-flow: row;
    margin-top: 2rem;
}

.main_row_text_left {
    grid-template-columns: 2.5fr 2fr;
    grid-template-areas: "main_row_text main_row_image";
}

.main_row_text_right {
    grid-template-columns: 2fr 2.5fr;
    grid-template-areas: "main_row_image main_row_text";
}

.main_row_text {
    grid-area: main_row_text;
    display: grid;
    place-items: center;
}

.main_row_image {
    grid-area: main_row_image;
}

.main_row_text_title {
    font-size: 3rem;
    color: #ffffff;
}

.main_row_text_text {
    color: #888888;
    padding-top: 1.5rem;
    display: block;
    font-size: 1.5rem;
}

.main_row_text_text strong {
    color: #ffffff;
}

.main_row_image img {
    width: 100%;
}

#main_end_buttons {
    width: 100%;
    min-height: 20vh;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    margin: 10vh 0 5vh 0;
    text-align: center;
    padding: 0 10vw;
}

.main_end_buttons_title {
    font-size: 2.5rem;
    background-image: linear-gradient(90deg, #ff6666, #b88e03);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main_end_button_icon {
    display: flex;
    place-items: center;
}

.main_end_button {
    margin-top: 1rem;
    display: flex;
    border: 3px solid var(--accent-color);
    border-radius: 1rem;
    font-size: 2rem;
    cursor: pointer;
    transition: 0.25s;
}

.main_end_button:hover,
.main_end_button:focus {
    filter: drop-shadow(0.25rem 0.25rem 0.5rem #444) brightness(2);
    transform: scale(1.05);
}

.main_end_button div {
    padding: 1.5rem;
}


/* 
Footer content
*/

footer {
    width: 100%;
    background-color: var(--accent-color);
    padding-top: min(4vh, 40px);
    font-family: "Quicksand";
    padding-bottom: 5vh;
}

.footer_row {
    padding: min(4vh, 40px);
    width: 75%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "footer_column_left footer_column_center footer_column_right";
}

.footer_column_left {
    grid-area: footer_column_left;
}

.footer_column_center {
    grid-area: footer_column_center;
}

.footer_column_right {
    grid-area: footer_column_right;
}

.footer_column_title {
    text-align: center;
    font-size: 1.5rem;
    padding-bottom: 1rem;
}

.footer_column,
.footer_column li {
    text-align: center;
    padding: 0;
}

.footer_column ul {
    font-family: "Quicksand";
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 0.25rem;
    overflow: hidden;
}

.footer_copyright_notice {
    text-align: center;
    padding-top: 1.5rem;
}

#footer_imprint_note a {
    margin: 0.25rem 0;
    display: inline-block;
}

#footer_contactform textarea,
#footer_contactform input {
    display: block;
    width: 80%;
    height: 1.5rem;
    margin: auto;
    border: 0;
    background-color: var(--accent-color);
}

#footer_contactform textarea {
    height: 2rem;
    border-width: 2px;
    resize: vertical;
}

#footer_contactform input {
    border-bottom: var(--nav-hover-color) 1px solid;
    border-width: 0 0 2px 0;
}

#footer_contactform textarea:focus,
#footer_contactform input:focus {
    outline: 0;
    border-style: solid;
    border-image-source: linear-gradient(90deg, #b88e03, #118a2b);
    border-image-slice: 1;
}

#footer_contactform input[type="submit"] {
    border-radius: 0;
    height: 2rem;
    cursor: pointer;
}

#footer_contactform input[type="submit"]:hover {
    border-radius: 0.5rem;
    background-image: linear-gradient(90deg, #118a2b, #3333ff);
}


/* 
Small device adjustments
*/

@media screen and (max-width: 1100px) {
    #centered_slogan {
        margin-top: 3.5rem;
        min-height: 45vh;
    }
    .main_row_text_left {
        gap: 1rem;
        grid-template-columns: 1fr;
        grid-template-rows: min-content;
        grid-template-areas: "main_row_image" "main_row_text";
    }
    .main_row_text_right {
        gap: 1rem;
        grid-template-columns: 1fr;
        grid-template-rows: min-content;
        grid-template-areas: "main_row_text" "main_row_image";
    }
    .main_row_text {
        place-items: inherit;
    }
    #mobile_display_divider {
        width: 100%;
        height: 4px;
        background-color: var(--accent-color);
        margin-top: 5rem;
        margin-bottom: 5rem;
    }
}

@media screen and (max-width: 900px) {
    .footer_row {
        margin: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content;
        grid-auto-rows: 1fr;
        gap: 3rem;
        grid-auto-flow: row;
        grid-template-areas: "footer_column_left footer_column_center" "footer_column_right footer_column_right";
    }
    .footer_column_left>ul>li,
    .footer_column_title_left {
        text-align: start;
    }
    .footer_column_center>ul>li,
    .footer_column_title_center {
        text-align: end;
    }
    #footer_contactform textarea,
    #footer_contactform input {
        width: 100%;
    }
    .footer_copyright_notice {
        margin-top: 3rem;
    }
}

@media screen and (max-width: 600px) {
    .footer_row {
        margin: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content;
        grid-auto-rows: 1fr;
        gap: 3rem;
        grid-auto-flow: row;
        grid-template-areas: "footer_column_left" "footer_column_center" "footer_column_right";
    }
    .footer_column_left>ul>li,
    .footer_column_title_left {
        text-align: center;
    }
    .footer_column_center>ul>li,
    .footer_column_title_center {
        text-align: center;
    }
    #footer_contactform textarea,
    #footer_contactform input {
        width: 100%;
    }
    .footer_copyright_notice {
        margin-top: 3rem;
        padding: 3rem;
    }
    #footer_imprint_note {
        margin: 0.5rem 0;
    }
}

@media screen and (max-width: 500px) {
    .main_row_text_title {
        font-size: 9vmin;
    }
}

@media screen and (max-width: 400px) {
    .main_end_buttons_title {
        font-size: 9vmin;
    }
}