.project-title {
  margin-top: 48px;
  margin-left: 24px;
  color: #000000;
  font-family: "IBM Plex Mono", monospace;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: -0.02em;
}

.project-meta {
  margin-left: 24px;
  padding: 0;
  color: #000000;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  line-height: 0.7;
  letter-spacing: 0.01em;
  margin-bottom: 50px;
}

.index-instructions {
    margin-left: 24px;
  padding: 0;
  color: #072aec;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: 0.7;
  letter-spacing: 0.01em;
  margin-bottom: 50px;

}

.back-link {
  display: inline-block;
  margin-bottom: 0;
  color: #072aec;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
}


html {
  overflow-x: hidden;
}

*{
    box-sizing:border-box;
}

html,body{
    margin:20px;
    height:60%;
    background:#ffffff;
}

body{
    display:flex;
    flex-direction:column;
    padding-bottom: 24px;
}

.toolbar{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    padding:14px 20px;

    background:white;

    border-bottom:1px solid #ddd;

    position:sticky;
    top:0;
    z-index:20;
}

.toolbar input{

    width:260px;

    padding:10px 14px;

    border:1px solid #ccc;

    border-radius:999px;

    outline:none;

    font-size:15px;

    font-family: "IBM Plex Mono", monospace;
    font-weight: normal;
    letter-spacing: 0.02em;
    font-color: #072aec;
}

.buttons{

    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

button{

    border:none;
    font-family: "IBM Plex Mono", monospace;
    font-size: 20px;
    letter-spacing: -0.02em;

    background:white;

    border:1px solid #F0F0F0;

    padding:10px 14px;

    cursor:pointer;

    border-radius:999px;

    transition:.15s;
}

button:hover{
    background:#072aec;
    color: #ffffff;
}

#fridge{

    flex:1;

    position:relative;

    margin:24px auto;

    width:min(1400px,94vw);

    background:
        linear-gradient(#fbfbfb,#f2f2f2);

    border-radius:8px;

    box-shadow:
        inset 0 0 0 1px #ddd,
        0 10px 30px rgba(0,0,0,.08);

    overflow:hidden;

    min-height:40vh;
}

#tray{

    display:flex;

    flex-wrap:wrap;

    align-content:flex-start;

    gap:10px;

    min-height:300px;

    background:white;
    border-top:1px solid #ddd;
    margin-bottom: 100px;
}

.magnet{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 12px;

    min-height:34px;

    background:white;

    border:1px solid #ffffff;

    border-radius:1px;

    cursor:grab;

    user-select:none;

    font-family:"Times New Roman", serif;

    font-style:italic;

    font-weight:normal;

    color: black;

    white-space:nowrap;
}

#fridge .magnet{

    position:absolute;
}

.selected{

    outline:2px solid #072aec;
    outline-offset:0px;
}


#mobile-block{
    display:none;
}


@media (max-width: 900px){

    #desktop-content{
        display:none;
    }

    #mobile-block{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100vw;
        height:100vh;
        background:#f7f7f4;
    }

    .mobile-error{
        text-align:center;
        font-family:"Times New Roman", serif;
        font-style:italic;
        color:#222;
        padding:2rem;
    }

    .mobile-error h1{
        font-weight:400;
        font-size:2.2rem;
        margin-bottom:1rem;
    }

    .mobile-error p{
        font-size:1.1rem;
        line-height:1.5;
    }

    .project-meta {
  font-size: 12px;
  line-height: 1;
}

}