@font-face {
    font-family: 'Aldo';
    src: url('./font/aldo.eot'); /* IE9 Compat Modes */
    src: url('./font/aldo.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./font/aldo.woff') format('woff'), /* Modern Browsers */
         url('./font/aldo.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('./font/aldo.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'Coolvetica';
    src: url('./font/coolvetica.eot'); /* IE9 Compat Modes */
    src: url('./font/coolvetica.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./font/coolvetica.woff') format('woff'), /* Modern Browsers */
         url('./font/coolvetica.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('./font/coolvetica.svg#svgFontName') format('svg'); /* Legacy iOS */
}

html {
    background-color: #0a0b1a;
    width: 100%;
}

body {
    width: 100%;
}

h1 {
    font-family: 'Aldo';
    color: #f5faf9;
    font-size: 6em;
    cursor: pointer;
}

h2 {
    font-family: 'Aldo';
    color: #f5faf9 !important;
    font-size: 3.5em;
    cursor: pointer;
    padding-left: 20px;
    background-image: url('./glitchbg.gif');
    background-size:0% 100%;
    background-repeat: no-repeat;
    transition: 0.3s;
}

h2:hover {
    background-size:100% 100%;
}

h3 {
    font-family: 'Coolvetica';
    color: #f5faf9;
    font-size: 2.6em;
    text-align: center;
}

a:link {
    color: #f5faf9;
    background-color: transparent;
    text-decoration: underline;
  }
  
  a:visited {
    color: #f5faf9;
    background-color: transparent;
    text-decoration: underline;
  }
  
  a:hover {
    color: #f5faf9;
    background-color: transparent;
    text-decoration: underline;
  }
  
  a:active {
    color: #f5faf9;
    background-color: transparent;
    text-decoration: underline;
  }
  
p {
    font-family: 'Coolvetica';
    color: #f5faf9;
    font-size: 1.7em;
    text-align: justify;
    padding-left: 15px;
}

#header {
    width: 100%;
    text-align: center;
}

#coolseparator {
    width: 100%;
}

#fullcontent {
    width: 100%;
}

#menu {
    width: 20%;
    float: left;
}

#dyncontent {
    width: 70%;
    float: right;
    margin-right: 15px;
}

.expo {
    width: 50%;
    float: left;
    max-height: 1000px;
    display : flex;
    justify-content: center;
    align-items: center;
}

.mycell {
    width: 1%;
    float: left;
}