@import url('https://fonts.googleapis.com/css2?family=Chango&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');

* {
    margin : 0;
    padding : 0;
    box-sizing : border-box;
}

body {
    background-color : #555;
}

nav {
    background-color : #333;
    padding : 10px;
    margin : 10px;
    border-radius : 10px;
    align-items : center;
    display : flex;
}

nav h1 {
    font-family : 'Chango', cursive;
    text-shadow : 2px 2px 2px #000;
    font-size : 40px;
}

nav h1 a{
    text-decoration : none;
    color : orangered;
    padding-inline : 20px;
    margin : 0;
    width : 20px;
}

nav ul {
    list-style : none;
    display : flex;
    align-items : center;
    margin-left : auto;
    gap : 20px;
}

nav ul li {
    text-shadow : 2px 2px 2px #000;
}

nav ul li a {
    text-decoration : none;
    color : #fff;
    padding : 10px 20px;
    font-family : 'Akaya Kanadaka', cursive;
    font-size : 24px;
}

nav ul li a img{
    width : 20px;
    height : 20px;
}

.grid {
    display : grid;
    grid-template-columns : repeat(3, 1fr);
    grid-template-rows : repeat(3, 1fr);
    gap : 10px;
    padding : 80px;
}

.prod {
    background-color : #fff;
    border: 3px solid black;
    border-radius : 10px;
    padding : 10px;
    width : 280px;
    height : 300px;
    overflow : hidden;
}

.prod img {
    display : block;
    width : 100%;
    height : 170px;
    object-fit : cover;
    border-radius : 6px;
}

.detail img {
    display : block;
    max-width : 400px;
    width : 100%;
    border-radius : 6px;
}

.admin {
    font-family: sans-serif;
    margin: 20px;
    background-color: #fff;
}

.login-card {
    width: 400px;
}