@font-face { font-family: Medium; src: url('fonts/Medium.otf'); } 

.link-desc {
  color: #8f8f8f;
  background-color: transparent;
  text-decoration: none;
}

.a-home {
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
}

.a-nnormal {
  color: #8f8f8f;
  background-color: transparent;
  text-decoration: default;
}

.a-normal {
  color: #038cfc;
  background-color: transparent;
  text-decoration: underline;
}

.a-italic {
  color: #038cfc;
  background-color: transparent;
  text-decoration: underline;
}

.a-normal:visited {
  color: #8148FC;
  background-color: transparent;
  text-decoration: underline;
}


a:hover {
    font-family: Medium;
    color: red;
    background-color: #f3ec78;
    
    background: linear-gradient(270deg, #ff0000, #ffa000, #3aff00, #00ffbe, #0076ff, #6000ff, #ff00d4);
    background-size: 1400% 1400%;
    -webkit-animation: AnimationName 3s ease infinite;
    -moz-animation: AnimationName 3s ease infinite;
    animation: AnimationName 3s ease infinite;

    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.gradient-bg {
    position: relative; /* Required for absolute positioning of the pseudo-element */
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    justify-content: center;
    padding: 80px;
    margin: 0;
    
}
.gradient-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    background: linear-gradient(270deg, #ff0000, #ffa000, #3aff00, #00ffbe, #0076ff, #6000ff, #ff00d4);
    background-size: 1400% 1400%;
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
    
    background-image: url('images/moln_1.jpg'),linear-gradient(270deg, #ff0000, #ffa000, #3aff00, #00ffbe, #0076ff, #6000ff, #ff00d4);
    background-size: cover, 1400% 1400%;
    background-blend-mode: overlay;
    opacity: 0.3; /* Set the opacity to 50% */
    z-index: -1; /* Ensure it’s behind the content */
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 49%}
    50%{background-position:100% 52%}
    100%{background-position:0% 49%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 49%}
    50%{background-position:100% 52%}
    100%{background-position:0% 49%}
}
@keyframes AnimationName {
    0%{background-position:0% 49%}
    50%{background-position:100% 52%}
    100%{background-position:0% 49%}
}

.about-me-bg {
    position: relative; /* Required for absolute positioning of the pseudo-element */
    color: #ffffff;
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    justify-content: center;
    padding: 80px;
    margin: 0;
}

.about-me-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/piano_1.jpg');
    background-size: cover;
    opacity: 0.3; /* Set the opacity to 50% */
    z-index: -1; /* Ensure it’s behind the content */
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
 }



.default-body {
    color: #ffffff;
    font-family: 'Times New Roman', Times, serif;
    background-color: #000000;
    display: flex;
    justify-content: center;
    padding: 80px;
    margin: 0;
}

body {
    color: #ffffff;
    font-family: 'Times New Roman', Times, serif;
    background-color: #000000;
    display: flex;
    justify-content: center;
    padding: 20px;
    margin: 0;
}

.document-container {
    color: #ffffff;
    background-color: white;
    padding: 40px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    width: 100%;
}

.document-header, .document-footer {
    text-align: center;
    margin-bottom: 20px;
}

.document-header h1 {
    margin: 0;
    font-size: 2em;
}

.document-header .author, .document-header .date {
    margin: 5px 0;
    font-size: 1em;
    color: #555;
}

.document-body h2 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
}

.document-body h3 {
    margin-top: 20px;
}

.document-body p {
    text-align: justify;
    line-height: 1.6;
    margin: 15px 0;
}

.document-footer {
    font-size: 0.9em;
    color: #777;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

.column {
  float: left;
  width: 50%;
  max-width: 800px
}

@media (width < 580px) {
   .column {
	width: 100%;
   }

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}