:root {
    --widget_bg: rgba(255, 255, 255, 0.5);
    --widget_bg_bright: rgba(255, 255, 255, 0.75);

    --link_hover_bg: rgba(204, 249, 255, 0.5);
    --link_hover_bg_solid: rgb(0, 110, 255);

    --widget_shadow: rgba(0,0,0,0.15) 0em 0em 1em -0.1em;
    --border_rad: 0.2em;
}

body {
    font-family: Montserrat;
    font-size: 100%;

    padding: 0px;
    margin: 0px;

    background-image: url("background1.jpg");
    background-color: #868b94;
}

/* #####################################################################
                            HTML ELEMENTS
##################################################################### */


h1 {
    text-align: center;
    letter-spacing: 0.1em;
    font-size: 5em;
    font-family: Montserrat;

    margin: 0.1em;
}

h2 {
    text-align: center;
    letter-spacing: 0.1em;
    font-size: 2em;
    font-family: Montserrat;
    color: rgb(77, 77, 77);

    margin: 0em;
}

header {
    background-color: white;
    padding: 2.5em 0em 0.5em;
    margin: -2em 0em 2em;
    box-shadow: black 0em 0em 1em 0.1em;
}

table, th, td {
    /* border: 2px solid black; */
    border-spacing: 1em;

    text-align: center;
    vertical-align: top;
    margin: auto;
}

input {
    font-family: inherit;
    font-size: inherit;

    border: none;
    border-radius: var(--border_rad);
    background-color: var(--widget_bg_bright);
}
input:focus {
    border: lightgray;
}


.clickthrough {
    pointer-events: none;
}
.clickthrough-nc * {
    pointer-events: auto;
}


a.black {
    text-decoration: none;
    color: black;
} a.black:hover {
    font-weight: bold;
}
a.invis {
    text-decoration: none;
    color: inherit;
}

.noscroll {
    overflow: hidden;
}
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


/* Sliders */

.slider {
    -webkit-appearance: none;
    appearance: none;

    border-radius: var(--border_rad);

    background-color: var(--widget_bg);
    height: 1rem;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 1.1em; /* Set a specific slider handle width */
    height: 1.1em; /* Slider handle height */
    background: #4CAF50; /* Green background */
    border: none;
    cursor: pointer; /* Cursor on hover */
}
  
.slider::-moz-range-thumb {
    width: 1.1em; /* Set a specific slider handle width */
    height: 1.1em; /* Slider handle height */
    background: #4CAF50; /* Green background */
    border: none;
    cursor: pointer; /* Cursor on hover */
}



/* Buttons */

button {
    border: none;
    font-size: 1em;
    border-radius: var(--border_rad);
}

.back {
    text-decoration: none;
    display: block;
    position: relative;
    
    color: black;
    padding: 0em 0.3em;
    box-shadow: var(--widget_shadow);
    background-color: var(--widget_bg);
    border-radius: calc(var(--border_rad) / 4);

    font-weight: bold;
    font-size: 4em;

    transition: transform 0.2s;
} .back:hover {
    transform: scale(1.1);
}

/* Tables */

td.outer {
    text-align: top;
    padding: 1em;
}



/* Flex Boxes */

.flex_row { /* Containing (for example) link widgets, that are sorted in a row */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    /* background-color: rebeccapurple; */
}
.o1 { order: 1; } /* Easy ordering of flexboxes */
.o2 { order: 2; }
.o3 { order: 3; }



/* Widgets */

.homewidget { /* The main widget (almost) everything bases on this widget */
    display: block; /* Make <a> display like a <div> (aka the entire div is a link) */
    text-decoration: none;

    position: relative; /* Allows for translation, which I need for the animation */
    background-color: var(--widget_bg);
    box-shadow: var(--widget_shadow);
    border-radius: var(--border_rad);

    max-width: 50em;

    color: black;

    padding: 1em 2em;
    margin: 1em auto;
    line-height: 1.5em;
    text-align: justify;

    transition: background-color 0.2s, transform 0.2s;
} 
div.homewidgetlink:hover, a.homewidgetlink:hover {
    transform: scale(1.05); /* Scales everything evenly */
    background-color: rgba(204, 249, 255, 0.5);
}

.collapsed {
    line-height: 0em;
}

.linkwidget { /* A widget for links, ment to be placed inside a <div> with class "flex_row" */
    display: block; /* Make <a> display like a <div> (aka the entire div is a link) */
    text-decoration: none;
    text-align: center;

    background-color: rgba(195, 241, 255, 0.5);
    border-radius: var(--border_rad);
    width: 100%;

    padding: 0.5em;
    margin: 0em 0.25em;

    color: black;
    transition: background-color 0.2s, width 0.2s;
} .linkwidget:hover {
    width: 120%;
    background-color: rgb(0, 110, 255);
}
.linkwidget_home{
    width: 95%;
    margin: 0.25em auto;
}
.linkwidget_home:hover{
    width: 98%;
}

/* #####################################################################
                               IMAGES 
##################################################################### */


/* #####################################################################
    RULESETS FOR IMAGES

    Scaled to 1000px height
    Long images: 2000px width, other: 1000px width (2:1 or 1:1 only)

    jpg images
    ~ 200kb size
##################################################################### */


.imgcontainer {
    display: flex;
    flex-flow: row wrap; /* Short for flex-direction and flex-wrap */
    justify-content: center;
    align-items: flex-start;
    
    max-width: 55em;
}

.imgwidget {
    position: relative; /* Allows for translation, which I need for the animation */
    background-color: rgba(255, 255, 255, 0.0);
    flex: 1 1 30%; /* Lets the images shrink and grow (30% is the basis size) */

    z-index: 0;
    margin: 1%;
    min-width: 10em;
    cursor: pointer;
    
    perspective: 100rem;

    transition: transform 0.2s; /* taken care of by JavaScript */
} .imgwidget:hover {
    z-index: 1;
}
.longimg { flex: 2 1 60%; min-width: 20em;}  /* Images that arent square */ 
.imgwidget img {
    width: 100%;
    border-radius: 0.5em;
    box-shadow: var(--widget_shadow);
}

/* Image Maximized */

div.bigview {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
    opacity: 0;

    width: 100vw;
    height: 100vh;

    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(1em);

    transition: opacity 0.2s;
}
img.bigview {
    display: none;
    width: 20vw;
    transform: translate(calc(50vw - 50%), calc(50vh - 50%));
    border-radius: 1em;

    transition: width 0.2s;
}
.persp {
    perspective: 100rem;
}

.noscript {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    background-color: gray;

    text-align: center;
    padding: 0.5em 0em;
}


/* ###################################################################
                          Responsive Design
################################################################### */



.pc { display: inherit;}
.mb {display: none;}

/* Tablets or landscape */
@media only screen and (max-width: 750px) {

    /* Hide or swap elements on mobile */
    .pc { display: none;}
    .mb {display: inherit;}

    /* HTML Elements */

    header {
        margin-bottom: 0.2em;
    }

    h1 {
        font-size: 4em;
    }

    /* Buttons */

    .back {
        font-size: 3em;
    }
    

    /* Widgets */
    
    .homewidget {
        margin: 0.5em auto;
    } a.homewidget:hover, div.homewidget:hover {
        transform: scale(1);
        background-color: var(--widget_bg);
    }
    .linkwidget:hover {
        width: 100%;
        background-color:rgba(195, 241, 255, 0.5);
    }
    .linkwidget_home:hover{
        width: 95%;
    }


    /* Images */
    .imgwidget {
        flex: 1 1 40%;
        min-width: 10em;
    }
    .longimg {
        flex: 1 1 100%;
    }
    .imgwidget:hover {
        z-index: 0;
        transform: scale(1);
    }

}

/* Phones */
@media only screen and (max-width: 500px) {

    /* Hide or swap elements on mobile */
    .pc { display: none;}
    .mb {display: inherit;}

    /* HTML Elements */

    header {
        margin-bottom: 0.2em;
    }

    h1 {
        font-size: 10vw;
    }
    h2 {
        font-size: 6.5vw;
    }

    /* Buttons */

    .back {
        font-size: 3em;
    }

    /* FlexBoxes */

    .flex_row {
        flex-direction: column;
    }

    /* Widgets */
    
    .homewidget {
        margin: 0.5em auto;
    } a.homewidget:hover, div.homewidget:hover {
        transform: scale(1);
        background-color: var(--widget_bg);
    }
    .linkwidget {
        padding: 0.5em 0em;
        margin: 0.25em 0em;
    } .linkwidget:hover {
        width: 100%;
        background-color:rgba(195, 241, 255, 0.5);
    }
    .linkwidget_home:hover{
        width: 95%;
    }

    .imgwidget {
        flex: 1 1 100%; /* set */
        min-width: 50%;
    }

}