/* Body */
body{
    background: #01011C;
    height: 100vh;
    margin: 0;
    transition: background 0.2s linear;
}

/*Dark-Theme*/
body.dark{
    background: #ffffff;
}

body.dark .title.one{
    color: #01011C;
}

body.dark .title.two{
    color: #01011C;
}

body.dark .title.threehalf{
    color: #01011C;
}

body.dark .content-box p{
    color: #01011C;
}

body.dark .title.four{
    color: #01011C;
}

body.dark .title.three{
    color: #01011C;
}

body.dark #carrinho .flex-box .ticket-list .ticket .controls button{
    font-family: Poppins;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    color: #01011C;
    border: 2px solid #01011C;
    border-radius: 255px;
}

body.dark #carrinho .flex-box .ticket-list .ticket .controls span{
    font-family: Poppins;
    font-size: 19px;
    font-weight: 700px;
    color: #01011C;
}

body.dark #carrinho .flex-box .form input{
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400px;
    background: transparent;
    padding: 0 20px;
    height: 54px;
    border: 1px solid #01011C;
    border-radius: 255px;
    color: #01011C;
}

body.dark #carrinho .flex-box .ticket-list .ticket{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    border: 1px solid #01011C;
    border-radius: 25px;
}

body.dark #finalizacao .flex-box .ticket .quantity-box{
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #01011C;
}

body.dark .lightblue-text{
    color: #0000FF;
}

/* Global Spacing */
.pad10-top{
    padding-top: 10px;
}

.pad20-top{
    padding-top: 20px;
}

.pad30-top{
    padding-top: 30px;
}

.pad10-bottom{
    padding-bottom: 10px;
}

.pad20-bottom{
    padding-bottom: 20px;
}

.pad30-bottom{
    padding-bottom: 30px;
}


/* Header */
/* No meu header, dentro da classe menu, dentro da tag ul eu quero estilizar o meu "a"*/
#header{
    background: #01011C;
}

#header .menu ul a{
    font-family: Poppins;
    font-size: 19px;
    font-weight: 400;
    color: white;
    text-transform: uppercase;
}

#header .flex-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#header .flex-box nav{
    display: flex;
    align-items: center;
    gap: 36px;
}

#header .flex-box .logo img{
    max-width: 170px;
}

/* Tipografia */
.title{
    font-family: Poppins;
    line-height: 1.2;
    color: #ffffff;
}

.title.one{
    font-size: 90px;
    font-weight: 700;
}

.title.two{
    font-size: 60px;
    font-weight: 700;
}

.title.threehalf{
    font-size: 28px;
    font-weight: 700;
}
.title.three{
    font-size: 24px;
    font-weight: 600;
}

.title.four{
    font-size: 19px;
    font-weight: 600;
}

.title.center{
    text-align: center;
}

.content-box p{
    font-family: Poppins;
    font-size: 19px;
    font-weight: 400;
    color: white;
}

.blue-text{
    color: #0000FF
}

.lightblue-text{
    color: #A5A5FF;
}

/* Botões */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins;
    font-size: 18px;
    font-weight: 700;
    width: 300px;
    height: 60px;
    border-radius: 255px;
    transition: 0.4s;
}

.btn.solid{
    background: #0000FF;
    color: #ffffff;
    border: 2px solid #0000FF;
}

.btn.solid:hover{
    background: #4444ff;
    border-color: #4444ff;
}

.btn.outline{
    background: transparent;
    color: #A5A5FF;
    border: 2px solid #A5A5FF;
}

.btn.outline:hover{
    background: #A5A5FF;
    color: #ffffff;
}

/* Grid */

.container{
    padding: 10px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Seções */
#principal{
    padding: 50px 0;
}

#principal .flex-box{
    display: flex;
    align-items: center;
    gap: 75px;
}

#sobre{
    padding: 50px 0;
    /* padding: superior/inferior e esquerdo/direito */
}

#sobre .flex-box{
    display: flex;
    align-items: center;
    gap: 75px;
}

#sobre .flex-box .left,
#sobre .flex-box .right{
    width: 100%;
}

#sobre .flex-box .left img{
    width: 100%;
}

#artistas{
    padding: 50px 0;
}

#artistas .artist-list{
    display: flex;
    gap: 15px;
}

li {
    list-style-type: none;
  }

#finalizacao{
    padding: 50px 0;
}

#finalizacao .flex-box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 50px;
}

#finalizacao .flex-box .ticket{
    position: relative;
    min-width: 700px;
    min-height: 370px;
    border: 1px solid #0000FF;
    border-left-width: 100px;
    padding: 40px;
}

#finalizacao .flex-box .ticket img{
    position: absolute;
    right: 20px;
    bottom: 20px;
}

#finalizacao .flex-box .ticket .quantity-box{
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ffffff;
}

#carrinho{
    padding: 50px 0;
}

#carrinho .flex-box{
    display: flex;
    gap: 40px;
}

#carrinho .flex-box .left,
#carrinho .flex-box .right{
    width: 100%;
}

#carrinho .flex-box .right{
    max-width: 300px;
}

#carrinho .flex-box .ticket-list{
    margin-top: 30px;
}

#carrinho .flex-box .ticket-list .ticket{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    border: 1px solid #A5A5FF;
    border-radius: 25px;
}

#carrinho .flex-box .ticket-list .ticket .controls{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

#carrinho .flex-box .ticket-list .ticket .controls button{
    font-family: Poppins;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 255px;
}

#carrinho .flex-box .ticket-list .ticket .controls span{
    font-family: Poppins;
    font-size: 19px;
    font-weight: 700px;
    color: #A5A5FF;
}

#carrinho .flex-box .form{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#carrinho .flex-box .form input{
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400px;
    background: transparent;
    padding: 0 20px;
    height: 54px;
    border: 1px solid #A5A5FF;
    border-radius: 255px;
    color: #ffffff;
}

#carrinho .flex-box .form button{
    margin-top: 30px;
}