/* Fonts */
@font-face {
    font-family: 'retrogaming';
    src: url('../fonts/retro-gaming.ttf') format('truetype');
}

@font-face {
    font-family: 'mc';
    src: url('../fonts/minecraft.ttf') format('truetype');
}

@font-face {
    font-family: 'mca';
    src: url('../fonts/minecraftia.ttf') format('truetype');
}

@font-face {
    font-family: 'dogica';
    src: url('../fonts/dogica.ttf') format('truetype');
}

@font-face {
    font-family: 'depixel';
    src: url('../fonts/depixel.ttf') format('truetype');
}

@font-face {
    font-family: 'visitor';
    src: url('../fonts/visitor.ttf') format('truetype');
}

@font-face {
    font-family: 'retron';
    src: url('../fonts/retron2000.ttf') format('truetype');
}

/* Main */

img {
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
}

/* Style specifically for mailto links */
a[href^="mailto:"] {
    color: rgb(208, 208, 208); 
    font-weight: bold; 
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

/* Style for mailto links on hover */
a[href^="mailto:"]:hover {
    color: rgb(49, 169, 221); 
    text-decoration: underline; 
}

a {
    color: rgb(208, 208, 208); 
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

/* Style for all links on hover */
a:hover {
    color: rgb(49, 175, 221); 
    text-decoration: underline; 
}


body {
    height: 100%;
    font-family: 'dogica', sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100vh; 
}

/* Header */

.header {
    /* layout */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 40px;
    margin-top: auto;
    z-index: 1000;

    /* classic XP bevel & emboss */
    background-color: rgb(173, 173, 170);
    box-shadow:
      inset 0 1px 0 rgba(235, 235, 228, 1),  /* light inner top edge */
      inset 0 -1px 0 rgba(235, 235, 228, 1);      /* dark inner bottom edge */
}

/* thin highlight/shadow lines for sharper bevel edges */
.header::before,
.header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    pointer-events: none;
}
.header::before {
    top: 0;
    background: rgba(255, 255, 255, 0.4);
}
.header::after {
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

/* embossed text effect */
.header h1,
.header h2,
.header p {
    color: rgba(34, 34, 34, 0.75);
    text-shadow:
      -1px -1px 0 rgba(255, 255, 255, 0.7),  /* light top-left highlight */
       1px  1px 0 rgba(0,   0,   0,   0.5); /* dark bottom-right shadow */
}

.header-left-container {
    height: 100%;
    display: flex;
    align-items: center;
}

.header-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px; 
  color: rgba(34, 34, 34, 0.75);
  padding: 5px;

  /* Inner shadow */
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.2),   /* subtle top-down shadow */
    inset 0 -2px 2px rgba(0, 0, 0, 0.15); /* subtle bottom-up shadow */
}

.contact {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  overflow: hidden;
  /* (your other styling… color, margin, vertical-align, etc.) */
}

.header-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-left: 25px;
}

.header-contact p {
  margin: 0;
  font-size: 10px;
}

.email-icon {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}

/* start with the hover image hidden */
.email-icon.email-hover {
  opacity: 0;
}

/* on hover, swap their opacities */
.contact:hover .email-icon:not(.email-hover) {
  opacity: 0;
}
.contact:hover .email-hover {
  opacity: 1;
}

/* 3. On container hover, fade out default and fade in hover icon */
.icon-container:hover .email-icon {
  opacity: 0;
}
.icon-container:hover .email-icon.email-hover {
  opacity: 1;
}

.header-text-container p {
    margin: 0;
    font-size: 6px;
    text-align: right;
}

.header h1 {
    margin: 0;
    font-size: 14px; 
    text-align: right;
}

.header h2 {
    margin: 0;
    font-size: 12px;
}

.logo {
    transition: transform 0.1s ease-in-out;
    max-height: 100%; 
    width: auto;
    height: auto;
    display: block;
}

.logo-link {
    display: inline-block; 
    height: 40px;
}

.logo:hover {
    transform: skew(-18deg, 0deg); 
}

#bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-attachment: fixed;
    z-index: -1;
}

/* Content */
.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    max-width: 400px; /* Adjust as needed */
    margin-left: auto;
    padding: 15px;
    gap: 15px;
    top: 0px;
    right: 0;
    position: absolute;
    color: rgba(231, 231, 231, 0.75);
}

.grid-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    max-width: 400px; /* Adjust as needed */
    margin-left: auto;
    padding: 15px;
    gap: 15px;
    bottom: 40px;
    right: 0px;
    position: absolute;
}

.icon {
    max-width: 50px;
    width: auto;
    height: auto;
    display: block;
    transition: transform 0.2s ease-in-out;
}

.item {
    display: flex;
    height: 90px;
    width: 90px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}


.item p {
    font-family: 'retron';
    font-size: 10px;
    margin-top: 2px;
    text-align: center;
}

.item:hover{
    background-color: rgba(18, 108, 122, 0.2);
    transform: scale(1.05);
}

.hidden-container {
    display: none; 
    width: 100%;
    background-color: rgb(224, 224, 224);
    border-radius: 0px;
    position: absolute;
    touch-action: none;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    outline: 4px solid rgba(141, 141, 139, 0.75);
}

.title-bar {
    font-family: 'retron';
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f1f1f1;
    background-color: rgb(141, 141, 139);
    padding: 5px 10px;
    height: 20px; 
    cursor: grab;
    outline: 4px solid rgba(141, 141, 139, 0.75);
}

.title-bar p {
    margin: 0;
    padding: 0;
    font-size: 12px; 
}

.title-bar:active {
    cursor: grabbing;
}

.close-button {
    padding: 0; 
    width: 20px;
    height: 20px;
    background-color: rgb(215, 215, 213); 
    border-radius: 0%;
    cursor: pointer;
    outline: 2px solid #1f1f1f;
}

.close-button p {
    font-family: 'dogica', sans-serif;
    line-height: 20px; 
    font-size: 14px; 
    margin-left: 1px;
    text-align: center;
    color: #222222;
}

.close-button:hover{
    background-color: #a0a0a0;
}

.close-button:active{
    background-color:#aaaaaa;
}

.content {
    width: 100%;
    height: calc(100% - 40px); 
}

.content iframe {
    width: 100%;
    height: 100%;
    border: none;
}