body{
    background-color:#002401;
}


.header{
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 50%; 
    margin: 0 auto; 
    padding: 0;
    text-align: center;
}

.container{
    display: flex; 
    flex-direction: row;
    padding: 2% 0% 2% 0%;
    width: 50% x 50%;
    margin: 20px 75px 20px 75px;

}


.logo{
    display: grid; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 50%; 
    margin: 0 ; 
    padding: 0;
    text-align: center;
}




.me {
    width: 50%;
    justify-content: right;
    padding: 20px 20px 20px 20px;
}

h1{
    font-family: "degular", sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 0 0 0 50px;
    text-align: left;
    font-size: 70px;
    color: antiquewhite;
    margin: 0;
}
    
h2{ 
    font-family: "elza-text", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 0 0 0 200px;
    text-align: left;
    font-size:  1.2vw;
    color: antiquewhite;
    margin: 0;
}

.mephoto{
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 50%; 
    margin: 0 auto; 
    padding: 0;
    text-align: center;
}


.titles{
    display: flex; 
    margin: 0%;
    padding: 0% 0% 5px 0%;
    flex-direction: row;
}


.letsconnect{
    width: 33.333%;
    background-color:#002401;
    max-width: 140%;
    height: 100px;
    justify-content: center;
    padding-right: 175px ;
}


.MyInterests{
    width: 33.333%;
    background-color:#002401;
    max-width: 140%;
    height: 100px;
    justify-content: center;
    padding-right: 175px ;
}

.RecentlyPlayed{
    width: 33.333%;
    background-color:#002401;
    max-width: 140%;
    height: 100px;
    justify-content: center;
    text-align: center;
    margin: 0 0 10px 0;

}

.containertwo{
    display: flex; 
    margin: 0%;
    padding: 0%;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
    text-align: center;

}

.connect{
    width: 33%;
    background-color:#174a48;
    height: 750px;
    justify-content: center;
    margin: 0% 0% 0% 0%;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width:  33.333%;

}

.aboutme{
    width:  33.333%;
    background-color:#002401;
    max-width: 140%;
    height:750px;
    justify-content: center;
    padding: 0% 5% 0% 5%;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 


}

.played{
    width:  33.333%;
    background-color:#174a48;
    max-width: 140%;
    height:750px;
    justify-content: center;
   
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width:  33.333%;
   
}


h3{
    font-family: "degular", sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 0;
    text-align: center;
    font-size: 2.1vw;
    margin: 0%;
    color: antiquewhite;

}



h4{
    font-family: "elza-text", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 0 0 0 0;
    text-align: center;
    font-size: 1.2vw;
    color: antiquewhite;
    margin: 0;
}


h5{
    font-family: "degular", sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 0 0 0 0px;
    text-align: center;
    font-size: 2.5vw;
    margin: 0%;
    color: antiquewhite;
    
}

h6{
    font-family: "degular", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-style: normal;
    text-align: center;
    align-items: center;
    font-size: 2.1vw;
    color: antiquewhite;
    margin: 0;
    padding: 0 3% 0 3%;
}

.photoheader{
    display: flex;
    width: 100%;
    padding-top: 10%;
}

.button1{
    background-color:#174a48 ;
    font-family: "degular", sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 0;
    text-align: center;
    font-size: 50px;
    margin: 0%;
    text-align: center;
    font-size: 2.1vw;
    color:  antiquewhite;
    background-color: #174a48;
    border: none;

}

.button1:hover{
    color:#002401;
}


.button2{
    background-color:#174a48 ;
    font-family: "degular", sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 0;
    text-align: center;
    font-size: 50px;
    margin: 0%;
    text-align: center;
    font-size: 2.1vw;
    color: antiquewhite;
    background-color: #174a48;
    border: none;
}

.button2:hover{
    color:#002401;
}



.scroll-left{
 position: relative;
 background-color:transparent;
 color: antiquewhite;
 width: 125%;
 height: 10%;
 text-align: center;
 animation: scroll-left 13s linear infinite;
 padding: 10% 0 0 0;
}

@keyframes scroll-left {
 0%   {
 transform: translateX(100%);       
 }
 100% {
 transform: translateX(-100%); 
 }

}





.container3{
width: 100vw;
overflow: hidden;
}


.art{
display: flex; 
padding: 5% 0 0 0;
flex-direction: row; 
align-items: center; 
justify-content: center; 
width: 100%; 
text-align: center; 
}

.art_img{
    width: 100%;
}

.star{
    width: 100%;
    height: 500px;
}

.contianer4{
    width: 100vw;
    overflow: hidden;
    padding: 10% 0 0 0 ;
}


.scroll2{
    position: relative;
    background-color:transparent;
    color: antiquewhite;
    width: 100vw;
    height: 10%;
    text-align: center;
    animation: scroll-left 9s linear infinite;
    padding: 10% 0 0 0;
}

@keyframes scroll-left {
    0%   {
    transform: translateX(100%);        
    }
    100% {
    transform: translateX(-100%); 
    }
   
}








.carousel {
    position: relative;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
    margin-top: 26px;
    align-items: center;
    width: 100%;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding-top: 10%;
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    
}

.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 1;
}

.carousel-open:not(:checked) + .carousel-item {
    opacity: 0;
}

.carousel-item
{
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
    align-items: center;

}

.carousel-item img {
    display: block;
    height: auto;
    max-width: 80%;
    width: 50%;
    padding-left: 25%;
    padding-right: 10%;
    align-items: center;
}



.carousel-control {
    display: block; 
}

#carousel-1:checked ~ .carousel-control.prev {
    display: block; 
}

#carousel-2:checked ~ .carousel-control.prev,
#carousel-3:checked ~ .carousel-control.prev,
#carousel-4:checked ~ .carousel-control.prev,
#carousel-5:checked ~ .carousel-control.prev,
#carousel-6:checked ~ .carousel-control.prev,
#carousel-7:checked ~ .carousel-control.prev,
#carousel-8:checked ~ .carousel-control.prev,
#carousel-9:checked ~ .carousel-control.prev {
    display: block; /
}


#carousel-1:checked ~ .carousel-control.next {
    display: block;
}


.carousel-control {
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 40px;
    height: 40px;
    line-height: 35px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    cursor: pointer;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 40px;
    z-index: 10;
    
}

.carousel-control.prev {
    left: 10%;
}

.carousel-control.next {
    right: 10%;
}

.carousel-control:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #aaaaaa;
}


.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.carousel-indicators li {
    display: inline-block;
    margin: 0 5px;
    align-items: center;
    text-align: center;
}

.carousel-bullet {
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 35px;
    align-items: center;
    text-align: center;
    
}

.carousel-bullet:hover {
    color: #174a48;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet,
#carousel-4:checked ~ .control-4 ~ .carousel-indicators li:nth-child(4) .carousel-bullet,
#carousel-5:checked ~ .control-5 ~ .carousel-indicators li:nth-child(5) .carousel-bullet,
#carousel-6:checked ~ .control-6 ~ .carousel-indicators li:nth-child(6) .carousel-bullet,
#carousel-7:checked ~ .control-7 ~ .carousel-indicators li:nth-child(7) .carousel-bullet,
#carousel-8:checked ~ .control-8 ~ .carousel-indicators li:nth-child(8) .carousel-bullet,
#carousel-9:checked ~ .control-9 ~ .carousel-indicators li:nth-child(9) .carousel-bullet
{
    color: antiquewhite;
}








@media (max-width: 768px) {
    .container {
        flex-direction: column; 
    }

    .header {
        padding: 20px 0; 
    }

    .logo, .me {
        width: 100%;
        padding: 0;
    }

    .letsconnect, .MyInterests, .RecentlyPlayed {
        height: auto; 
        margin: 5px 0;
    }

    .connect, .aboutme, .played {
        height: auto; 
        flex-direction: column; 
    }

    h1, h2, h3, h4, h5 {
        padding: 0 20px;
    }

    .photoheader img {
        max-width: 100%; 
        height: auto;    
    }
}