/*others*/
@media (max-width: 1450px) {
    .container3 {
        margin-left: 8em;
        margin-top: 6em;
    }

    .text-right{
        font-size:5.5rem;
    }

    .bottomcontainer3 {
        position: absolute;
        bottom: 0;
        padding-bottom: 1.5em;
        padding-left: 8em;
    }
}

@media (max-width: 1310px) {
    .container3 {
        margin-top: 6em;
        margin-left: 15em;
        writing-mode: vertical-rl;
        transform: rotate(190deg);
    }
}

/*corrigering middle-text*/
@media (max-width: 1350px) {
    .container2 {
        margin-top: 11em;
        margin-left: 12em;
    }
}

@media (max-width: 1280px) {
    .container2 {
        margin-top: 11em;
        margin-left: 10em;
    }

    .text-middle {
        font-size: 5.5em;
    }
}

/*all rules outside of @media queries apply to devices 1201px and above*/

@media (max-width: 1200px) {

    /*rules here apply to devices from 993px to 1200px (inclusive)*/
    /*
    =============== 
    Left page
    ===============
    */
    .container {
        margin-left: 7em;
        margin-top: 6em;
        max-width: 43em;
        width: 85%;
    }

    .text-left {
        font-size: 5rem;
        margin-bottom: 0.3em;
    }

    .text-left2 {
        font-size: 1rem;
        padding-left: 2em;
        margin-bottom: 4em;
    }

    .cv {
        margin-top: 0.2em;
        padding: 0.8em;
    }

    .icon-container {
        margin-top: 3em;
        margin-right: 2em;
        padding-left: 2em;
    }

    i.material-symbols-outlined {
        font-size: 3rem;
    }

    .icon-title {
        font-size: 1.2rem;
    }

    .icon-text {
        font-size: 1.1rem;
    }

    /*
    =============== 
    Middle page
    ===============
    */
    .container2 {
        margin-top: 12em;
        margin-left: 10em;
    }

    .text-middle {
        font-size: 5em;
    }

    .text-middle2 {
        font-size: 1.5rem;
        margin-left: 1em;
    }

    .text-middle2+p {
        margin-left: 1.4em;
    }

    .maincircle {
        width: 37em;
        height: 37em;
        background-size: 25em 22em;
        margin-top: 3em;
    }

    .circle1 {
        outline-offset: 3em;
    }

    .circle2 {
        outline-offset: 3em;
    }

    /*
    =============== 
    Right page
    ===============
    */
    .container3 {
        margin-left: 14em;
        margin-top: 6em;
        writing-mode: vertical-rl;
        transform: rotate(190deg);
    }

    /*bottom navigation*/
    .bottomcontainer3 {
        position: absolute;
        bottom: 0;
        padding-bottom: 1.5em;
        padding-left: 4em;
    }

    /*
  ====
  Flexbox of projects
  ====
  */
    .finishedprojects {
        margin-right: -5em;
    }

    .finishedprojects .image-wrapper {
        max-width: 300px;
        height: 200px;
    }

    .projectcontainer {
        max-width: 300px;
        height: 200px;
    }

    .projectnumber {
        font-size: 4.5em;
        margin-top: -0.1em;
    }
}

@media (max-width: 992px) {

    /*rules here apply to devices from 769px to 992px (inclusive)*/
    /*
    =============== 
    Left page
    ===============
    */
    .container {
        margin-left: 2em;
        margin-top: 4em;
        max-width: 43em;
        width: 85%;
    }

    .text-left {
        font-size: 4rem;
        margin-bottom: 0.3em;
    }

    .text-left2 {
        font-size: 1rem;
        padding-left: 2em;
        margin-bottom: 4em;

    }

    .cv {
        margin-top: 0.2em;
        padding: 0.8em;
    }

    .icon-container {
        margin-top: 3em;
        margin-right: 2em;
        padding-left: 2em;
    }

    i.material-symbols-outlined {
        font-size: 2.9rem;
    }

    .icon-title {
        font-size: 1.2rem;
    }

    .icon-text {
        font-size: 1.1rem;
    }

    /*
    =============== 
    Middle page
    ===============
    */
    .container2 {
        position: fixed;
        top: 80%;
        left: 50.5%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        width: 12em;
        margin: 0 auto;
    }

    .text-middle {
        font-size: 4em;
    }

    .text-middle2 {
        font-size: 1.5rem;
    }

    .text-middle2+p {
        margin-left: 0.3em;
    }

    .maincircle {
        width: 26em;
        height: 26em;
        background-size: 18em 16em;
        margin-top: 5em
    }

    .circle1 {
        display: none
    }

    .circle2 {
        display: none
    }

    .moon {
        display: none;
    }

    /*
    =============== 
    Right page
    ===============
    */
    .container3 {
        margin-left: 5em;
        margin-top: 10em;
        writing-mode: vertical-rl;
        transform: rotate(190deg);
    }

    .text-right {
        font-size: 4rem;
    }

    /*bottom navigation*/
    .bottomcontainer3 {
        position: absolute;
        bottom: 0;
        padding-bottom: 1.5em;
        padding-left: 4em;
    }

    /*
    ====
    Flexbox of projects
    ====
    */
    .finishedprojects {
        margin-top: 0.2em;
        margin-right: 1em;
        float: right;
        max-width: 25em;
    }

    .finishedprojects .image-wrapper {
        max-width: 200px;
        height: 150px;
    }

    .finishedprojects .image-wrapper p:nth-of-type(1) {
        font-size: 1.5rem;
    }

    .finishedprojects .image-wrapper p:nth-of-type(2) {
        font-size: 0.8em;
    }

    .projectcontainer {
        width: 100%;
        max-width: 200px;
        height: 150px;
    }

    .projectnumber {
        font-size: 4.5em;
        margin-top: -0.45em;
    }
}















@media (max-width: 768px) {

    /*rules here apply to devices from 576px to 768px (inclusive)*/
    /*
    =============== 
    Left page
    ===============
    */
    .container {
        margin-left: 2em;
        margin-top: 4em;
        max-width: 43em;
        width: 85%;
    }

    .text-left {
        font-size: 4rem;
        margin-bottom: 0.3em;
    }

    .text-left2 {
        font-size: 1rem;
        padding-left: 0.2em;
    }

    .cv {
        margin-top: 0.2em;
        padding: 0.8em;
    }

    .icon-container {
        margin-top: 3em;
        margin-right: 2em;
        padding-left: 0.2em;
    }

    i.material-symbols-outlined {
        font-size: 2rem;
    }

    i.material-symbols-outlined {
        font-size: 2rem;
    }

    .icon-title {
        font-size: 1rem;
    }

    .icon-text {
        font-size: 0.9rem;
    }

    /*
    =============== 
    Middle page
    ===============
    */
    .text-middle {
        font-size: 4em;
    }

    .text-middle2 {
        font-size: 1.5rem;
        margin-left: 1em;
    }

    .text-middle2+p {
        margin-left: 0.3em;
    }

    .maincircle {
        width: 25em;
        height: 25em;
        background-size: 18em 16em;
        margin-top: 5em;
        background-position: 60% 40%;

    }

    .circle1 {
        display: none
    }

    .circle2 {
        display: none
    }

    .moon {
        display: none;
    }

    /*
    =============== 
    Right page
    ===============
    */

    .container3 {
        margin-left: 3em;
        margin-top: 4em;
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
    }

    .text-right {
        font-size: 4rem;
    }

    /*bottom navigation*/
    .bottomcontainer3 {
        position: absolute;
        bottom: 0;
        padding-bottom: 1.5em;
        padding-left: 7em;
    }

    /*
    ====
    Flexbox of projects
    ====
    */
    .finishedprojects {
        margin-top: 12em;
        margin-left: 3em;
        float: none;
        height: 65vh;
        max-width: 25em;
    }

    .finishedprojects .image-wrapper {
        max-width: 200px;
        height: 150px;
    }

    .finishedprojects .image-wrapper p:nth-of-type(1) {
        font-size: 1.5rem;
    }

    .finishedprojects .image-wrapper p:nth-of-type(2) {
        font-size: 0.8em;
    }

    .projectcontainer {
        width: 100%;
        max-width: 200px;
        height: 150px;
    }

    .projectnumber {
        font-size: 4.5em;
        margin-top: -0.45em;
    }
}


@media (max-width: 576px) {
    /*rules here apply to devices from 0px to 576px (inclusive)*/

    /*
    =============== 
    Left page
    ===============
    */
    .container {
        margin-left: 2em;
        margin-top: 2em;
        max-width: 43em;
        width: 85%;
    }

    .text-left {
        font-size: 3.2rem;
        margin-bottom: 0.3em;
    }

    .text-left2 {
        font-size: 1rem;
        padding-left: 0.2em;
        margin-bottom: 2em;
    }

    .cv {
        margin-top: 0.2em;
        padding: 0.8em;
    }

    .icon-container {
        margin-top: 0em;
        margin-right: 0em;
    }

    i.material-symbols-outlined {
        font-size: 2rem;
    }

    .icon-title {
        font-size: 1rem;
    }

    .icon-text {
        font-size: 0.9rem;
    }

    .vh {
        display: inline-block;
        border: 2px solid #1c1c1c;
        height: 4em;
        margin: 0 1em;
    }

    /*bottom navigation*/
    .bottomcontainer2 {
        position: fixed;
        bottom: 0;
        left: 50vw;
        transform: translateX(-50%);
        padding-bottom: 5.65em;
    }

    /*
    =============== 
    Middle page
    ===============
    */
    .text-middle {
        font-size: 3.2em;
        margin-top: -3em;
        text-align: center;
    }

    .text-middle2 {
        font-size: 1.5rem;
        margin-left: 1.4em;

    }

    .text-middle2+p {
        margin-left: 0.8em;

    }

    .maincircle {
        width: 20em;
        height: 20em;
        background-size: 18em 16em;
        margin-top: 5em;
        background-position: 110% 40%;

    }

    .circle1 {
        display: none
    }

    .circle2 {
        display: none
    }

    .moon {
        display: none;
    }

    .bottomcontainer {
        position: absolute;
        bottom: 0;
        padding-bottom: 3.4em;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    /*
    =============== 
    Right page
    ===============
    */

    .container3 {
        margin-left: 2.2em;
        margin-top: 2em;
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
    }

    .text-right {
        font-size: 3.2rem;
    }

    /*bottom navigation*/
    .bottomcontainer3 {
        position: absolute;
        bottom: 0;
        padding-bottom: 5.7em;
        padding-left: 4em;
    }

    /*
    ====
    Flexbox of projects
    ====
    */
    .finishedprojects {
        margin-top: 7em;
        margin-left: 0em;
        float: none;
        height: 65vh;
        max-width: 25em;
    }

    .finishedprojects .image-wrapper {
        max-width: 160px;
        height: 140px;
    }

    .finishedprojects .image-wrapper p:nth-of-type(1) {
        font-size: 1.3rem;
    }

    .finishedprojects .image-wrapper p:nth-of-type(2) {
        font-size: 0.65em;
    }

    .projectcontainer {
        width: 100%;
        max-width: 160px;
        height: 140px;
    }

    .projectnumber {
        font-size: 4.5em;
        margin-top: -0.45em;
    }
}


@media only screen and (min-device-width: 320px) and (max-device-width: 900px) and (orientation: landscape) {

    /*landscape*/
    /*
    =============== 
    Left page
    ===============
    */
    .container {
        margin-left: 1em;
        margin-top: 1em;
        max-width: 43em;
        width: 85%;
    }

    .text-left {
        font-size: 3.2rem;
        margin-bottom: 0.1em;
    }

    .text-left2 {
        font-size: 1rem;
        padding-left: 0.2em;
        margin-bottom: 0.5em;
    }

    .cv {
        margin-top: 0.2em;
        padding: 0.8em;
    }

    .icon-container {
        margin-top: 0em;
        margin-right: 0em;
    }

    i.material-symbols-outlined {
        font-size: 2rem;
    }

    .icon-title {
        font-size: 0.9rem;
    }

    .icon-text {
        font-size: 0.8rem;
    }

    .vh {
        display: inline-block;
        border: 2px solid #1c1c1c;
        height: 4em;
        margin: 0 1em;
    }

    /*bottom navigation*/
    .bottomcontainer2 {
        position: fixed;
        bottom: 0;
        left: 65vw;
        transform: translateX(-50%);
        padding-bottom: 1em;
    }

    /*
    =============== 
    Middle page
    ===============
    */
    .container2 {
        width: 26em;
        margin-top: 3em;
    }

    .text-middle {
        font-size: 3.2em;
        margin-top: -4em;
        margin-left: 5em;
    }

    .text-middle2 {
        font-size: 1.5rem;
        margin-left: 10.8em;
    }

    .text-middle2+p {
        margin-left: 16.3em;
    }

    .maincircle {
        width: 19em;
        height: 19em;
        background-size: 18em 16em;
        margin-top: 1em;
        margin-left: 3em;
    }

    .circle1 {
        display: none;
    }

    .circle2 {
        display: none;
    }

    .moon {
        display: none;
    }

    .bottomcontainer {
        position: absolute;
        bottom: 0;
        padding-bottom: 0.3em;
        left: 56.3%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    /*
    =============== 
    Right page
    ===============
    */

    .container3 {
        margin-left: 2.2em;
        margin-top: 5em;
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
    }

    .text-right {
        font-size: 3.2rem;
    }

    /*bottom navigation*/
    .bottomcontainer3 {
        position: absolute;
        bottom: 0;
        padding-bottom: 1em;
        padding-left: 4em;
    }

    /*
    ====
    Flexbox of projects
    ====
    */
    .finishedprojects {
        margin-top: 0em;
        margin-left: 20em;
        float: none;
        height: 100vh;
        max-width: 25em;
    }

    .finishedprojects .image-wrapper {
        max-width: 160px;
        height: 140px;
    }

    .finishedprojects .image-wrapper p:nth-of-type(1) {
        font-size: 1.3rem;
    }

    .finishedprojects .image-wrapper p:nth-of-type(2) {
        font-size: 0.65em;
    }

    .projectcontainer {
        width: 100%;
        max-width: 160px;
        height: 140px;
    }

    .projectnumber {
        font-size: 4.5em;
        margin-top: -0.45em;
    }
}