label {
    display: block;
    margin-top: 0.5em;
}

textarea {
    width: 70%;
}

.hidden {
    display: none;
}

.home {
    margin: 0 auto;
    text-align: center;
}
/*
#viewport-container {
    width: 100%;
}

.home-container {
    width: 100%;
    transition: all 1000ms ease 0s;
}
*/

.intro-home {
    font-size: 16px;
}

.presentation h1 {
    font-weight: bolder;
    font-size: 3em;
    color: var(--font-color);
    margin: 0.25em;
}

.intro-home>p {
    /*font-family: Arial, Helvetica, sans-serif;*/
    color: var(--font-color-secondary);
    font-weight: bolder;
    font-size: 1em;
    margin: 0.25em;
    padding: 0 5%;
    overflow-wrap: break-word;
    word-wrap: break-word; 
}

#featured-projects-container {
    position: relative;
    display: flex;
    flex-flow: row wrap-reverse;
    align-items: center;
    justify-content: center;
    width: 80%;
    /*border: 1px solid #444;*/
    border-radius: 5px;
    padding: .5em;
    margin: 0 auto;
    margin-top: 2em;
}

.featured-project {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: .25em .25em;
    padding: 1em 1.5em;
    width: 20em;
    height: 12em;
    overflow-y: auto;
    border-radius: 5px;
    border: 1px dashed var(--color-primary);
}

.featured-project h3 {
    font-weight: bolder;
    color: var(--font-color);
}

.featured-project p {
    overflow-wrap: break-word;
    word-wrap: break-word; 
    color: var(--font-color-secondary);
}

.featured-project:hover {
    background-color: var(--color-secondary);
}

.featured-project:active {
    background-color: var(--color-primary);
}

.project-special-link {
    color: var(--color-secondary);
    text-decoration: none;
}


#viewport-direction-down-presentation {
    margin-top: 2em;
}

.contact {
    margin-top: 3em;
    margin-bottom: 2em;
}

.contact-form * {
    border-radius: 10px;
}

#captcha-container {
    margin: 0 auto;
    width: fit-content;
}

input[type="submit"] {
    padding: 0.5em 1em;
    font-weight: bolder;
    font-size: 0.9em;
}

input[type="submit"]:hover {
    background-color: var(--color-primary);
    /*animation: 0.5s linear 0s 1 alternate changing_size_lighter; */
    
}

input[type="submit"]:active {
    background-color: #aaa;
    color: var(--background-color);
}