:root {
  --smoky-black: #050B1E;
  --catalina-blue: #193060;
  --st-tropaz: #315381;
  --polo-blue: #859FC0;
  --pattens-blue: #CEE0F4;
}

body {
  margin: 0 auto;
  font-family: "Montserrat Alternates", sans-serif;
  color: var(--smoky-black);
}

.container{
  padding: 0 16px;
  width: 1300px;
}

/* HEADER */
.header{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  background-color: var(--catalina-blue);
}
.header__title{
  color: white;
  text-align: center;
}

.main{
  display: flex;
  justify-content: center;
}

/* FORM */
#form{
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 600px;
  margin: 30px auto;
  padding: 25px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}

.input {
  padding: 12px 15px;
  font-size: 1rem;
  border: 2px solid var(--polo-blue);
  border-radius: 8px;
  transition: all 0.3s ease;
}
.input:focus {
  border-color: var(--catalina-blue);
  box-shadow: 0 0 6px rgba(25,48,96,0.4);
  outline: none;
}

#create-btn{
  background-color: var(--catalina-blue);
  color: var(--pattens-blue);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
}
#create-btn:hover{
  background-color:white;
  color: var(--catalina-blue);
  border: #193060 2px solid;
}

/*LIST */
.list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 auto;
  max-width: 1300px;
  list-style: none;
  justify-content: center;
}
.list__item{
  border: var(--polo-blue) solid 1px;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}
.list__item:hover{
  border: 1px solid var(--catalina-blue);
}
.item__img{
  border-radius: 12px;
}
.item__id{
  background-color: var(--catalina-blue);
  color: var(--pattens-blue);
  border-radius: 8px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 12px;
}
.item__id:hover{
   background-color:white;
  color: var(--catalina-blue);
  border: #193060 2px solid;
}

/* LOAD BTN */
.load-btn {
 background-color: var(--catalina-blue);
  color: var(--pattens-blue);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  border: none;
  padding: 10px 50px;
  cursor: pointer;
  display: block;
  margin: 20px auto;
  font-size: 16px;
}
.load-btn:hover{
    background-color:white;
  color: var(--catalina-blue);
  border: #193060 2px solid;
}
.invisible-btn{
    display: none;
}