* {
    color: rgb(230, 230, 230);
    box-sizing: border-box;
    margin: 0px;
    scroll-behavior: smooth;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}



html,
body {
    scroll-behavior: smooth;
    width: 100%;
    background-color: rgb(24, 24, 24);
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

main {
    background-color: rgb(24, 24, 24);
}

h1 {
    font-size: 2em;
    font-family: 'Roboto Mono', monospace;
}

h2 {
    font-size: 1.3em;
    font-family: 'Open Sans', sans-serif;
}

h3 {
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
}

h4 {
    font-size: 0.8em;
    font-family: 'Open Sans', sans-serif;
}

::-webkit-scrollbar {
    width: 0px;
}


::-webkit-scrollbar-track {
    background: rgb(24, 24, 24);
}

::-webkit-scrollbar-thumb {
    background: rgb(170, 164, 164);
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(56, 56, 56);
}

.navbarLinks {
    display: none;
}


.navbar {
    height: 58px;
    width: 100vw;
    padding: 0px 2vw;
    margin-right: 10px;
    position: fixed;
    top: 0;
    background-color: rgb(32, 32, 32);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99999;
}

.navbarLogo {
    font-family: 'Poppins', sans-serif;
    color: rgb(230, 230, 230);
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
}

.hamburgerMenu {
    position: relative;
    /* border: 3px solid rgb(230, 230, 230); */
    width: 70px;
    height: 49px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 10px;
}

.hamburgerMenuWrapDiv {
    width: 50px;
    height: 6px;
    display: flex;
    justify-content: center;
    position: relative;
}

.hamburgerMenuSecondLine {
    width: 50px;
    height: 6px;
    background-color: rgb(230, 230, 230);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    margin: 0px auto;
    position: absolute;
}

.hamburgerMenuFirstLine {
    top: -12px;
}

.hamburgerMenuThirdLine {
    top: 12px
}

.hamburgerMenuThirdLine,
.hamburgerMenuFirstLine {
    width: 50px;
    height: 6px;
    background-color: rgb(230, 230, 230);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    position: absolute;
    margin: 0px auto;
}

.burgerLinks {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    position: fixed;
    z-index: 9999;
    bottom: 100vh;
    left: 0px;
    width: 100vw;
    height: 0px;
    background-color: rgba(25, 25, 25, 0.96);
    transition: bottom 1s ease-in-out;
    -webkit-transition: bottom 1s ease-in-out;
    -moz-transition: bottom 1s ease-in-out;
    -ms-transition: bottom 1s ease-in-out;
    -o-transition: bottom 1s ease-in-out;
    overflow: hidden;
}

.mainContent {
    width: 95vw;
    margin: 0px auto;
    background-color: rgb(24, 24, 24);
}

.firstDivTitle {
    margin-top: 59px;
    color: rgb(230, 230, 230);
    font-family: 'Roboto Mono', monospace;
}

.firstDivLeftParagraph,
.firstDivRightParagraph,
.firstDivToSecondDiv,
.secondDivToFirstDiv {
    margin-top: 3vh;
    font-family: 'Open Sans', sans-serif;
}

.firstDivLeftParagraph>h4 {
    margin-top: 2vh;
}

.firstDivRightParagraph,
.firstDivToSecondDiv {
    margin-top: 7vh;
}

.firstDivRightParagraph>div>h3 {
    margin-top: 2vh;
}

.firstDivToSecondDiv>h3 {
    margin-top: 2vh;
}

.firstDivLeftParagraph>h4 {
    font-size: 1em;
}

.firstDivToSecondDiv>h2 {
    font-size: 1.3em;
}

.firstDivToSecondDiv>h3 {
    font-size: 1em;
}

.secondDivTitle,
.thirdDivTitle,
.fourthDivTitle,
.fifthDivTitle,
.sixthDivTitle {
    margin-top: 6vh;
    margin-bottom: 2vh;
}

.secondDivToFirstDiv {
    margin-top: 5vh;
    margin-bottom: 2vh;
    font-family: 'Open Sans', sans-serif;
}

.secondDivToFirstDiv>h2 {
    font-size: 1em;
}

.secondDivListTopic {
    margin-top: 4vh;
    margin-bottom: 2vh;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;
}

.miniListItem {
    margin-top: 1vh;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
}

.thirdDivWorkDivs {
    margin-bottom: 5vh;
    margin-top: 5vh;
}

.thirdDivNewHouse,
.thirdDivKarlKolb {
    width: 95vw;
    min-height: 120px;
    border-radius: 22px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    -ms-border-radius: 22px;
    -o-border-radius: 22px;
    /* background-image: linear-gradient(145deg, #0D324D, #7F5A83); */
    border: 3px solid rgb(230, 230, 230);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    margin-bottom: 25px;
}

.thirdDivMicrosoft {
    width: 95vw;
    min-height: 120px;
    border-radius: 22px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    -ms-border-radius: 22px;
    -o-border-radius: 22px;
    /* background-image: linear-gradient(129deg, #380036, #068181); */
    border: 3px solid rgb(230, 230, 230);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    margin-bottom: 25px;
}

.thirdDivWorkPlace > * {
    font-family: 'Roboto Mono', monospace;
    text-align: center;
}


.verticalLine {
    display: none;
}

.thirdDivFirstHL,
.thirdDivSecondHL {
    width: 95vw;
    height: 10px;
    margin: 15px auto;
    border-radius: 6px;
    /* background-image: linear-gradient(to right, #2A5470, #4C4177); */
    border: 2px solid rgb(230, 230, 230);
}

.thirdDivFirstHL {
    display: none;
}

.thirdDivMiniListItem {
    margin: 12px 0px;
    font-size: 1.1em;
}

.thirdDivListItem {
    margin: 7px 0px;
    font-size: 1em;
}


.fifthDivSecondWrapperDiv {
    border: 2px solid rgb(230, 230, 230);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    /* background-image: linear-gradient(-45deg, #6d1d1d, #165714, #13267c, #610e4f);
    background-size: 600% 600%;
    animation: gradient 10s ease infinite;
    -webkit-animation: gradient 10s ease infinite; */
    position: relative;
}

.fifthDivThirdWrapperDiv {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin: 5vh 20px;
}

.fifthDivTopLeft {
    font-family: 'Roboto Mono', monospace;
    position: absolute;
    left: 1em;
    top: 1em;
    opacity: 1;
    pointer-events: none;
    font-size: 1.2em;
    transition: opacity 0.2s;
}

.projectSwitch {
    text-align: center;
    font-size: 1em;
    margin-top: 2vh;
    margin-bottom: 2vh;
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}

.fifthDivThirdDiv {
    margin-left: 20px;
    margin-right: 20px;
}

#projectTitle {
    text-align: center;
    font-size: 2.5em;
    margin-top: 2vh;
    margin-bottom: 2vh;
    font-family: 'Roboto Mono', monospace;
}

#projectDescription {
    text-align: center;
    font-size: 1em;
    font-family: 'Roboto Mono', monospace;
}

#projectList {
    padding: 0px;
    font-size: 1em;
    margin-top: 6vh;
    margin-bottom: 4vh;
}

#projectList>li {
    margin: 5vh 0px;
}

#projectList>li>h3 {
    font-family: 'Roboto Mono', monospace;

}

.sixthDivTitle,
.fifthDivTitle {
    margin: 5vh 0px;
}

.sixthDivInfoDiv>ul {
    /* background-image: linear-gradient(-45deg, #ee7752, #a32a58, #167496, #1ca182); */
    background-size: 300% 300%;
    margin: 5vh 0px;
    padding: 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    height: 200px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    animation: gradient 15s ease infinite;
    border: 3px solid rgb(230, 230, 230);
    position: relative;
}

#littleMessage {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 0.8em;
    opacity: 0.5;
    font-family: 'Roboto Mono', monospace;
    pointer-events: none;
}

#otherMessage {
    position: absolute;
    right: -30px;
    font-size: 0.8em;
    opacity: 0.5;
    font-family: 'Roboto Mono', monospace;
    pointer-events: none;
    rotate: 270deg;
}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.sixthDivInfoDiv>h2 {
    font-size: 1.5em;
}

.sixthDivInfoDiv>ul>div>li {
    margin: 10px 0px;
    padding: 0px;
    font-size: 1.2em;
}

.mainMessageDiv {
    position: relative;
}

#messageForm {
    width: 95vw;
    height: 520px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 3vh;
    margin-bottom: 3vh;
    /* background-image: linear-gradient(45deg, #36295e, #1c1045, rgb(82, 21, 90), rgb(99, 12, 80)); */
    background-size: 500% 500%;
    animation: gradient 15s ease infinite;
    -webkit-animation: gradient 15s ease infinite;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    position: relative;
    /* border: 3px solid rgba(230, 230, 230, 0.2) */
}

.formName,
.formEmail,
.formText {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    border: 2px solid rgb(255, 255, 255);
    font-family: 'Nunito', sans-serif;
    text-align: left;
    background-color: transparent;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding-left: 22px;
    resize: none;
}

.formName::placeholder,
.formEmail::placeholder,
.formText::placeholder {
    font-family: 'Nunito', sans-serif;
    color: rgb(230, 230, 230);
    vertical-align: middle;
    text-align: left;
}

.formName:focus-visible,
.formEmail:focus-visible,
.formText:focus-visible {
    outline: none;
}

.formName,
.formEmail {
    width: 70vw;
    height: 40px;
}

.formName {
    margin-top: 20px;
}

.formText {
    height: 310px;
    width: 87vw;
    padding-top: 10px;
}

.formText:valid:focus,
.formEmail:valid:focus,
.formName:valid:focus {
    border: 2px solid rgb(0, 255, 55);
}

.formText:invalid:focus,
.formEmail:invalid:focus,
.formName:invalid:focus {
    border: 2px solid rgb(255, 0, 0);
}

.formButton {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: calc(5vw);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;
    border: 2px solid rgb(255, 255, 255);
    font-family: 'Nunito', sans-serif;
    text-align: left;
    background-color: transparent;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    resize: none;
    height: 45px;
    width: 90px;
    position: relative;
}

.formButtonDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.formButtonWhite,
.formButtonBlack {
    display: none;
}

.meesageOverlayDiv {
    display: none;
}

.meesageOverlayDivMobile {
    position: absolute;
    width: 95vw;
    height: 520px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    border-radius: 10px;
    background-image: linear-gradient(-45deg, #ff00ff, #00a2ff, rgb(114, 104, 247), rgb(0, 225, 255));
    background-size: 700% 700%;
    animation: gradient 4s ease infinite;
    -webkit-animation: gradient 4s ease infinite;
    transition: opacity 3s;
    -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -ms-transition: opacity 3s;
    -o-transition: opacity 3s;
    opacity: 1;
}

.meesageOverlayFirstRing {
    margin: 0px auto;
    position: absolute;
    left: calc(50% - 150px);
    height: 300px;
    width: 300px;
    background-image: linear-gradient(135deg, #FEED07 0%, #FE6A50 5%, #ED00AA 15%, #2FE3FE 50%, #8900FF 100%);
    border-radius: 50%;

    animation-duration: 2s;
    animation-name: rotate;
    animation-iteration-count: infinite;
}

.meesageOverlaySecondRing {
    margin: 0px auto;
    position: absolute;
    left: calc(50% - 140px);
    height: 280px;
    width: 280px;
    background-image: linear-gradient(-45deg, #1c2e44, #102945, #0d0e3d, #3b0c39);
    background-size: 500% 500%;
    border-radius: 50%;
    animation: gradient 4s ease infinite;
    -webkit-animation: gradient 4s ease infinite;
}

#messageOverlayMobileResult {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 2.5em;
    font-weight: 900;
    font-family: 'Roboto Mono', monospace;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.meesageOverlayDivMobile {
    display: none;
}


.sixthDivMediaDiv {
    height: 30vh;
}

.sixthDivListItem {
    margin: 10px;
    font-size: 1em;
}

@media (max-width: 350px) {
    .navbarLogo {
        font-size: 20px;
    }
}