/*REMOVAL*/

.home-desc{
  display: none;
}

#hcb_subscribe {
 visibility: hidden; 
}

.hcb-icon{
  display:none;
}

h3 {
  display:none; 
}



.hcb-comment-tb {
 display:none; 
}

#HCB_comment_box #hcb_form .btn-secondary, #HCB_comment_box #HCB_comment_form_box .btn-secondary {
 display: none; 
}

.author {
  display: none;
}

.date {
  display: none; 
}

/*////////////////*/

.hcb-wrapper{
  /*background-color: white;*/
}

#comments_list{
  /*background-image: url("./images/guestbook_paper.png");*/
  background-color: rgb(254, 255, 252);
}

#HCB_comment_box .hcb-comment-body{
  color:black;
  font-size: 30px !important;
}


body {
   background-image: url("./images/belzoni.jpg");
   color: white;
   padding: 10em;
   margin-left: auto;
   margin-right: auto;
   max-width:100vw;
}


h1 {
    text-align: center;
    font-size: 120px;
    color: white;
    font-family: Vespasian;
    text-shadow: 4px 2px #000000;
}

h2 {
    text-align: center;
    font-size: 60px;
    color: white;
    font-family: Vespasian;
    text-shadow: 4px 1px #000000;
    background-color: rgba(43,40,40,0.5);
    
}

h2 a {
 color: white; 
}

textarea::placeholder {
  color: white;
  opacity: 1;
}

.music-link {
  display: none; 
}




/*SKIN.CSS IMPORTED*/




#HCB_comment_box textarea {
  
}

/* the entire html comment box container. applies to everything */
#HCB_comment_box {
  
  font-family: Vespasian !important;
  
  }
  
#HCB_comment_box #hcb_form textarea {
  
  font-family: Vespasian !important;
  
  text-align: center;
  font-size: 60px !important;
  color: white;
  text-shadow: 4px 1px #000000;
  background-color: rgba(43,40,40,0.5);
  
}

#HCB_comment_box #hcb_form #hcb_form_name {
  display: none;
  font-family: Vespasian !important;
}

#HCB_comment_box #hcb_form .btn, #HCB_comment_box #HCB_comment_form_box .btn {
  font-family: Vespasian !important;
}
  

#HCB_comment_box p.error {
  border: 4px solid #f88;
  background-color: #fee;
  color: #800;
}

#HCB_comment_box textarea, #HCB_comment_box input.text {
  border: 1px solid #ddd;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  background: url(bg.png) repeat-x;
}

#HCB_comment_box .hcb-wrapper-half {
  display:block;
  width:50%;
  float:left;
}
#HCB_comment_box .hcb-wrapper {
  clear:both;
  margin-bottom:0.5em;
}
#HCB_comment_box input.text {
  display:block;
  width:97%;
  
}
/* the submit button */
#HCB_comment_box input.submit {
    margin:0 7px 3px 0;
    background-color:#f5f5f5;
    border:1px solid #ccc;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
#HCB_comment_box input.submit:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}

#HCB_comment_box span.home-desc {
  opacity:0.4;
}

/* the individual comment display containers */
#HCB_comment_box div.comment {
  /*border-top:1px solid #eee;*/
  margin-bottom:0.1em;
  margin-left:1em;
}

/* the moderator message */
.hcb-mod  b{
  color:black;
}

/* next, prev, ok and x link style */
.hcb-link {
  color:blue;
  text-decoration:underline;
}












/* STYLE.CSS IMPORTED */

/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: Vespasian;
    src: url(font/VESPASIAN_TIMES.ttf);
}

@font-face {
    font-family: Gelio;
    src: url(font/Gelio_Kleftiko.ttf);
}

@font-face {
    font-family: HerrCooles;
    src: url(font/HerrCoolesWriting.ttf);
}

@font-face {
    font-family: Spray;
    src: url(font/Spray_Letters.otf);
}

@font-face {
    font-family: Pixel;
    src: url(font/Mega-Man-ZX.ttf);
}

@font-face {
    font-family: Valencia;
    src: url(font/Valencia.ttf);
}



.main{
  background-color: white;
  color: black;
  font-family: Sans-Serif;
  
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 5%;
  max-width: 60em;

  
 
  background-repeat: repeat-y;
  background-position: center;
  
  border: solid;
  }
  
p{
 font-size:25px; 
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.vocab{
  max-width:5em;
  display: inline-block;
}

.vocab img{
  max-width:100%;
  border: solid;
 
}

.vocab p{
 font-size:10px; 
 text-align: center;
 margin-top: 0px;
 margin-bottom: 20px;
}

.example{
  max-width:10em;
  display: inline-block;
}

.example img{
  max-width:100%;
  border: solid;
 
}

.example p{
 font-size:10px; 
 text-align: center;
 margin-top: 0px;
 margin-bottom: 20px;
}

/*
.gallery-item {

  margin: 100px;
  border: 1px solid #ccc;
  float: left;
  width: 32%;
}

.gallery-item:hover {
  border: 1px solid #777;
}

.gallery-item img {
  width: 100%;
  height: auto;
}

*/



/*Image modal*/
.modal {
    width: 75%;
    height: 75%;
    position: fixed;
    top: 0;
    /*display: block;*/
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.733);
    /*background-image: url("./images/bg-frame.png");*/
    border-image: url("./images/crack_pattern.png");
    margin-top: -1px;
    animation: zoom 0.3s ease-in-out;
}



@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.modal img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    object-fit: cover;
    opacity:1;
    align-content: center;
}

.modal a {
  display: block;
  /*color: white;*/ 
  font-size: 24px;
  text-align: center;
  margin: 40px;
}

.modal a {
   font-family: Pixel; 
   font-size: 16px;
}

a:hover {
  background-color: white;
  color:black;
}


.closeBtn {
    color: rgba(255, 255, 255, 0.87);
    /*font-size: 25px;*/
    max-width:25px;
    position: absolute;
    top: 0;
    right: 0;
    margin: 20px;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}
.closeBtn:hover {
    color: rgb(255, 255, 255);
}




.title{
 border-image: url('./images/greek_border.PNG') 30/ 10px;
 border-image-repeat: repeat;
 max-width: 10em;
 margin-left: auto;
 margin-right: auto;
 
}

/*h2 {
    font-family: Gelio;
    text-align: center;
    font-size: 40px;
    color: white;
    text-shadow: 4px 4px #000000;
}*/

/*a {
  color: white;
  text-decoration: none; 
}*/

.bandcamp {
  display: block;
  /*margin-left: auto;*/
  /*margin-right: auto;*/
  margin: 0 auto;
  margin-bottom: 100px;
  margin-top: 100px;
  /*text-align: center;*/
  border: 0; 
  width: 50%; 
  height: 120px;
}

.youtube {
  display: block;
  /*margin-left: auto;*/
  /*margin-right: auto;*/
  margin: 0 auto;
  margin-bottom: 100px;
  margin-top: 100px;
  /*text-align: center;*/
  border: 0; 
  /*width: 50%; */
  /*height: 120px;*/
}

.scroll-left {
 height: 100px;	
 overflow: hidden;
 position: relative;
}
.scroll-left .inner {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 15s linear infinite;
 -webkit-animation: scroll-left 15s linear infinite;
 animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}



@media (max-width: 600px) {
  body {
    width:100%;
  }
}


#model {
    /*display: grid;*/
    /*grid-template-columns: 1fr 1fr;*/
    height: 20em;
}

model-viewer {
 height: 100%; 
 width: 100%;
}





/*.gallery {*/
/*  background-image: url("./images/bg-frame.png");*/
/*  background-repeat: repeat-y;*/
/*}*/

/*#frames {*/
/*  display: block;*/
/*  margin-left: auto;*/
/*  margin-right: auto;*/
/*  width: 70%;*/
/*  z-index: 0;*/
/*}*/