* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'ABCDiatype';
  src:  url('fonts/ABCDiatype.woff') format('woff');
}


body {
  background-color: #06073B;
  margin:0;
  padding:0;
}

.logo-full {
  display: none;
}

.info {
  line-height: 60%;
  margin:0;
  padding:0;
}

.logo-vertical {
  position: fixed;
  top: 20px;
  right: 20px;
  display: block;
}

.logo-vertical img {
  height: 93vh;   /* or a percentage of viewport height */
  max-height: 90%; 
  width: auto;    /* keep aspect ratio */
  display: block;
}

p {
  font-family: "ABCDiatype"; 
  font-size: 14px;
  line-height: 50%;
  letter-spacing: 4px;
  
}


.info {
  position: absolute;
  top: 15px;
  left: 25px;
}


 .logo {
margin:0;
padding:0;
margin-left: 30px;
}

.logo img {
  width: 38%; /* Adjust the width as needed */
  max-width: 443px;
  height: auto; /* Maintain aspect ratio */
  display: block;
  position: absolute;
  bottom: 30px;
  left: 25px;
}

 
a {text-decoration: none; }

/* unvisited link */
a:link {
  color: rgb(255, 255, 255);
}

/* visited link */
a:visited {
  color: black;
}

/* mouse over link */
a:hover {
  color: #ffffff;
}

/* selected link */
a:active {
  color: rgb(255, 255, 255);
}

@media (max-width: 576px) {
  .logo {
    display: none; /* hide short TMK */
  }

  .logo-full {
    display: block; /* show full logo */
    bottom: 30px;
    left: 25px;
    position: absolute;
    width: 50px;
  }

  .logo-vertical {
    display: none; /* hide vertical logo */
  }

  .logo-full img {
    width: 20em; /* Adjust the width as needed */
    max-width: 443px;
    height: auto; /* Maintain aspect ratio */
  }
    }