/***************
 ** VARIABLES **
 ***************/


:root {
        /* Colors */
    --primary-bg-color: #0f0f23;
    --primary-text-color: #009900;
    --activated-text-color: #00cc00;
    --component-border-color: #00cc00;
    --hovered-text-color: #99ff99;
    --dark-mask-color: rgba(0, 0, 0, 0.75);
    --transparent-color: rgba(0, 0, 0, 0);
        /* Fonts */
    --main-font: 'Source Code Pro', sans-serif;
        /* Sizes */
    --header-height: 8vh;
        /* Effects */
    --activated-glow: 0 0 5px #00cc00;
}


    /****************
    ** WHOLE PAGE **
    ****************/


* {
    box-sizing: border-box;
    font-family: var(--main-font);
    background-color: var(--transparent-color);
    color: var(--primary-text-color);
}


    /***********
     ** FONTS **
     ***********/


/* Source Code Pro : cyrillic-ext */
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7PqtlsnDvucq_mk.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Source Code Pro : cyrillic */
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7PqtlsnDt-cq_mk.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Source Code Pro : greek */
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7PqtlsnDsOcq_mk.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}

/* Source Code Pro : vietnamese */
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7PqtlsnDvOcq_mk.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* Source Code Pro : latin-ext */
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7PqtlsnDvecq_mk.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Code Pro : latin */
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7PqtlsnDs-cq.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


    /****************
     ** MAIN RULES **
     ****************/


        /* Making sure the page covers whole viewport */

body.soc2020 {
    height: 100vh; /* Body covers whole viewport's height */
    width:  100vw; /* Body covers whole viewport's width  */
    display: flex;
    flex-direction: column; /* Putting header on top and main just below */
    background-color: var(--primary-bg-color);
}

        /* Making sure only long text is displayed */

.shortText {
    display: none;
}

        /* Making header look good */

header.soc2020 {
    display: flex;
    flex-direction: row; /* Make the header a row of content */
    justify-content: space-between; /* Make the menu at the far right */
    
    border-bottom: solid var(--component-border-color) 1px;

    height: var(--header-height);
}

header.soc2020>div.titleDiv {
    display: flex;
    flex-direction: row;
}

header.soc2020>div.titleDiv>a {
    padding-top: 1vh;
    padding-bottom: 1vh;
    padding-left: 1vw;
    padding-right: 1vw;
    width: calc(var(--header-height) - 1vh); /* Fixing width of anchor tag containing the logo */
}

header.soc2020>div.titleDiv>a>img {
    height: 100%; /* Centering the logo */
}

header.soc2020>div.titleDiv>h1>span {
    color: var(--activated-text-color);
    text-shadow: 0 0 5px var(--activated-text-color);
    margin-left: 1vw;
}

header.soc2020>div.menu {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /* Centering menu */
    
    /* Preventing user selection on multiple browsers */
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

header.soc2020>div.menu>span#langSwitch {
    padding-right: 1vw;
    padding-left: 1vw;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

header.soc2020>div.menu>span#langSwitch>span.chosenLang>span {
    color: var(--activated-text-color);
    text-shadow: var(--activated-glow);
}

header.soc2020>div.menu>span#langSwitch:hover>span.unchosenLang>span,
header.soc2020>div.menu>span#langSwitch:hover {
    color: var(--hovered-text-color);
    text-shadow: none;
}

    /* Making sure Main element covers the rest of Body and thus puts daysMenu next to an iFrame */

main.soc2020 {
    height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: row;
}

    /* Making daysMenu nav a column of buttons and styling these */

main.soc2020>nav#daysMenu {
    display: flex;
    flex-direction: column;
    border-right: solid var(--component-border-color) 1px;
    background-color: var(--primary-bg-color);
}

main.soc2020>nav#daysMenu>button.dayButton {
    border: none;
}

    /* Emphasizing the current selected day's corresponding button */

main.soc2020>nav#daysMenu>button.dayButton#clicked {
    outline: 0;
    color: var(--activated-text-color);
    text-shadow: var(--activated-glow);
}

    /* And styling buttons when hovered and clicked */

main.soc2020>nav#daysMenu>button.dayButton:hover {
    outline: 0;
    color: var(--activated-text-color);
    text-shadow: var(--activated-glow);
}

main.soc2020>nav#daysMenu>button.dayButton:hover {
    outline: 0;
    color: var(--hovered-text-color);
}

    /* Avoiding aoc IFrame to display at first */

main.soc2020>iframe#aoc {
    display: none;
}

main.soc2020>iframe {
    width: 100%;
    height: calc(100vh - var(--header-height));
}


    /*******************
     ** MEDIA QUERIES **
     *******************/


@media (max-width: 800px) {
    span.shortText {
        display: inline-block;
    }

    span.longText {
        display: none;
    }

    header.soc2020>div.menu {
        justify-content: space-between;
        border-left: solid var(--component-border-color) 1px;
    }

    header.soc2020>div.menu>span {
        font-size: small;
    }

    header.soc2020>div.menu>span#langSwitch {
        text-align: center;
        padding-top: 0.5vh;
        padding-bottom: 0.5vh;
    }

    header.soc2020>div.menu>span#daysMenuSwitch {
        text-align: center;
        padding-top: 0.5vh;
        padding-bottom: 0.5vh;
    }

    header.soc2020>div.menu>span.activated#daysMenuSwitch {
        color: var(--activated-text-color);
        text-shadow: var(--activated-glow);
    }

        /* Making the daysMenu only appear when clicked and darkening the rest of the
           main page when doing so */

    main.soc2020>nav#daysMenu {
        position: absolute;
        left: -100vw;
        z-index: 2;
        height: calc(100vh - var(--header-height));
        transition: left 0.25s;
    }

    main.soc2020>nav.activated#daysMenu {
        left: 0;
    }

        /* defining the dark mask */

    main.soc2020>div#darkMask {
        position: absolute;
        width: 100vw;
        height: calc(100vh - var(--header-height));
        left: 0;
        top: var(--header-height);
        z-index: -2;
        background-color: rgba(0, 0, 0, 0);
        transition: background-color 0.25s;
    }

    main.soc2020>div.activated#darkMask {
        z-index: 1;
        background-color: var(--dark-mask-color);
    }
}