@media only screen and (max-width: 1367px) {

    #menu {
        background-image: url(content/grafika/bg/Tablet/Tablet_lan_main.jpg);
    }

    #intro {
        background-image: url(content/grafika/bg/Tablet/Tablet_lan_b.jpg);
    }

    #vision {
        background-image: url(content/grafika/bg/Tablet/Tablet_lan_e.jpg);
    }

    #bounds {
        background-image: url(content/grafika/bg/Tablet/Tablet_lan_l.jpg);
    }

    #myself {
        background-image: url(content/grafika/bg/Tablet/Tablet_lan_s.jpg);
    }

    #contact {
        background-image: url(content/grafika/bg/Tablet/Tablet_lan_o.jpg);
    }

    
    /* nav ul li {
        font-size: 2.2rem;
    } */

    .popup {
        max-width: 80svw;
        padding: 0.8rem 1.2rem;
    }

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

    .intro-grid .col:nth-of-type(2) {
        padding-right: 10svw;
    }

    .vision-grid .col:nth-of-type(1) {
        padding-left: 10svw;
    }

    #myself .span-1-of-2 {
        padding-left: 10svw;
    }

    #myself ul {
        list-style-type: disc;
        padding-left: 1.1rem;
        font-size: 1.15rem;
    }

}

@media only screen and (max-width: 1024px){
    .intro-grid .col:nth-of-type(2) {
        padding-right: 5svw;
    }
    
    .vision-grid .col:nth-of-type(1) {
        padding-left: 5svw;
    }

    nav{
        background-color: transparent;
    }

    nav ul li {
        font-size: 2rem;
    }

    #intro .index {
        color:#709bba;
    }

    #vision .index {
        color:#749f93;
    }

    #bounds .index {
        color:#ccb274;
    }

    #myself .index {
        color:#cc7263;
    }

    #contact .index {
        color:#b68693;
    }
} 


@media only screen and (max-width: 950px){
    body {
        width: 100svw;
        overflow-x: hidden;
    }

    nav ul li {
        font-size: 2.3rem;
    }

    #menu {
        background-image: url(content/grafika/bg/Tablet/Tablet_por_main.jpg);
    }

    #intro {
        background-image: url(content/grafika/bg/Tablet/Tablet_por_b.jpg);
    }

    #vision {
        background-image: url(content/grafika/bg/Tablet/Tablet_por_e.jpg);
    }

    #bounds {
        background-image: url(content/grafika/bg/Tablet/Tablet_por_l.jpg);
    }

    #myself {
        background-image: url(content/grafika/bg/Tablet/Tablet_por_s.jpg);
    }

    #contact {
        background-image: url(content/grafika/bg/Tablet/Tablet_por_o.jpg);
    }

    .popup {
        max-width: 80%;
    }


    html {
        overflow-x: hidden;
        font-size: 13px;
    }

    .gif img {
        width: 25rem;
    }

    .gif span::before{
        width: 19rem;
        top: 5rem;
    }

    nav {
        width: min-content;
        padding: 0.8rem;
    }

    nav ul li {
        display: block;
        text-align: center;
        padding: 0.8rem;
        /* font-size: 2rem; */
    }

    nav li:nth-of-type(1):hover{
        color: #000;
    }
    nav li:nth-of-type(2):hover{
        color: #000;
    }
    nav li:nth-of-type(3):hover{
        color: #000;
    }
    nav li:nth-of-type(4):hover{
        color: #000;
    }
    nav li:nth-of-type(5):hover{
        color: #000;
    }

    .intro-grid {
        grid-template-columns: 1fr;
    }

    .intro-grid .col:nth-of-type(2) {
        padding-right: 0;
    }

    .vision-grid {
        grid-template-columns: 1fr;
    }

    .vision-grid .col:nth-of-type(1) {
        padding: 0;
    }

    .bounds-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bounds-grid .col:nth-of-type(1),
    .bounds-grid .col:nth-of-type(3),
    .bounds-grid .col:nth-of-type(6), 
    .bounds-grid .col:nth-of-type(9) {
        justify-content: center;
    }

    #bounds .bubble {
        margin: 0;
    }

    .bounds-grid .col:nth-of-type(4),
    .bounds-grid .col:nth-of-type(5){
        display: none;
    }


    #bounds .bubble img {
        margin: 0 auto;
    }


    #myself .span-1-of-2{
        padding-left: 0;
        flex: 0 0 100%;
    }

    #myself h4 {
        color:#cc7263;
    }

    .hero-img{
        display: block;
    }
    
} 


@media only screen and (max-width: 500px) {

    #menu {
        background-image: url(content/grafika/bg/Mobil/Mobilbg_1.jpg);
    }

    #intro {
        background-image: url(content/grafika/bg/Mobil/Mobilbg_2.jpg);
    }

    #vision {
        background-image: url(content/grafika/bg/Mobil/Mobilbg_3.jpg);
    }

    #bounds {
        background-image: url(content/grafika/bg/Mobil/Mobilbg_4.jpg);
    }

    #myself {
        background-image: url(content/grafika/bg/Mobil/Mobilbg_5.jpg);
    }

    #contact {
        background-image: url(content/grafika/bg/Mobil/Mobilbg_6.jpg);
    }

    #vision .bubble-line {
        margin-bottom: 3rem;
    }
}