body {
    background-color: #1e5d88 ;
    font-size:16px;
    margin:0%;
    padding:0%;

}
.Lilita {
    font-family: 'Lilita One', sans-serif;
    font-optical-sizing: auto;
}

.Montserrat {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}

.topnav {
    background-color:lightblue;
    overflow: hidden;
    font-family: "Lilita One", sans-serif;
    font-optical-sizing: auto;
    color:black;
    position:fixed;
    width:100%;
    height:3.3rem;
    z-index: 1000

}

h1 {
    font-size:1.5rem;
    letter-spacing: 1px;
    margin: 0.8%;
    float:left;
    margin-left: 1%;
}

.topnav a {
    float:right;
    font-size:1.5rem;
    margin: 0.5%;
    margin-right:1%;
    color:black;

}

.topnav a:hover {
    background-color:lightblue;
    color: #1e5d88;
}

#slash {
    color:azure;
}

.intro {
    border-radius: 25px; 
    border: 3px solid beige;
    background-color:bisque;
    margin: 2%; 
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    color:black;
    text-align: center;
    padding-top: 0.9%;
    font-size:1.1rem;
    line-height:190%;
    letter-spacing: 0.7px;
    padding-bottom: 0.8%;
    margin-bottom: 1.6%;

}

.intro p3 {
    margin:1%;
    display:inline-block;
}

p3 a {
    color:blue;
}

section {
    background-color: azure;
    width:100%;
    height: 44%;
}


.p1 {
    margin: 1.6%;
    margin-top:1.5%;
    font-size:1.16rem;
    display:block;
    line-height:200%;
    letter-spacing: 0.75px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}


.p2 {
        padding-top: 1.5%;
        padding-bottom: 1.5%;
        display:block;
        font-size:1.17rem;
        letter-spacing: 1px;
        text-align: center;
        background: bisque;
        box-sizing: border-box; 
        margin:1%;
}

span {
    font-size:1.35rem;
    display:block;
    margin-right:2%;
    margin-left:2%;
    
}

.header {
    font-weight: 650;
    font-style: bold;
    color: azure;
    text-align: center;
    margin-bottom: 2%;
    padding-top: 1%;
    font-size:3rem;
    line-height:0.5;
    font-family: "Lilita One", sans-serif;
    font-optical-sizing: auto;
  
}

.image-container {
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:2%;
  align-items: baseline;
}

.image-box {
    flex: 1 1 calc(33.33% - 2%);
    box-sizing:border-box;
    text-align:center;
}

.image-box2 {
    flex: 1 1 calc(50% - 2%);
    box-sizing:border-box;
    text-align:center;
}

.image-box3 {
    flex: 1 1 calc(33.33% - 2%);
    box-sizing:border-box;
    text-align:center;
}

.image-box img {
    width:100%;
    height:auto;
    max-width:90%;
    object-fit:cover;
    border: 5px solid aquamarine;
    border-radius:50px;
    margin-bottom:7%;
}

.image-box2 img {
    width:100%;
    height:32%;
    max-width:80%;
    object-fit:cover;
    border: 5px solid aquamarine;
    border-radius:50px;
    margin-bottom:6%;
}

.image-box3 img {
    width:100%;
    height:60%;
    max-width:90%;
    object-fit:cover;
    border: 5px solid whitesmoke;
    border-radius:50px;
    margin-bottom:6%;
    margin-top:3%;

}

.header2 {
    font-weight: 650;
    font-style: bold;
    color: azure;
    margin-top:2%;
    font-size:2.2rem;
    font-family: "Lilita One", sans-serif;
    font-optical-sizing: auto;
    display: inline;
}

.text1 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    display: inline-block;
    color:azure;
    width: 90%;
    text-align: center;
    margin-top:6%;
    font-size: 1.12rem;
    letter-spacing: 1px;
    line-height: 155%;

}

hr {
    height:0.5%;
    color:azure;
    background: azure;
    margin-bottom: 0%;
}

.fit {
    padding: 0.75%;
    margin: 0%;
    line-height: 175%;
    font-size:1.15rem;
    margin-right:3%;
    margin-left:3%;
    display:inline-block;
    font-family: "Montserrat", sans-serif;
    font-weight:450;
}

#access {
    margin-left:0%;
    margin-right:0%;
}

span1 {
    font-size:1.4rem;
    line-height:160%;
    display:inline-block;
    padding:1.5%;
}

.inmusic h6 {
    margin-top: 3%;
}


.twxn img {
    width:28%;    
    margin-left:2%;
    vertical-align: middle;
}


.glorb img {
    width:28%;
    vertical-align:middle;
    margin-left:2%;
}

.desc {
    font-family: "Montserrat", sans-serif;
    display:inline-block;
    font-optical-sizing: auto;
    width:65%;
    line-height: 190%;
    letter-spacing: 0.5px;
    margin-left: 2%;
    margin-right:1%;
    text-align:center;
    font-size:1.2rem;
    border: 3px solid azure;
    background-color:bisque;
    border-radius: 25px;
    padding:1%;
    vertical-align: middle;
}

.glorb p7 {
    font-size:1.19rem;
}

.desc a {
    color:blue;
}

.twxn { 
    margin-bottom:3%;
}

.p2 p {
    margin:0.5%;
    line-height: 175%;
    font-size:1.3rem;
    margin-right:2%;
    margin-left:2%;
}

p {
    margin:2%;
    line-height: 175%; 
    font-size:1.15rem; 
}

.design {
    height:29%;
    border:5px solid white;
    border-radius:50px ;
    margin: 2%;
    margin-left:2%;
    display:inline;
}

#aicity {
    vertical-align: top; 
    width:35%; 
    height:auto; 
    border:5px solid azure;
}


.header3 {
    font-weight: 650;
    font-style: bold;
    text-align: center;
    line-height:50%;
    font-family: "Lilita One", sans-serif;
    font-optical-sizing: auto;
    margin-top:2%; 
    margin-bottom: 3%; 
    color:whitesmoke; 
    padding-top:0%; 
    font-size:2.7rem; 
}

.text2 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    display: inline-block;
    color:azure;
    width: 90%;
    text-align: center;
    margin-top:4%;
    font-size: 1.2rem;
    letter-spacing: 1px;
    line-height: 170%;
    margin-bottom: 7%;

}

p9 a {
    color:yellow;
}

p9 a:hover {
    color:orange;
}

#artga {
    margin-left:2%;
    padding-bottom:2%;
}

.caption {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    letter-spacing: 0.5px;
    color:black;
    font-size:1.25rem;
    display:inline-block;
    text-align: center;
    width:80%;
    margin-bottom:2%;
}

footer {
    margin-bottom:0;
    width:100%;
    height:6%;
    background-color:lightcyan;

}

footer p {
    font-size:1.5rem;
    text-align:center;
    color:black;
    font-family: "Indie Flower", cursive;
    font-weight:600;

}

.caption a {
    color:#1436f6;
    font-weight:600;
}

.conclusion h3 {
    font-size:2.6rem;
    margin-bottom:3%;
    margin-top: 3%;
}

#conc {
    margin:1.5%;
}


@media (max-width:374px) {
    body {
        font-size: 10px;
        overflow-x: hidden;
    }

    
    h1 {
        font-size:1.8rem;
        margin-top:2%;
        width:100%;
        margin-left:5%;
        margin-bottom:0%;
    }

    .topnav {
        height:7rem;
    }

    .topnav a {
        float:left;
        font-size:1.5rem;
        margin-left:5%;
        padding-bottom:1rem;
        margin-top:3%;
        text-align:center;
    }

    .header {
        margin-top:30%;
    }

    .intro {
        margin-right:4%;
        margin-left:4%;
        margin-top:20%;
        font-weight:500;
        margin-bottom:20%;
    }

    .intro p3 {
        margin:3%;
    }

    .p1 {
        font-weight:450;
        margin:4%;
    }

    .p2 {
        margin-top:20%;
        margin-right:4%;
        margin-left:4%;
        margin-bottom:15%;
    }

    span {
        font-size:1.25rem;
        line-height:193%;
    }

    .header2 {
        font-size:3rem;
        margin-left:0;
    }

    .image-box {
        flex: 1 1 100%;
        margin-bottom: 2%;
    }

    .image-box:last-child {
        margin-bottom: 0; 
    }
   
    .text1 {
        margin-bottom:10%;
        font-size:1.25rem;
        line-height:200%;
    }

    #abvmusic {
        margin-bottom:45%;
    }


    .twxn {
        text-align: center;
    }

    .twxn img {
        width:80%;
        margin-bottom: 3%;
        margin-top:0%;
    }

    .glorb {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .glorb img {
        width:80%;
        margin-bottom: 3%;
        margin-top: 3%;
        order:1;
    }

    .glorb p7 {
        order:2;
    }

    .desc {
        width:90%;
        font-size:1.3rem;

    }

    .p2 p {
        margin:4%;
    }

    #aicity {
        width:90%;
        margin-top:5%;
        margin-bottom:5%;
    }

    #twowell {
        line-height:140%;
        margin:1%;
        margin-bottom:10%;
        font-size:2.5rem;
    }

    .image-box2 {
        flex: 1 1 100%
    }

    .image-box2 img {
        max-width:90%;
        margin-bottom:10%;
    }

    .header3 {
        font-size:2.3rem;
        margin-top:7%;
        margin-bottom:7%;
    }

    .text2 {
        margin-bottom:10%;
    }
    
    .image-box3 {
        flex: 1 1 100%
    }

    .caption {
        font-size:1.25rem;
        margin-bottom:7%;
    }

    .image-box3 img {
        margin-top:15%;
    }

    #firstimg {
        margin-top:10%;
    }

    #lastcaption {
        margin-bottom:20%;
    }

    .conclusion h3 {
        margin-top:20%;
        font-size:2.8rem;
        margin-bottom:20%;
    }

    #conc {
        margin-bottom:15%;
    }

    footer {
        height:12%;
    }






}

@media (min-width:375px) and (max-width:479px) {
    body {
        font-size: 11px;
        overflow-x: hidden;
        margin:0;
        padding:0;
    }

    h1 {
        font-size:1.8rem;
    }


    body hr {
        width: 100%;
        max-width: 100%;
        margin-top:30%;
    }

    body .header {
        margin-top:30%;
    }

    body .inmusic h6 {
        margin-top:40%;
    }

    .intro p3 {
        font-size:1.25rem;
        margin:3%;
    }

    .intro p1 {
        font-size:1.2rem;
        margin:3%;
        font-weight:475;
    }

    .p2 span {
        font-size:1.4rem;
    }

    .image-container .text1 {
        line-height:195%;
    }

    .twxn .desc {
        width:95%;
        margin-right:2.5%;
    }

    .glorb .desc {
        width:95%;
        margin-right:2.5%;
    }

    body .twxn img {
        width:85%;
    }

    body .glorb img {
        width:85%;
    }

    .image-container .text2 {
        line-height:195%;
    }

    #access {
        width: 100%;
        max-width: 100%;   
    }

    .image-box2 img {
        max-width:90%;
        height:34%;
    }

    .image-box3 img {
        height:50%;
    }

    body #artga {
        padding-bottom:0%;
        margin-left:2.5%;
    }

    body .conclusion h3 {
        margin-top:5%;
    }

    #conc {
        margin-top:5%;
        margin-bottom:5%;
    }

    footer {
        width: 100%;
        max-width: 100%;
        height:12%;
    }
    

}




@media (min-width:375px) and (max-width:767px) {
    body {
        font-size: 11px;
    }

    h1 {
        font-size:1.8rem;
        margin-top:2%;
        width:100%;
        margin-left:5%;
        margin-bottom:0%;
    }

    .topnav {
        height:6.4rem;
    }

    .topnav a {
        float:right;
        font-size:1.75rem;
        margin-right:6%;
        padding-bottom:1rem;
    }

    #first1 {
        margin-right:6%;
    }

    .header {
        margin-top: 20%;
        font-size:3.3rem;
    }

    .intro {
        margin-top:10%;
        font-size:1.4rem;
        font-weight:500;
        margin-right:3%;
        margin-left:3%;
    }

    .p1 {
        font-size:1.35rem;
        font-weight:450;
    }

    .p2 {
        margin-top:10%;
        margin-bottom:10%;
        margin-right:3%;
        margin-left:3%;
    }

    span {
        font-size:1.7rem;
        line-height:160%;
    }

    .header2 {
        font-size:3rem;
        margin-left:0;
    }

    .image-box {
        flex: 1 1 100%;
        margin-bottom: 2%;
    }

    .image-box:last-child {
        margin-bottom: 0; 
    }
   
    .text1 {
        margin-bottom:10%;
        font-size:1.3rem;
    }

    #abvmusic {
        margin-bottom:25%;
    }

    #access {
        margin-top:10%;
        margin-bottom:3%;
    }

    .twxn {
        text-align: center;
    }

    .twxn img {
        width:70%;
        margin-bottom: 3%;
        margin-top:0%;
    }

    .glorb {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .glorb img {
        width:70%;
        margin-bottom: 3%;
        margin-top: 3%;
        order:1;
    }

    .glorb p7 {
        order:2;
    }

    .desc {
        width:90%;
        font-size:1.3rem;

    }

    #these2 {
        margin-bottom:3%;
    }

    .p2 p {
        font-size:1.4rem;
    }

    #aicity {
        width:90%;
        margin-top:5%;
        margin-bottom:5%;
    }

    #withai {
        font-size:1.2rem;
        margin-bottom:5%;
    }

   
    .header3 {
        line-height:125%;
        font-size:2.7rem;
        margin-top:5%;
    }

    .image-box2 {
        flex: 1 1 100%
    }
    
    .text2 {
        margin-top:4.5%;
        font-size: 1.3rem;
        margin-bottom:10%;
    }

    #artga {
        margin-top:10%;
    }

    .image-box3 {
        flex: 1 1 100%
    }

    .caption {
        font-size:1.4rem;
    }

    .fit {
     font-size:1.1rem;   
    }

}

@media (min-width:768px) and (max-width:1023px) {
    
    body {
        font-size: 10px;
    }

    h1 {
        font-size:1.6rem;
        margin-top: 1.1%;
    }

    .topnav {
        height:3.5rem;
    }

    .topnav a {
        font-size:1.6rem;
    }

    .header {
        margin-top:4%;
        font-size:3rem;
    }

    .inmusic h6 {
        margin-top:7%;
    }

    .intro {
        font-size:1.2rem;
        font-weight:500;
        margin:3%;
    }

    .intro p3 {
        display:inline-block;
        margin:2%;
    }
    
    .p1 {
        font-weight:400;
        line-height:200%;
        font-size:1.2rem;
        display:inline-block;
        margin:3%;
    }

    .p2 {
        margin-top:6%;
        margin-bottom:6%;

    }

    #access {
        margin-top:3%;
        margin-bottom: 2%;
    }

    span1 {
        font-size:1.2rem;
    }

    .image-container {
        margin-bottom: 3%;
    }

    .image-box {
        flex: 1 1 calc(50% - 2%);
    }

    .image-box:last-child img {
        margin-top: 10%;
        object-fit:cover;
        height: 20rem !important;

    }

    .image-box:last-child {
        margin-bottom: 0; 
        max-width:75%;
        box-sizing: border-box;
        text-align:center;
        margin: 0 auto;

    }

    .image-box img {
        object-fit: cover;
        max-width:90%;
    }
    
    .header2 {
        text-align:center;
        margin-left:0;
        font-size:2.7rem;
    }

    span1 {
        font-size:1.5rem;
    }

    .text1 {
        margin-bottom:0%;
        font-size:1.3rem;
    }

    .twxn {
        text-align: center;
    }

    .twxn img {
        width:50%;
        margin-bottom: 3%;
        margin-top:0%;
    }

    .glorb {
        display: flex;
        flex-direction: column;
        align-items: center;
        width:100%;
    }
 
 
    .glorb img {
        width:50%;
        margin-bottom: 3%;
        margin-top: 3%;
        order:1;
    }
 
 
    .glorb p7 {
        order:2;
    } 
 

    .desc {
        width:90%;
        font-size:1.3rem;

    }

    .p2 p {
        font-size:1.6rem;
        display:inline-block;
        margin:1.5%;
    }

    #these2 {
        margin:2%;
    }

    #aicity {
        width:55%;
    }

    #withai {
        font-size:1.25rem;
    }

    .header3 {
        font-size:2.7rem;
    }

    .image-box2 h6 {
        margin-top:4.5%;
        font-size:3.5rem;
    }

    #twowell {
        margin-top: 4.5%;
        margin-bottom: 5%;
    }

    .image-box2 {
        flex: 1 1 100%
    }
    
    .text2 {
        margin-top:4.5%;
        font-size: 1.3rem;
        margin-bottom:10%;
    }

    #hr {
        margin-bottom: 4%;
    }

    #artga {
        margin-top: 4%;
    }

    .image-box3 {
        flex: 1 1 calc(50% - 2%)
    }

    .conclusion h3 {
        margin-top:4%;
        margin-bottom:4%;
    }

    footer {
        margin-top:5%;
    }
}

@media (min-width:1024px) and (max-width:1439px) {
    body {
        font-size: 12px;
    }

    h1 {
        font-size:1.6rem;
    }

    .header {
        font-size:2.7rem;
        margin-top:4%;
    }

    .topnav a {
        font-size:1.6rem;
        padding-inline:0.2%;
    }

    .topnav {
        height:3.4rem;
    }

    .intro {
        font-size:1.1rem;
        padding:2%;
        font-weight:500;
        margin:3%;
        
    }

    p3 {
        line-height:175%;
    }

    .p1 {
        font-size:1.08rem;
        line-height:180%;
        font-weight:400;
    }

    .p2 {
        margin:3%;
        margin-top: 5%;
        margin-bottom:3.5%;
    }

    span {
        font-size:1.25rem;
        line-height:170%;
        margin-right:5%;
        margin-left:5%;

    }

    .image-container {
        margin-bottom: 5%;
    }

    .text1 {
        margin-bottom:5%;
        font-size:1.08rem;
    }

    span1 {
        font-size:1.3rem;
    }
    
    .twxn img {
        width:30%;
    }

    .glorb img {
        width:30%;
    }

    .glorb p7 {
        font-size:1.1rem;
    }
    
    .twxn {
        margin-bottom: 4%;
        margin-top:1%;
    }
    .desc {
         width:60%; 
         font-size:1.1rem; 
    }

    p8 {
        font-size:1.1rem;
    }

    p {
        line-height: 175%; 
        font-size:1rem; 
        margin:1%;
    }

    #aicity {
        width:45%;
    }

    .header3 {
        margin-bottom:5%;
        font-size:2.7rem;
    }

    .text2 {
        font-size:1.28rem;
        margin-bottom: 5%;
    }

    .caption {
        font-size:1.3rem;
        margin-bottom:5%;
    } 
    
    .image-box3 img {
        margin-top:10%;
    }

    .inmusic h6 {
        margin-top: 7%;
    }

   #access {
       margin-top:2%;
   }

    .fit {
        font-size:1.05rem;
    }

    .intro p {
        font-size:1.2rem;
    }
    
    .conclusion h3 {
        margin-top: 3%;
    }
    
    footer {
        margin-top:5%;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    body {
        font-size:16px;
    }
   
    h1 {
        font-size:1.5rem;
    }

    .caption {
        font-size:1.4rem;
    }
}

@media (min-width: 2560px) {
    body {
        font-size:16px;
    }

    h1 {
        font-size:1.5rem;
    }
}