:root {

  scrollbar-color: rgb(43, 78, 129) transparent;
    font-family: 'm6x11';
}
html {
  background-color: rgb(229, 231, 240);
  background-image: url("img/inkbackground.png");
background-size:cover;
  background-repeat: no-repeat;
    background-position: center ;
    min-height: 100%;
}

body{
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;

}

header{
width: 100%;
background-color: rgb(214, 207, 192);
border-width: 0px 0px 2px 0px;
border-style: solid;
border-color: rgb(20, 27, 41);
box-sizing: border-box;
display: flex;
flex-direction: column;
}

#top{
background-color: rgb(109, 117, 155); 

border-bottom: 1px solid;
border-color: rgb(50, 77, 95); 
display: flex;
align-items: center;
margin: 0;
flex-direction: row;
justify-content: space-between;
padding: 3px;

}
#top div{
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
}
#top b{
text-decoration: underline;
text-decoration-thickness: 3px;
color: rgb(22, 38, 75);
}
#top div a{
text-decoration: none;
  color: rgb(230, 227, 221); 
margin: 0;
  font-size: 21px;
text-decoration: underline;
text-decoration-thickness: 3px;
}
#top div a:hover{
color: rgb(58, 57, 56);
  font-size: 22px;
}
#top h1{
margin: 0;
font-size: 25px;
letter-spacing: 0.5px;

}
#home {
text-decoration: none;
color: rgb(4, 7, 36);
margin: 0;
  font-size: 21px;
text-decoration: underline;
text-decoration-thickness: 3px;
}
#home:hover{
color: rgb(209, 201, 167);
  font-size: 22px;
}
#container{
align-self: flex-start;
display: flex;
flex-direction: row;
width: 100%;
max-height: 880px;
padding: 26px;
gap: 26px;
flex-wrap: wrap;
overflow: auto;
box-sizing: border-box;
scrollbar-width: thin;
position: relative;
}
#ink-container{
height: 400px;
width: 350px;
background-color: rgb(241, 238, 232);
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
padding: 25px;
transition: all 0.3s ease-in-out;
box-sizing: border-box;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.3);
}
#ink-container h1{
    font-family: 'relationship of melodrame';
font-size: 30px;
letter-spacing: 0.5px;
}
.ink{
  height: 250px;
  width: 250px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 1s ease-in-out;
}
.ink:hover{
filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
}
.close{
position: absolute;
top: 0;
right: 0;
margin: 10px;
display: none;
cursor: pointer;
}
.close img{
height: 30px;
width: 30px;
border-radius: 50%;
}
.ink-content{
display: none;
align-self: flex-start;
transition: opacity 0.8s;
font-family: 'diffusion';
font-size: 12px;

    animation-name: fade-in;
    animation-duration: 1s;

}
#ink-container:hover{
transform: scale(1.05);
}


@keyframes fade-in {
    from { opacity: 0; }
    to { opacity:1; }
}



@media (max-width: 800px) {
header{
position: relative;
overflow: auto;
flex-wrap: nowrap;
}
#container{
align-items: center;
justify-content: center;
}

}