@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Edu+AU+VIC+WA+NT+Dots:wght@400..700&family=Righteous&family=Sacramento&family=Science+Gothic:wght@100..900&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Archivo Black, Helvetica, sans-serif;
}

body{
background: blue;
color:black;
height:100vh;
display:flex;
justify-content: center;
align-items:center;
}

   .header{
position:absolute;
top:30px;
left:40px;
}

.top-logo{
width:80px;
}
nav{
width:100%;
position:absolute;
top:30px;
right:40px;
}

nav ul{
list-style-type:none;
display:flex;
justify-content:flex-end;   /* pushes items to the right */
gap:1.5rem;
margin:0;
padding:0;
}

nav a{
text-decoration:none;
color:black;
font-size:18px;
transition:0.3s;
}
.container{
display:grid;
grid-template-columns: 1fr 1fr;
gap:120px;
align-items:center;
width:80%;
}



.card{
 background-color: blue;
border-radius: 4px;
border: 5px black solid;
padding:40px;
width:260px;
text-align:center;
}



.logo{
width:90px;
margin-bottom:20px;
}




.order{
font-size:14px;
margin-bottom:10px;
}

.number{
font-size:20px;
font-weight:bold;
margin-bottom:20px;
}




button{
border:2px solid black;
background:white;
padding:8px 18px;
cursor:pointer;
font-weight:bold;
transition:0.2s;
}

button:hover{
background:black;
color:white;
}


.welcome h1{
font-size:56px;
line-height:1.1;
font-weight:600;
}

.music-btn{
position:fixed;
bottom:30px;
right:40px;
border:2px solid black;
background:white;
padding:10px 20px;
cursor:pointer;
}

.background-video{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-1;
}
@media (max-width: 768px){

body{
padding:20px;
align-items: flex-start;
background: blue;
color:black;
}


.header{
position:absolute;
top:20px;
left:20px;
}

.container{
grid-template-columns: 1fr;
gap: 40px;
text-align:center;
}




.card{
margin: 50px;;
}

.number{
    font-size:18px;
    font-weight:bold;
}



.welcome h1{
font-size:48px;
}




.header{
top:20px;
left:20px;
}

.top-logo{
width:60px;
}

.top-logo{
width:60px;
}


.music-btn{
bottom:20px;
right:20px;
}
nav{
position:absolute;
top:20px;
right:20px;
}

nav ul{
display:flex;
gap:15px;
font-size:14px;
}


}