:root {
    --gris: lightgray;
}

@font-face {
    font-family: 'IBM-plex-mono';
    src: url(fonts/IBMPlexMono-Regular.otf);
}

@font-face {
    font-family: 'IBM-plex-mono';
    src: url('fonts/IBMPlexMono-Italic.otf');
    font-style: italic;
}

body {
    background-color: var(--gris);
    font-family: IBM-plex-mono;
    height: 100vh;
    overscroll-behavior: none;
    overflow-y: hidden;
    font-size: 15px;
    line-height: 1.3em;
    margin: 0;
}

#main {
    height: 100%;
    overflow-y: hidden!important;
    overflow-x: auto;
    z-index: 4;
    margin: 0;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#main::-webkit-scrollbar{
    display:none
}

.list {
    position: fixed;
    display: flex;
    z-index: 4;
    left: 3%;
    top: 5%;
    width: 20%;
}

.items-list{
    font-style: italic;
    margin-left: 40px;
}

h1{
    font-size: 1em;
    /* text-decoration: underline solid 1pt; */
    font-weight: normal;
}

h2{
    font-size: 1em;
    margin-bottom: 0;
    font-weight: normal;
}

p{
    margin: 0;
}

a{
    color:black;
    text-decoration: none;
}

#attempt{
    z-index: 1000 !important;
    color: var(--gris);
    cursor: pointer;
}

a:hover {
    color: white;
}

:visited{
    color: black;
}

.description{
    position: fixed;
    color: var(--gris);
    width: 35%;
    bottom: 5%;
    left: 3%;
    font-size: 0.9em;
    line-height: 19px;
    text-indent: 30px;
    z-index: 1;
    pointer-events: none;
}

.credits{
    position: fixed;
    color: var(--gris);
    width: 25%;
    bottom: 25%;
    left: 84.5%;
    font-size: 0.9em;
    line-height: 19px;
    text-indent: 30px;
    z-index: 1;
    transform: rotate(-90deg);
}

.credits-mobile{
    display: none;
}

.email{
    position: fixed;
    color: var(--gris);
    left: 45%;
    top:45%;
    overflow-y:hidden;
}

#logo-fondo{
    height: 100vh;
    margin-left: 20%;
    margin-right: 10%;
    z-index: 4;
    transition:all 0.85s ease-out;
}

#logo {
    position: fixed;
    right: 3%;
    top: 5%;
}

#logo path{
    fill: var(--gris);
}

.title-description{
    text-decoration: underline 1pt black;
    text-indent: 0;
}
.text{
    margin-bottom: 1em;
    overflow-y: hidden;
}

#instagram{
    z-index: 1000;
    position: fixed;
    bottom: 2%;
    left: 3%;
}
#instagram-svg {
    width: 24px;
    height: 24px;
}

#instagram-svg path{
    fill: var(--gris);
}

@media only screen and (max-width: 800px) {

    .list {
        margin-left: 5%;
        width: 70%;
    }

    .items-list {
        margin-left: 28px;
    }

    .description {
        margin-left: 5%;
        width: 70%;
    }

    .title-description{
    text-decoration: underline 1pt black !important;
    }

    #logo{
        margin-right: 5%;
    }

    .email{
        position: fixed;
        color: black;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        left: 130%;
        bottom: -20%;
    }

    #main{
        overflow-x: scroll;
        overflow-y: hidden;
    }

    #logo-fondo{
        margin-left: -150%;
        overflow-y: hidden;
        /* height: 100vh; */
    }
    
    .credits{
        display: none;
    }

    .credits-mobile{
        display: block;
        font-size: 0.7em;
        line-height: 1.4em;
    }

    #instagram{
        left: 8%;
    }

   
}