body{
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  overflow-y: scroll; /* Always show a vertical scrollbar */
}

#background{
  background-position-x: center;
  background-image: url('image.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  height: 100vh;
}

h1{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 24pt;
  margin: 0px;
}
a{
  text-decoration: none;
}
@font-face {
  font-family: 'Lemon Milk';
  src: url('lemonmilk.woff2') format('woff2'),
       url('lemonmilk.woff') format('woff'),
       url('lemonmilk.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#top,a{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  color:grey;}

#top{
  color: rgb(167, 167, 167);
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

#tagline{
  margin: 0 0 20px 0;
}

#socials{
  text-align: center;
}

#bertin{
  
  column-count: 2;
  column-gap: 25px;
  text-align: justify;
  
}
#bertin p{
  margin: 0;
}

#items{
  margin: 0 auto;
  max-width: 600px;
  max-height: 80vh;
}

#single_item{
  padding: 10px 10px;
  border: 0px solid #ccc;
}

#item_image_div {
  width: 100%;
  border: 0px solid rgb(187, 187, 187);
  text-align: center;
}

#item_image {
  vertical-align: middle;
  background-color: blue;
  max-width: 100%; 
  max-height:80vh; 
}

#youtube{
  background-color: #0d172a;
  position: relative;
  width: 100%;
  margin: 0;
  left: 0;
  top: 0;
  padding: 0;
}

#titlebox{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
}

#inline{
  height: 50px;
  line-height: 50px; /* Should match the container's height */
  text-align: center;
}

p{
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#item_date{
  color: rgb(185, 185, 185);
  font-size: small;
  margin-top: 0px;
  border: 0px;
}

#item_title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(34, 34, 34);
  font-size: large; 
  margin-top: 0px;
}

#item_info{
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(79 79 79);
  font-size: medium;
  line-height:16pt;
  margin-top: 20px;
  padding-bottom: 40px;
}

/* LOGIN */

h2{
  font-family: Arial, Helvetica, sans-serif;
  }

#login{
  background-color: coral;
  margin: 0 auto;
  padding: 20px;
}

/* FORM */

#mainpanel{
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif;
}

#panel{
 float:left;
 width: 45%;
 padding: 5px;
}

#sidepanel{
  float: right ;
  width: 45%;
  padding: 5px;
}

.classfield{
  padding: 5px;
  width: 100%;
}

#greenbutton{
  background-color: green;
  color: white; 
  border: none; 
  border-radius: 5px; 
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block; 
  cursor: pointer;
}

#itema{
  display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#itema #one {
   flex: 2; /* Allow flex children to grow and take available space */
}

#two{
 
}

#itema #one p, #itema #one input {
  display: inline-block; /* Inline-block for internal elements */
  margin:0px; /* Adjust as needed */
  width: 90%;
}

#left{
  float:left;
}
#right{
  float: right;
}

#button{
  border: none; 
  border-radius: 5px;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block; 
  cursor: pointer;
  }

#deletex{
  background:none;
  color: rgb(236, 14, 14); 
  border: none; 
  border-radius: 100%; 
  padding: 8px 10px;
  margin: 1px;
  text-decoration: none;
  display: inline-block; 
  cursor: pointer;
}

/* FORM input fields*/

.styled-text-input{
  width: 100%;
  padding: 10px;
  border: 1px solid #3b3b3b;
  border-radius: 5px;
  font-size: 16px;
}

/* SMARTPHONE exeptions*/

@media screen and (max-width: 800px) {
  #panel{
    width:90%;
  }

  #sidepanel{
    float:none;
    width:90%;   
  }
  
  #bertin{
    column-count: 1;
    margin: 15px;
  }

}