/* ------------------------ */
/* FONTS SECTION */

@font-face {
    font-family: Exile;
    src: url(./fonts/Exile/Exile-Regular.ttf);
}

@font-face {
    font-family: Lacquer;
    src: url(./fonts/Lacquer/Lacquer-Regular.ttf);
}

@font-face {
    font-family: Monoton;
    src: url(./fonts/Monoton/Monoton-Regular.ttf);
}

@font-face {
    font-family: Rubic_Dirt;
    src: url(./fonts/Rubik_Dirt/RubikDirt-Regular.ttf);
}

h1 {
    font-family: Monoton;
    font-weight: lighter;
}

h4 {
    font-family: Lacquer;
    /* font-weight: lighter; */
}

h6 {
    font-family: Lacquer;
    font-weight: lighter;

    /* margin-top: 20px; */
}

/* 
#socials {
    margin-bottom: 20px;
} */

#project_info {
    margin-top: 100px;
    margin-bottom: 10px;
    padding: 20px;
}

#project_info h1,
h4 {
    margin-top: 10px;
    margin-bottom: 10px;
}

#project_info h6 {
    margin-top: 10px;
    margin-bottom: 20px;
}

p {
    text-align: justify;
}

@media (orientation:portrait) {
    p {
        font-size: x-small;
    }
}

@media (orientation:landscape) {
    p {
        font-size: medium;
    }
}

#p_footer {
    padding: 20px;
    margin-bottom: 20px;
    height: max-content;
}

span {
    margin-left: 2rem;
    margin-right: 2rem;
}

a:link {
    color: rgb(116, 209, 223);
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: rgb(113, 113, 182);
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: rgb(170, 90, 227);
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: rgb(165, 229, 253);
    background-color: transparent;
    text-decoration: underline;
}

/* ------------------------ */
/* ------------------------ */

/* ------------------------ */
/* BASIC HTML SECTION */

html {
    min-height: 100%;
    /* make sure it is at least as tall as the viewport */
    position: relative;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

body {

    /* background-color: #000000; */

    background-image: url('./background.svg');

    height: 100%;

    display: flex;
    justify-content: center;

    margin: 0;
    padding: 0;



    color: aliceblue;
    text-align: center;

    font-size: xx-large;
}

img {
    max-width: 100%;
    user-select: none;
}

/* ------------------------ */
/* ------------------------ */

/* ------------------------ */
/* ZOMBIE MODE CLASSES */

@media (orientation:portrait) {
    .fill {
        height: 100vh;
        width: 100vh;
    }
}

@media (orientation:landscape) {
    .fill {
        height: 100vh;
        width: 100vh;
    }
}

.fill {

    /* background-color: aliceblue; */
    overflow: auto;

    margin: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.fill::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.fill {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

ul {
    list-style-type: none;
    justify-content: center;
    margin: 0;
    padding: 0;
}

li {
    /* background-color: rgb(0, 0, 0); */

    display: flex;
    justify-content: center;
    align-items: center;
}


@media (orientation:portrait) {
    li {
        height: 120vw;
    }

}

@media (orientation:landscape) {
    li {
        height: 100vh;
    }

}


/* ------------------------ */
/* ------------------------ */

/* ------------------------ */
/* MAIN PROJECT CLASSES SECTION */

.fill_grid {

    /* background-color: rgb(0, 0, 0); */
    overflow: auto;

    margin: 0px;

    /* display: flex;
    flex-direction: column; */

    /* padding-bottom: 10px; */
    /* padding-bottom: 50px; */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.fill_grid::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.fill_grid {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}


.fill_grid {
    height: 100vh;
    width: 100vh;
}

/* @media (orientation:portrait) {
    .fill_grid {
        height: 100vh;
        width: 100vh;
    }
}

@media (orientation:landscape) {
    .fill_grid {
        height: 100vh;
        width: 100vh;
    }
} */


.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: repeat(4, 1fr); */
    gap: 10px;

}

@media (orientation:portrait) {
    .parent {
        width: 100vw;
        /* height: 100vh; */
        height: fit-content;
    }

}

@media (orientation:landscape) {
    .parent {
        height: auto;
    }

}



/* ------------------------ */
/* ------------------------ */

/* ------------------------ */
/* BIG IMAGE SECTION */


#preview {
    /* position: absolute; */

    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);

}


@media (orientation:portrait) {
    .big_img {
        height: 100vh;
        width: 100vw;
        vertical-align: middle;
    }

    .big_img img {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@media (orientation:landscape) {
    .big_img {
        height: 100vh;
        width: 100vw;
    }
}

.big_img {

    background-color: rgba(0, 0, 0, 0.586);
    overflow: auto;

    margin: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.big_img::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.big_img {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}