@font-face {
  font-family: 'Cera Pro black';
  src: url("Cera Pro Font/Cera Pro Black.otf") format("truetype");
}

.navbar-brand {
  font-family: Cera Pro black;
  color: linear-gradient(234deg, rgb(65, 80, 95) 0%, rgb(36, 37, 38) 100%);
}
.Common {
  font-family: Cera Pro black;
  font-size: 35px;
}
.footer {
  margin: auto;
  padding: 1300px 10px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
 padding: 2em;
 display: flex;
 justify-content: space-between;
}
.Common2 {
  font-family: Cera Pro black;
  font-size: 24px;
}

.chess {
  color: white;
  font-family: Cera Pro black;
  position: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size:38px;
}

.text-center p-3 {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px; /* Height of the footer */
  background: #6cf;
}

.Mod {
  font-size: 55px;
}
.btn-group me-2 container:hover {
  color: rgb(3, 32, 3);
  font-size: 49px;
}
.card-title {
  font-family: Cera Pro black;
}
.title {
  text-align: center;
  font-family: Cera Pro black;
}
.form-group {
  width: 700px;
  position: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#contact {
  background-color: rgb(230, 227, 227);
}
#submit_form {
  position: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: gray;
  font-family: Cera Pro black;
  width: 100px;
}
.col-md-8 {
  background-color: rgb(121, 120, 123);
}
.card-text {
  color: white;
}
.footer {
  background-color: #fff;
  color: #fff;
  padding: 2em;
  display: flex;
  justify-content: space-between;
}
.footer-title {
  font-size: 1.3em;
  font-weight: 600;
  color: #010614;
}
.btn btn-secondary {
  color: aqua;
}
.card-body:hover {
  color: rgb(27, 24, 104);
}
.content:hover {
  color: gold;
}
.carousel.item {
  font-size: 0.1em;
}
.display-1 {
  font-family: Cera Pro black;
}
.footer-title span {
  color: #010614;
  font-family: Cera Pro black;
}

.footer .social-icons a {
  font-size: 1.9em;
  padding: 0 12px 0 0;
}
.jh {
  color: rgb(9, 8, 79);
  font-family: cera pro black;
  font-size: 1.3em;
}
.containere {
  height: 44rem;
  background-image: url("6.jpg");
  background-size: 1200px;
  width: 100%;
}
.f {
  width: 200px;
}

.carousel-item {
  height: 44rem;
  background-image: url("gh.gif");
  background-size: 1200px;
}
.navbar-toggler-icon {
  color: gray;
}
.nav-link {
  font-family: Cera Pro black;
  font-size:22px;
}
.nav-link:hover {
  color: rgb(7, 71, 19);
  font-size: 45px;
}
.nav-link active {
  font-family: Cera Pro black;
}
.nav-link active:hover {
  color: rgb(7, 71, 19);
  font-size: 45px;
}
.Mod {
  font-size: 50px;
  font-family: Cera pro black;
  color: white;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing;
  animation-duration: 6s;
  animation-timing-function: steps(30, end);
  animation-fill-mode: forwards;
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}


.loader-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#global {
  /* width: 70px; */
  position: relative;
  width: 65px;
  height: 75.5px;
  /* height: 75px; */
  /* margin-top: -37.5px; */
  /* margin-left: -35px; */
  z-index: 100;
}
#global .mask {
  position: absolute;
  border-radius: 2px;
  overflow: hidden;
  perspective: 1000;
  backface-visibility: hidden;
}
.footer {
  padding: 2em;
  display: flex;
  justify-content: space-between;
  
}
#global .plane {
  background: #1d1f20;
  width: 400%;
  height: 100%;
  position: absolute;
  transform: translate3d(0px, 0, 0);
  z-index: 100;
  perspective: 1000;
  backface-visibility: hidden;
}
#global #top {
  width: 53px;
  height: 20px;
  left: 12px;
  transform: skew(-15deg, 0);
  z-index: 100;
}
#global #top .plane {
  z-index: 2000;
  animation: strip-top 1.3s ease-in infinite 0s backwards;
}
#global #middle-top {
  width: 33px;
  height: 20px;
  top: 15px;
  left: 12px;
  transform: skew(-15deg, 40deg);
}
#global #middle-top .plane {
  transform: translate3d(0px, 0, 0);
  background: #292c2d;
  animation: strip-middle-top 1.3s linear infinite 0.3s backwards;
}
#global #middle-down {
  width: 43px;
  height: 19px;
  top: 43px;
  left: 2px;
  transform: skew(-12deg, -32deg);
}
#global #middle-down .plane {
  transform: translate3d(0px, 0, 0);
  background: #35393b;
  animation: strip-middle-bottom 1.3s linear infinite 0.7s backwards;
}
#global #bottom {
  width: 53px;
  height: 20px;
  top: 55.5px;
  left: 2px;
  transform: skew(-15deg, 0);
}
#global #bottom .plane {
  z-index: 2000;
  animation: strip-bottom 1.3s ease-out infinite 0.95s backwards;
}

.cards-journal{
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-auto-rows: 334px;
  gap: 20px;
  border-radius: 3px;;
}
@media (max-width: 1275px) {
  .footer {
     margin: auto;
     padding: 30px 10px;
     display: flex;
     flex-wrap: wrap;
     box-sizing: border-box;
     justify-content: center;
    padding: 2em;
    display: flex;
    justify-content: space-between;
  }
}
@media (max-width: 1010px) {
  .footer {
     margin: auto;
     padding: 30px 10px;
     display: flex;
     flex-wrap: wrap;
     box-sizing: border-box;
     justify-content: center;
    padding: 2em;
    display: flex;
    justify-content: space-between;
  }
}
@media (max-width: 1023px) {
  .footer {
     margin: auto;
     padding: 30px 10px;
     display: flex;
     flex-wrap: wrap;
     box-sizing: border-box;
     justify-content: center;
    padding: 2em;
    display: flex;
    justify-content: space-between;
  }
}
@media (max-width: 992px) {
  .cards-journal{
    display: grid;
    grid-template-columns: 49% 49%;
    grid-auto-rows: 334px;
    gap: 20px;
  }
  .footer {
   
    padding: 2em;
    display: flex;
    justify-content: space-between;
    
}
}

@media (max-width: 768px) {
  .cards-journal{
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: 334px;
    gap: 20px;
  }

  .Mod {
    font-size: 23px;
    overflow: hidden;
    white-space: break-spaces;
    width: 0;
    animation: typing;
    animation-duration: 4s;
    animation-timing-function: steps(30, end);
    animation-fill-mode: forwards;
  }
  .carousel-item {
    height: 25rem;
    background-image: url("gh.gif");
    background-size: 690px;
  }
  .containere {
    height: 44rem;
    background-image: url("6.jpg");
    background-size: 600px;
  }
  .chess {
    font-size: 22px;
  }
  .btn-group me-2 container {
    color: #010614;
  }
  .form-group {
    width: 390px;
  }
  .footer{
    display:flex;
    margin-top: 30px;
  margin-bottom: 40px;
  }
}
body {
  background: #f4f5f9;
  position: relative;
}
.content-container {
  display: none;
}

@keyframes strip-top {
  from {
    transform: translate3d(53px, 0, 0);
  }
  to {
    transform: translate3d(-250px, 0, 0);
  }
}
@keyframes strip-middle-top {
  from {
    transform: translate3d(-160px, 0, 0);
  }
  to {
    transform: translate3d(53px, 0, 0);
  }
}
@keyframes strip-middle-bottom {
  from {
    transform: translate3d(53px, 0, 0);
  }
  to {
    transform: translate3d(-220px, 0, 0);
  }
}
@keyframes strip-bottom {
  from {
    transform: translate3d(-220px, 0, 0);
  }
  to {
    transform: translate3d(53px, 0, 0);
  }
}
.button {
    box-shadow: 0 0 0 0 rgba(17, 11, 95, 0.7);
    background-size:cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  }
  .button:hover 
  {
    -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
  }
  
  @-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
  @-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
  @-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
  @keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

  .cards-journal .card{
    padding-bottom: 16px;
    height: auto;
    width: auto;
    border-radius: 3px;;
  }
  .cards-journal .card .window{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 7px;;
  }
  .cards-journal .card .window .title{
    position: absolute;
    color: hsl(0, 0%, 100%);
    background-color: hsla(0, 0%, 5%, 0.8);
    left: 20%;
    top: 10%;
    font-size: 24px;
    padding: 0px 10px 0px 10px;
    transition-duration: 0.3s;
  }
  .cards-journal .card .window .title:hover{
    color: hsl(0, 0%, 80%);
  }
  .cards-journal .card .window .author{
    position: absolute;
    color: hsl(0, 0%, 100%);
    background-color: hsla(0, 0%, 5%, 0.8);
    left: 20%;
    top: 35%;
    font-size: 30px;
    padding: 0px 10px 0px 10px;
    transition-duration: 0.3s;
  }
  .cards-journal .card .window .author:hover{
    color: hsl(0, 0%, 80%);
  }
  .cards-journal .card .window .btn{
    position: absolute;
    left: 20%;
    top: 65%;
  }
  .cards-journal .card .window .image{
    height: 100%;
    transition-duration: 0.3s;
  }
  .cards-journal .card .window .image:hover{
    height: 110%;
  }