@font-face {
  font-family: "info";
  src: url(Exo-Light.ttf);
}

@font-face {
  font-family: "title";
  src: url(OptimusPrinceps.ttf);
}
 
 h1{
      font-family: "title";
      font-size: 30px;
      color:#e92f1e;
  }

@font-face {
  font-family: "menu";
  src: url(OldGateLaneNF.ttf);
}

.gravitas-one-regular {
    font-family: "Gravitas One", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  
  .epunda-slab {
    font-family: "Epunda Slab", serif;
    font-optical-sizing: auto;
    font-weight: 5;
    font-style: normal;
  }


  

  button .About {
    display: none;
  }
  
  button:hover .A {
    display: none;
  }
  
  button:hover .About {
    display: inline;
  }
  
  button .Need {
    display: none;
  }
  
  button:hover .N {
    display: none;
  }
  
  button:hover .Need {
    display: inline;
  }
  
  button .Dreams {
    display: none;
  }
  
  button:hover .D {
    display: none;
  }
  
  button:hover .Dreams {
    display: inline;
  }
  
  button .Read {
    display: none;
  }
  
  button:hover .R {
    display: none;
  }
  
  button:hover .Read {
    display: inline;
  }
  
  button .Every {
    display: none;
  }
  
  button:hover .E {
    display: none;
  }
  
  button:hover .Every {
    display: inline;
  }
  
  button .What {
    display: none;
  }
  
  button:hover .W {
    display: none;
  }
  
  button:hover .What {
    display: inline;
  }

  button .Home {
    display: none;
  }
  
  button:hover .ex {
    display: none;
  }
  
  button:hover .Home {
    display: inline;
  }
  

  html, body {
  height: 100%;
  margin-top: 0;
  height:fit-content;
}

#bodyhome{
  height:100vh;
  min-height:100vh;
}

#sleek{
  margin:0;
  padding:0;
}

  body{
    background-color: #f6ecff;
    margin:0;
  }

  main{
    margin-left:5%;
    margin-right: 5%;
  }

  ul{
    list-style-type:armenian;
    color:#3CA8AA

  }

header{
  margin-left:5%;
  margin-top: 2%;
}

.homeBackgroundImg{
    background-image: url("backgroundSky.png");
    background-size: 100% 100vh;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
  }



  
  p{
      font-family: 'info';
      font-size: 16px;
      color:1B1B3A;
      background-image: linear-gradient(rgba(195, 201, 240, 0.762),rgba(225, 212, 255, 0.762));
      border-color:#5f5f5f;
      border: 2 px solid #5f5f5f;
      border-radius: 20px;
      padding: 10px;
  }

  
  .small_text {
      font-family: "Epunda Slab", serif;
      font-size:12px;
  }
  
.small{
    font-family: "menu";
      font-size: 50px;
      color:#1B1B3A;
      text-align: center;
      background-color: none;
      padding:none;
      border-radius: none;
  }

  

    .lsmall{
    font-family: "menu";
      font-size: 30px;
      color:#1B1B3A;
      text-align: center;
      background-color: #39146300;;
      padding:none;
      border-radius: none;
      text-decoration: none;
  }

  .big{
    font-family: "title";
      font-size: 30px;
      color:#1B1B3A;
      text-align: center;
      background-color: none;
      padding:none;
      border-radius: none;
  }

    .xbig{
    font-family: "menu";
      font-size: 8vw;
      color:#1B1B3A;
      text-align: center;
      background-color: none;
      padding:none;
      border-radius: none;
  }

  .lxbig{
    font-family: "menu";
      font-size: 4vw;
      color:#1B1B3A;
      text-align: center;
      background-color: #39146300;;
      padding:none;
      border-radius: none;
      text-decoration: none;
      font-weight: normal;
  }

.inline{
    display:inline;
}
  .center {
    margin: auto;
    width: 50%;
    padding: 10px;
  }

  .centerish {
    margin: auto;
    margin-right: 10%;
    width: 50%;
    padding: 10px;
  }

  .centerb {
    margin: auto;
    width: 100%;
    margin-right: 10%;
    align-items: right;
    justify-content: right;
    display: flex;
    flex-direction: row;
  }

  .itext{
    opacity:1;
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out;
    max-height:500px;
    text-overflow: clip;
  }

  .itext.hide{
    opacity:0;
    display:block;
    max-height: 0;
    overflow:hidden;
    margin:0;
    padding:0;
  }


  .img1{
    opacity:1;
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out;
    max-height:1000px;
  }

  .img1.hide{
    opacity:0;
    display:block;
    max-height: 0;
    overflow:hidden;
    margin:0;
    padding:0;
  }


  .centerba{
    margin: auto;
    width: 100%;
    margin-right: 10%;
    align-items: right;
    justify-content: right;
    display: flex;
    flex-direction: row;
    mix-blend-mode: difference;
  }

  .button1{
    background-color: #EE6055;
    border: #1B1B3A;
  }
  
  h2{
      font-family: "title";
      font-size: 24px;
      color:#ff8a2b;
  }
  
  h3{
      font-family: "title";
      font-size: 20px;
      color:#78BC61;
  }
  
  a{
      text-decoration: none;
      color: #4334ec;
      background-image: linear-gradient(rgba(195, 201, 240, 0.762),rgba(225, 212, 255, 0.762));
      padding:10px;
      border-radius: 10px;
  }
  
  a:hover{
      text-decoration: underline;
      color: #cb2803;
      background-image: linear-gradient(rgba(179, 185, 231, 0.762),rgba(188, 179, 231, 0.762));
      padding:10px;
      border-radius: 10px;
  }
  
  a:visited{
      text-decoration: none;
      color: #FF9B85;
      background-color: #2d5e7a9c;
      padding:10px;
      border-radius: 10px;
  }

  .lbig{
    font-family: "menu";
      font-size: 20px;
      color:#1B1B3A;
      text-align: center;
      background-color: #1B1B3A00;;
      padding:none;
      border-radius: none;
      text-decoration: none;
  }

  #nocenter{
    position:fixed;
    top:-1%;
    left:4%;
    font-family: "menu";
    text-align: left;
    font-size: 3.2rem;
    width:10%;
    display: inline;
     font-weight: normal;
    margin-right:1%;
  }

    #nocenter2{
    font-family: "menu";
    text-align: left;
    font-size: 50px;
    display: inline;
     font-weight: normal;
    margin-left: 10%;
    margin-right:1%;
  }
  

  
  #grey{
      background-color: #F8F4E3;
  }
  #purple{
      background-color: #391463;
  }
  #teal{
      background-color: #2D5E7A;
  }
  #blue{
      background-color: #3CA8AA;
  }
  #red{
      background-color: #C04735;
  }

.morph-btn {
  max-width: 1100px;
  height: 100%;
  background: #70aedbb3;
  border: 3px solid black;
  border-radius: 3%;
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: hidden;
  flex-direction: row;
margin-right:1%;
box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.3);
margin-top:5px;

  transition: max-width 0.8s ease-in-out, height 0.4s ease,box-shadow 0.4s ease, margin-top 0.4s ease;
}

.morph-btn:hover {
  max-width: 1000px;
  background-color: #88ceffb3;
  transition: background-color 0.8s ease;
  margin-top:-5px;
  box-shadow: 15px 15px 5px 2px rgba(0, 0, 0, 0.3);
  transition: max-width 0.8s ease, height 0.4s ease,box-shadow 0.4s ease, margin-top 0.4s ease;
}


.morph-btn .short {
  white-space: nowrap;
  opacity: 1;
  max-width: 300px;
  overflow: hidden;

  transition: opacity 0.8s ease, max-width 0.8s ease
}

.centera {
  mix-blend-mode: difference;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
  }

.downHeader{
margin-top: 8%;
}


.morph-btn .full {
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;


  transition: opacity 0.8s ease, max-width 0.8s ease
}


.morph-btn:hover .short {
  opacity: 1;
  max-width: 300px;
}

.morph-btn:hover .full {
  opacity: 1;
  max-width: 1000px;
  margin-right: 0px;
}

.hidden {
  opacity: 0;
  max-width: 0;
  margin-right: 0;
  overflow: hidden;
  transition: opacity 0.8s ease, max-width 0.8s ease
}

#click-msg{
  color:#baffc2;
  position: fixed; 
    top: -3%;
    left: -80%; 
    z-index: 1000; 
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.1s ease; 
    pointer-events: none; 
    font-family: 'info';
}

#click-msgb{
  color:#ff6464;
  position: fixed; 
    top: -3%;
    left: -38%; 
    z-index: 1000; 
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.1s ease; 
    pointer-events: none; 
    font-family: 'info';
}

.nice{
  margin-left: 5%;
  font-family:'info';
  color:#3CA8AA
}

.img1{width:30%}

.home{width: 11%; aspect-ratio: 4/3;}

hgroup{
  background-image: linear-gradient(rgba(0, 167, 134, 1),rgba(16, 189, 154, 0.8));
  height: 75px;
  padding:1%;
  border-radius: 2em;
  border-top-right-radius: 0;
  border-top-left-radius: 0; 
  margin-bottom:2%;
  position: sticky;
  top: 0;
  white-space: nowrap;
}

hr{
  margin-left:2%;
  width:85%;
  height:2px;
  background-color: #479ed0;
  border-radius: 1em;
}

.row{
  margin-left:0.5%;
  display: inline-flex;
  flex-direction: row;
}

.gallery{
  display:flex;
  flex-direction: column;
  position:relative;
  height:auto;
  
}

.gallery-within{
display:flex;
  flex-direction: row;
  position:relative;
  height:fit-content;
  
}

.gallery-stack .gallery-item{
  position:absolute;
  display:flex;
    width:95%;
    margin:auto;
    opacity:1;
    transition: opacity 0.5s ease;
    inset:0;
    object-fit:cover;
}

#last-button{
  margin-right: 15%;
}

section{
margin-left:30%;
margin-right:30%;
border: 3px solid #1B1B3A;
padding:2%;
padding-left: 5%;
padding-right: 5%;
}

.gallery-stack {
  position: relative;
  width: 100%;
  margin: auto;
  aspect-ratio: 3/4;
  
}
.gallery-selection{
  height:2%;
  aspect-ratio: 1;
align-self: center;
align-content: center;
background: #78BC61;
  border: 2px solid black;
  cursor: pointer;
  color:#1B1B3A;
  font-size: 2em;
  font-weight: 200;
position:relative;
z-index:1000;
}

.gallery-description{
position:relative;
z-index:1000;
margin:0%;
}

.sm_height{
    max-height: 78px;
  }

.iselect{
  border:#1B1B3A solid 2px;
  padding:0.3%;
  cursor:pointer;
  width:fit-content;
  transition: background-color 0.3s ease-in-out;
}

.iselect:hover{
background-color: #b4ffc7;
transition: background-color 0.3s ease-in-out;
}

.hide{
  display:none;
}

.gallery-stack .hide{
  opacity:0;
}

  @media (max-width:768px) {
  .homeBackgroundImg {
    background-size: auto 100vh;
    background-position: 100% center;

   } .xbig{
    font-family: "menu";
      font-size: 5em;
      color:#1B1B3A;
      text-align: center;
      background-color: none;
      padding:none;
      border-radius: none;
  }

  .morph-btn {
  max-width: 1100px;
  max-height: 150px;
  background: #78bc61b3;
  border: 3px solid black;
  border-radius: 3%;
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: hidden;
  flex-direction: row;
margin-right:1%;

}
  .morph-btn .short {
  white-space: nowrap;
  opacity: 1;
  max-width: 300px;
  overflow: hidden;

  transition: opacity 0s ease, max-width 0s ease;

}
  .morph-btn .full {
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;

  transition: opacity 0s ease, max-width 0s ease;
}

.addWidth{

   min-width: 60%;
  max-width: 60%;
  justify-content: center;
}
  .lxbig{
    font-family: "menu";
      font-size: 2.5em;
      color:#1B1B3A;
      text-align: center;
      background-color: #39146300;;
      padding:none;
      border-radius: none;
      text-decoration: none;
      font-weight: normal;

  }

  .hidden {
  opacity: 0;
  max-width: 0;
  margin-right: 0;
  position:relative;
  overflow: hidden;

  transition: opacity 0s ease, max-width 0s ease;}
  
  .centerb {
    mix-blend-mode: difference;
    margin: auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
  }

  #last-button{
  margin-right: 1%;
}

}