@charset "utf-8";
@font-face {
    font-family: "DM Serif" , serif;
    src: url(../assets/DMSerifText-Regular.ttf);
}

@font-face {
    font-family: "Raleway", sans-serif;
    src: url(../assets/Raleway-Medium.ttf);
}

html{
    font-size:7px;
    line-height:1.3;
}

body {
    background-color: #6df3b4;
    color:#063f25;
    font-size:0;
}


.page{
  width: 100%;
  height:100%
}


.header{
    vertical-align: top;
    width: 100%;
    height:100%;
    gap:15px;
    display:flex;
    padding-top: 5%;
}

.title{
    align:left;
    text-align: left;
    display:inline-block;
    width: 50%;
    height:100%;
    font-family: "Raleway", sans-serif;
    font-size: 4rem;
    padding-left: 5%;
}


.text-info{
    align:right;
    text-align: left;
    display:inline-block;
    width: 25%;
    height:100%;
    text-wrap: auto;
    font-family: "Raleway", sans-serif;
    font-size: 2rem;
    padding-right: 5%;
}

.content-text{
    font-family: "DM Serif" , serif;
    font-size: 12rem;
    vertical-align: bottom;
    width: 80%;
    height:100%;
    text-align: left;
    text-wrap: auto;
    padding-left: 5%;
    padding-top: 15%;
    /* position:relative; */
    z-index: 2;
}

a{
  color:#063f2584;
  text-decoration: none;
  /* animation: 1s linear infinite;
  animation-name: "blink"; */
  direction: rtl;
  unicode-bidi: bidi-override;
}

a:hover{
  color:#ffffff;
  cursor: pointer;
  text-decoration: underline;
  direction:ltr;
  unicode-bidi: bidi-override;
}

#float-box{
    opacity: 100%;
    top: 185px;
    left: 8px;
    z-index: 1;
    font-family: "DM Serif" , serif;
    font-size: 55px;
    vertical-align: bottom;
    width: 80%;
    height:100%;
    text-align: left;
    text-wrap: auto;
    padding-left: 5%;
    padding-top: 15%;
    position:absolute;
}



@media screen and (max-width:960px) and (min-width:720px){
  .header{
    background-color:rgba(255, 0, 0, 0);
    width:calc(50% - 2.6rem);
    background-color:rgba(0, 0, 0, 0);
    height:26rem;
  }
}

@media screen and (max-width:960px) and (min-width:720px){
  .title{
    background-color:rgba(255, 0, 0, 0);
    width:calc(50% - 2.6rem);
    background-color:rgba(0, 0, 0, 0);
    height:26rem;
  }
}

@media screen and (max-width:960px) and (min-width:720px){
  .text-info{
    background-color:rgba(255, 0, 0, 0);
    width:calc(50% - 2.6rem);
    background-color:rgba(0, 0, 0, 0);
    height:26rem;
  }
}

@media screen and (max-width:960px) and (min-width:720px){
  .content-text{
    background-color:rgba(255, 0, 0, 0);
    width:calc(50% - 2.6rem);
    background-color:rgba(0, 0, 0, 0);
    height:26rem;
  }
}

@media screen and (max-width:960px) and (min-width:720px){
  #float-box{
    background-color:rgba(255, 0, 0, 0);
    width:calc(50% - 2.6rem);
    background-color:rgba(0, 0, 0, 0);
    height:26rem;
  }
}

@media screen and (max-width:960px) and (min-width:720px){
  html{
    background-color:rgba(255, 0, 0, 0);
    width:calc(50% - 2.6rem);
    background-color:rgba(0, 0, 0, 0);
    height:26rem;
  }
}

@media screen and (max-width:960px) and (min-width:720px){
  body{
    background-color:rgba(255, 0, 0, 0);
    width:calc(50% - 2.6rem);
    background-color:rgba(0, 0, 0, 0);
    height:26rem;
  }
}