:root{
    --color1: #ffc;
    --color2: #103;
}    
@font-face {
    font-family: "TeleType";
    src: url("./static/css/teletype.ttf");
}
body{
    clear: both;
    margin: 2rem;
    font-family: "TeleType", 'Courier New', Courier, monospace;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--color1);
    background-color: var(--color2);
}
a{
    color: var(--color1);
    text-decoration: none;
}
a:hover{opacity: 0.7;}
.abraxas{
    text-align: center;
}
h1,h2,h3,h4,h5,h6,p{
    margin: 0 0 1rem;;
    font-size: 1rem;
    font-weight: normal;
}
img,video,.divaudio,audio, .abraxas,iframe{
    display:inline-block;
    width: calc( 100% / 7 );
    margin: 0;
    padding: 0;
    object-fit: cover;
    height: calc( 100% / 6) ;
    overflow: hidden;
    border: none;
}
.intro{
    padding-right: 2rem;
    margin: 1rem 0;
    width: 100%;
    flex: 1;
}
.intro-outer{
    width: 100%;
    display: flex;
    gap: 1rem;
}
a{position:relative;
     z-index:2;}
video,audio{position:relative; z-index:1;}
audio{height:auto;position:absolute;}
img:hover{
    filter: invert(1);
}
::selection{
    color: var(--color2);
    background-color: var(--color1);
}

@media screen and (min-width: 768px){
    p{font-size: 1rem;}
    body{font-size: 1.5rem;}
}

@media screen and (max-width: 767px){
    .intro-outer{flex-direction: column;}
    body{font-size: 3rem;}
}