:root {
    --bkg-color: rgb(32, 50, 68);
    --bkg-color-bottom: rgb(79, 25, 25);
    --bkg-image: url(/img/stars.png);
    --txt-color: white;
    --txt-compliment: black;
    transition: 0.5;
}

body {
    margin: 0;
    height: 100vh;
    background-image: var(--bkg-image),
        linear-gradient(0deg, var(--bkg-color-bottom) 0%, var(--bkg-color) 100%);
    /* background-size: cover; */
}

.header {
    display: flex;
    justify-content: space-between;
}

.header h1 {
    color: var(--txt-color);
}

.header > .dark-mode img {
    margin: 10px;
    width: 50px;
    height: 50px;
}

.experiments {
    margin: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 30px;
}

.experiment {
    width: 100%;
}

.experiment img {
    width: 100%;
    object-fit: cover;
    object-position: top;
    height: 255px;
    border-radius: 25px;
    border: solid var(--txt-color) 5px;
    box-shadow: 0px 0px 10px 2px #00000071;
    transition: box-shadow 0.5s, border-color 0.1s;
}

.experiment img:hover {
    transition: 0.1s;
    /* box-shadow: 0px 0px 9px 2px #FFFFFF; */
    border-color: var(--txt-compliment);
}

.tooltip {
    display: none;
    position: absolute;
    padding: 20px;
    color: var(--txt-color);
    border: solid var(--txt-color) 2px;
    background-color: var(--bkg-color);
    border-radius: 25px;
}