* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --title-font: 'UB-HelveticaExtraLight', sans-serif; /*var(--wp--preset--font-family--ub-helveticaextralight) !important;*/
    --background-main-color: #242424;
    --letters-main-color: rgb(244, 244, 244);
    --header-background-color:  rgba(114, 191, 207, 0.9);
    --mobile-menu-slider-color: rgba(42, 42, 42, 0.9);
    --mobile-menu-drop-content-color: rgba(42, 42, 42, 0.8);
    --header-height: 10lvh;
    --header-index: 1000;
    --mobile-menu-background-index: 500;
    --mobile-menu-font-size: clamp(1rem, 3vh, 5rem);
    --footer-background-color: #242424;
}

body{
    font-family: var(--title-font);
    background-color: var(--background-main-color);
    color: var(--letters-main-color);
}

.fn-grid {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: 1fr;
}

.fn-grid-direction-row-to-column { /*το έσπσασα από το fn-grid*/
    grid-auto-flow: column;
}

.fn-flex {
    display: flex;
    flex-direction: row;
}

.fn-flex-column {
    display: flex;
    flex-direction: column;
}

.fn-flex-row-to-column {
    display: flex;
    flex-direction: row;
}

.fn-center{
    justify-content: center;
    align-items: center;
}

.fn-space-between{
    justify-content: space-between;
    align-items: center;
}

.fn-start{
    justify-content: start;
    align-items: center;
}

.fn-end{
    justify-content: end;
    align-items: center;
}

/* Containers */

.full-screen-container {
    margin: 0;
    height: 100vh;
    width: 100%;
}

.full-width-container, .full-witdth-to-50-height-container {
    margin: 0;
    height: auto;
    width: 100%;
}

.full-screen-minus-header-container {
    margin: 0;
    height: calc(100lvh - var(--header-height));
    width: 100%;
}

.basic-image-container{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* End of Containers */



/* buttons */


.main-button, textarea, .input, input[type="text"], input[type="submit"]{
    background-color: transparent;
    color: var(--letters-main-color);
    border: 0.1em solid var(--letters-main-color);
    border-radius: 0.5em;
    padding: 1em 2em;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0.5em;
    text-align: center;
    text-decoration: none;
    max-width: 100%;
}

textarea{
    resize: none;
    height: 20vh;
}


.main-button.active {
    background-color: var(--button-main-color);
}

@media (hover: hover) {
    .main-button:hover{
        background-color: var(--letters-main-color);
        color: var(--background-main-color);
    }
}

#clickme{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* end of buttons */