body {
  margin: 0;
  padding: 0;
  background-color: black;
}

article {
    margin: 0;
}

/* Heading About Ni*/
.box-teal {
    background-color: #62D1F0;
    padding: 4vw 6vw 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


h1 { 
    font-size: 26vw;
    font-family: "Ultra" , serif;
    font-style: normal;
    font-weight: 400;
    line-height: 0.8;
    color: #622846;
    margin: 0;
    margin-bottom: -0.05em;
}


h2 {
    line-height: 1;
    font-family: "Ultra" , serif;
    font-style: normal;
    font-weight: 400;
    font-size: 9vw;
    color: #370E13;
    margin: 0;
    margin-right: 12vw;
}




/* S1 Bio*/

.box-plum {
    background-color: #622846;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 6vw 4vw;
}

.me-image {
    width: 28vw;
    height: 28vw;
    border-radius: 50%;
    object-fit: cover;
}

.me {
    flex: 1;
    align-items: center;
}

h3 {
    font-family: "gill-sans-nova-condensed", sans-serif;
    font-weight: 1000; 
    font-style: bold;
    font-size: 5vw;
    color: #62D1F0;
    margin: 2vw 0 0 0;
  
}

.introduction {
    font-family: "acumin-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2vw;
    line-height: 1.4;
    letter-spacing: 0.1vw;
    text-align: center;
    color: #62D1F0;
    margin: 0;
}

.break {
    width: 40vw;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

li {
    padding: 5px 0;
}

.bullet-list{
    font-family: "acumin-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-display: auto;
    color: #62D1F0;
    font-size: 2vw;
    line-height: 1.2;
    letter-spacing: 0.1vw;
    text-align: center;
    list-style-type: square;
    width: 50%;
    align-self: center;
    margin: 0;
    padding: 0;
    list-style-position: inside;

}




/* S2 */

.box-red {
    background-color: #57060E;
    display: flex;
    justify-content: space-between;
    padding: 4vw 6vw;
}

h4 {
    font-family: "gill-sans-nova-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-display: auto;
    font-size: 15vw;
    color: #62D1F0;
    margin: -3vw 0 0 0;
}


.break2 {
    font-family: "acumin-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5vw;
    line-height: 1.4;
    letter-spacing: 0.1;
    text-align: left;
    width: 18vw;
    color: #62D1F0;
}


/* Triangular images in section 2 */
.wrapper {
    display: flex;
    gap: 2vw;
}


.art-grid {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.art-image {
    width: 25vw;
    height: auto;
    display: block;
}

.bottom-row {
    display: flex;
    gap: 2vw;
    align-items: flex-start;
}

.last-image {
    margin: -56vw 0 0 0;
    margin-left: 1.5vw;
}

.image {
    width: 25vw;
    height: auto;
    display: block;
}



/* S3 */

.box-last {
    background-image: url(images/BG.jpg);
    background-size: cover;
    padding: 12vw 4vw 8vw 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h5{
    font-family: "acumin-pro", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 3.5vw;
    color: #62D1F0;
    line-height: 0.7;
    letter-spacing: 0.15vw;
    text-align: center;
    margin: 4vw 0 0 0;

}

.sega {
    width: 85%;
    height: auto;
}

.sega-button {
    background: grey; 
    border: white;
    padding: 0;
    cursor: pointer;
}

.sega-button:hover {
  opacity: 0.9; 
}

@media screen and (max-width:750px) {
    .box-plum{
        flex-direction: column;
    }

    .box-red{
        flex-direction:column;
    }
    
}