@charset "utf-8";

/*Colors definition*/
:root{
    --mainText: white;
    --leftBack: #e1e6eb;
    --backTabInact: #f2ebeb;
    --colorTabInact: #a7bbcf;
    --backBtnSend:  #af0b0b;
    --hoverBtnSend: #e7a224;
    --colorTextLeft: black;
    --backDataLeft: #435c73c4;
    --backNote : #243652b5;
    --backLight: #ffffff2b;
}
html{
    color: var(--mainText);
    font-size: 14px;
    font-family: 'Red Hat Display', sans-serif;
    overflow:hidden
}
body{
margin:0;
overflow:hidden;
}
*{
  box-sizing:border-box;
}
/*Block contains left and right panels, 
top and bottom in narrow screens*/
main{
    position:relative;
    height:100vh;
    display:flex;
    align-content:center;
    align-items: center;
}
/*Left expandible area */
.left{
    display: flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items:center;
    height: 100%;
    width:0%;
    transition: width 800ms;
    position:relative;
    background:var(--leftBack);
}
.left.open{
    width:50%;
    z-index: 600;
    overflow:hidden;
}

/*Navigation ba in Left panel*/
.nav{
     display: flex;
     justify-content: flex-end;
     column-gap: 2px;
     width: 100%;
     background:var(--mainText);
     align-items: center;
}
.nav .close{
    display:none
}
.nav .item{
  padding:8px 44px;
  margin-right:4px;
  background:var(--backTabInact);
  color:var(--colorTabInact);
  border-radius: 5px 25px 0 0;
  cursor: pointer
}

.nav .item.tabActive{
   background:var(--leftBack);
   color: var(--backDataLeft);
}
/*Block with content (about and form) in left panel*/
.cont{
   display:flex;
   flex-direction:column;
   position:relative;
   left:  0;
   height: 100%;
   color: var(--colorTextLeft);
   transition: left 400ms;
   justify-content: center;
   overflow:auto;
}

.cont .tab{
    position:absolute;
    left: -500%;
    width:100%;
    top: 20%;
    padding:30px;
    transition: left 800ms;
}
.cont .tab.visible{
    left:0;
    color:var(--colorTextLeft);
    overflow:auto;
    max-height:100vh;
}

/*About content*/
.tab header{
  position:relative;
  margin: 15px 0;
  width: fit-content;
  text-align:center;
  font-size:2rem;
  margin:0 auto 32px auto;
  }
.tab header::after{
  content:'';
  position:absolute;
  bottom: -2px;
  left: 22%;
  width:80%;
  height:2rem;
  border-right: 25px solid var(--hoverBtnSend);
  border-bottom: 3px solid var(--hoverBtnSend);
  border-radius:0 25px 0 0;

}

.tab.about .body{
  text-align:justify;
  font-size:1.2rem;
  line-height:150%;
  margin: 15px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--backBtnSend)
}
.tab.about footer{
  display:flex;
  justify-content:space-evenly;
  }
 
.about .social span{
  background:var(--hoverBtnSend);
  padding: 12px;
  margin-top: 40px;
  border-radius: 0 50% 0 50%;
  cursor: pointer;
  transition: all 500ms
}  
.about .social span:hover{
  background:var(--colorTextLeft);
  color: var(--mainText);
   border-radius: 50% 0 50% 0;
}
.about .data{
  width:100%;
  padding: 24px;
  background:var(--backDataLeft);
  color:var(--mainText);
  font-size: 1.2rem;
  margin:20px auto;
  display:grid;
  grid-gap:8px;
  grid-template-columns: 40% 60%;
}
.about .data div:nth-child(odd){
  font-weight: bold;
  text-align: end;
}

/*form & controls*/
#contactForm{
  position: relative;
  text-align:center;
  }
#contactForm .form-control{
  font-size: 1.2rem;
  width: 100%;
  height: 3rem;
  margin: 4px 0;
  border: 2px solid lightgrey;
 }
 #contactForm textarea.form-control{ 
   height: 10rem ;
 }
.btnSend {
  font-size: 1.8rem;
  border: 0;
  width: 75%;
  padding: 8px;
  background: var(--backBtnSend);
  color: var(--mainText);
  position:relative;
  overflow:hidden;
    transition: color 300ms 100ms;
}
.btnSend:before{
  content:'';
  position:absolute;
  height:0%;
  width: 100%;
  top:0;
  left:0;
  background: var(--hoverBtnSend);
  transition: height 600ms;
 
}

.btnSend:hover:before{
  width: 110%;
  height: 100%;
  }

.btnSend:hover{
  color: var(--colorTextLeft);
  cursor:pointer; 
}

.btnSend .title{
  position:relative;
  height: 100%;
  padding: 8px;
}

#mod_contactForm{
  display: none;
  position: absolute;
  background:var(--backTabInact);
  width:80%;
  left: calc(50% - 40%);
  top: 20%;
  border: 2px solid red;
}


/*right panel containing counter and message area*/
.right{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    height: 100%;
    width:100%;
    background: url("../images/dark01.jpg") no-repeat center;
    position: relative;
    background-size: cover;
    pointer-events: none;
    z-index: 100;
}
.right{
  z-index:400
}
.right .overlay{
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background: no-repeat center;
 opacity:0;
 transition: opacity 1000ms linear;
}
@keyframes openleft{
   form {left:0; border-color: var(--mainText)}
   to {left:10px; border-color:var(--hoverBtnSend)}
}
.right:after{
    content: '';
    width: 15px;
    height: 15px;
    position:absolute;
    top:5px;
    left: 0px;
    border-top: 8px solid var(--mainText);
    border-left: 8px solid var(--mainText);
    transition: transform 800ms;
    color:var(--mainText);
    pointer-events: all; 
    transform: rotate(135deg);
    animation: openleft 800ms infinite alternate
}    
.right:hover:after{
  cursor:pointer;
  border-color:var(--hoverBtnSend)
}
.right.open:after{
    transform: rotate(-45deg);
    }
    
/*Content area, right side of page*/
.right .card{
    display:flex;
    flex-direction: column;
    gap:20px;
    align-items: center;
    transform:rotate(-45deg);
    z-index: 100
}

.card header{
    font-size: 4rem;
    font-weight: bold;
}
.card .subTitle{
    font-size: 3.5rem;
    /* margin-top: 30px; */
    /* margin-bottom: 30px; */
}

/*classes for animated text */
#messages .char{
    font-size: 3rem;
    font-family: sans-serif;
    letter-spacing: 0.5em;
    text-align:center;
    display:inline-block;
    opacity: 0;
    transform: scale(0);
    transition: all 1000ms ease-in;
    position:relative;
    
}
#messages .char.deleted{
    opacity:1;
    transform: scale(1);
    left:-100vw;
}
#messages .char.visible{
    transform: scale(1);
    left:0;
    opacity:1
}

#title .char{
    font-size: 4rem;
    font-weight: bold;
    font-family: sans-serif;
    text-align:center;
    opacity: 0;
    right: -100vw;
    position:relative;
    transition: all 1000ms cubic-bezier(0, 0, 0.68, 1.51);    
 
}
#title .char.deleted{
    opacity:1;
    transform: scale(1);
    right:-100vw;
}
#title .char.visible{
    transform: scale(1);
    right:0;
    opacity:1
}

#messages, #title{
    height : 150px;
    display:flex;
    justify-content:center;
    align-items: center;
    overflow: hidden;
    position:relative;
}
 #title{overflow: visible}
/*Counter Section*/
#count{
    display:flex;
    gap:20px;
    font-size: 3.5rem;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}
.count-title{
    background: var(--mainText);
    color: var(--colorTextLeft);
    width: 30px;
    height: 100%;
}
#count span{
    display:block;
    padding:0 8px;
    width: 2.25ch;
    background: var(--backLight);
    border-bottom: 1px solid var(--mainText);
    text-align: center;
}
#count span.days{
  width: 3ch;
}
#count span[id$='title']{
    font-size: 1.2rem;
    width: auto;
    padding:0;
    transform: rotate(-90deg) translate(-100%, 0px);
}
div[id$='Timer']{
    display:flex;
    align-items: center; 
    justify-content: center;
}

.star{
  position: absolute;
  display:none;
  height:2px;
  width:100px;
  transform: rotate(-45deg);
  background:var(--colorTabInact);
  top: 0;
  left:0;
  transition: all 1000ms ease;
  z-index:500
}

.notas{
  font-size: 2.5rem;
  color:var(--hoverBtnSend);
  background: var(--backNote);
  width: 100%;
  padding: 16px 0;
  text-align:center;
}

@media screen and (max-width:768px){
    main{
        flex-direction:column;
        }
    .left{
        height: auto; 
        width:100%;   
        }
    .left.open{
        width:100%; 
        }
    .nav{
        z-index: 1200 
        }    

    .nav #close{
       display: block;
       padding: 8px 44px;
       margin-right:4px;
       font-size: 1.2rem;
       background: var(--backTabInact);
       color:var(--colorTabInact);
       border-radius: 5px 25px 0 0;
       cursor: pointer;
    }    

    .cont{
       overflow:visible;
       width:80% !important;
       z-index:1000;
       }    
    .cont .tab{
        position: absolute;
        left: 0;
        top: -110vh;         
        width:100%;
        opacity:0;
        transition: all 1000ms  400ms;  
        background:var(--leftBack);
        z-index:100
    }
    .cont .tab.visible{
        left: 0;
        top:0;
        opacity: 1;
        transition: top 1000ms;  
        z-index: 200
    }
    .right .card{
        transform:rotate(-45deg);
    }
    .right div{

    }
    .right:after{
        content:unset;
    }
}
@media screen and (max-width:568px){
    .right .card{
        transform: rotate(-45deg) scale(0.7);
    }
    .about .social span{
       font-size: 1rem;
    }
}
@media screen and (max-width:425px){
    .right .card{
        transform: rotate(-45deg) scale(0.6);
    }
}
@media screen and (max-width:325px){
    .right .card{
        transform: rotate(-45deg) scale(0.45) translate(0, -25px);
    }
    .nav .item{
        padding: 8px 24px
    }
}
/*Landscape orientation*/
@media screen and (max-height: 540px) and (orientation: landscape){
    #messages, #title{
      height : 80px;
    }  
    .notas{
        width:80%;
    }
    .right .card{
      transform: rotate(-45deg) scale(0.6)
    }
}
@media screen and (max-height: 280px) and (orientation: landscape){
    .right .card{
      transform: rotate(-45deg) scale(0.4)
    }
}


/*preload animated screen */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}
#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #1977cc;
  border-top-color: #d1e6f9;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}
@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}