@font-face {
  font-family: "Contra";
  src: url('../font/contra.ttf') format('truetype');
}

body {
   background-color: #000000;
}

.text-logo {
  /* color: #7F7F7F; */
  /* background-color: #7F7F7F; */
  background: linear-gradient(137deg, rgba(255,255,255,1) 0%, 
      rgba(127,127,127,1) 23%, rgba(255,255,255,1) 93%); 
  background-clip: text;
  /*background-size: 100%;
  background-repeat: repeat; */
  text-align: center;
  font-family: "Contra", sans-serif;
  text-transform: uppercase;
  font-variant: small-caps;
  font-size: 60pt;
  letter-spacing: 8pt;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.friend {
  /* color: #7F7F7F; */
  /* background-color: #7F7F7F; */
  background: linear-gradient(137deg, rgba(255,255,255,1) 0%, 
      rgba(127,127,127,1) 23%, rgba(255,255,255,1) 93%); 
  background-clip: text;
  /*background-size: 100%;
  background-repeat: repeat; */
  text-align: center;
  font-family: "Contra", sans-serif;
  text-transform: uppercase;
  font-variant: small-caps;
  font-size: 30pt;
  letter-spacing: 8pt;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.friend > a {
  text-decoration-color: #7F7F7F;
  text-decoration-style: dotted;
}
.img-align {
    display: block;
    padding-top: 15px;
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
}

@media screen and (orientation: portrait) {
  img.ri { max-width: 90%; }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 90%; max-width: 50%; max-height: 80%; }
}