@charset "utf-8";

:root {
    --glass: rgba(255, 255, 255, 0.2);
    --glass-med: rgba(100, 100, 100, 0.2);
    --glass-dark: rgba(30, 30, 30, 0.2);

    --lightest: rgb(175, 175, 175);
    --light: rgb(100, 100, 100);
    --medium: rgb(50, 50, 50);
    --deep: black;
    --accentblue: dodgerblue;
    --accentred: crimson;

    --bluramount: 2px;

    --borderthickness: 1px;
    interpolate-size: allow-keywords;
}

@keyframes background-anim {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 100% 100%;
    }
}

html {
    background-color: var(--deep);
    scroll-behavior: smooth;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    position: relative;
    background-image: radial-gradient(var(--lightest) 1px, var(--deep) 1px);
    background-size: 40px 40px;
    animation: background-anim 120s linear infinite;
}

h1 {
    margin: 50px 10% 20px;
    color: var(--lightest);
    font-size: 50px;
}

h2 {
    color: var(--accentblue);
    text-align: center;
}

h3 {
    color: var(--lightest);
    text-align: center;
}

hr {
    height: var(--borderthickness);
    background-color: var(--lightest);
    border: none;
}

summary {
    color: var(--lightest);
    text-align: center;
    display: block;
    padding: 10px 0;
}

summary:hover {
    color: var(--accentred);

}

.homeTitle {
    margin: 0;
    padding: 25px 0;
    box-shadow: 0 50px 50px 50px var(--deep);
    /* border-bottom: var(--borderthickness) solid var(--lightest); */
    background-color: var(--deep);
    /* backdrop-filter: blur(var(--bluramount)); */
}

.homeTitle h1 {
    margin: 0;
    text-align: center;
    font-size: 100px;
    color: var(--accentred);
    text-shadow: 0 0 10px var(--accentred);
}

.homeTitle h2 {
    margin: 0;
    text-align: center;
    font-size: 35px;
    color: var(--light);
}

.homeTitle h3 {
    margin: 0;
    text-align: center;
    color: var(--lightest);
    font-size: 50px;
}

nav {
    display: flex;
    justify-content: space-around;
    gap: 40px;
    margin: 0 10%;
}

a {
    color: var(--lightest);
    text-decoration: none;
    font-size: 20px;
    transition: .25s ease;
}

a:hover {
    color: var(--accentred);
    text-shadow: 0 0 10px var(--accentred);
}

.linkedin {
    display: flex;
    justify-self: center;
    margin: 0 0 15px;
    padding: 0;
    width: min-content;
}

.section {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: inline-block;
    width: 100%;
}

.card {
    background-color: var(--glass-med);
    backdrop-filter: blur(var(--bluramount));
    border: var(--borderthickness) solid var(--lightest);
    border-radius: 25px;
    width: 50%;
    margin: 0 10% 25px;
    clear: both;
    overflow: hidden;
}

.card:nth-of-type(even) {
    float: left;
    clear: both;
}

.card:nth-of-type(odd) {
    float: right;
    clear: both;
}

.card p {
    color: var(--lightest);
    padding: 0 15px 15px;
}

.card.active hr,
.wideblock.active hr {
    background-color: var(--accentblue);
    box-shadow: 0 0 10px 0px var(--accentblue);
    transition: .75s ease;
}

.card.active,
.wideblock.active {
    border-color: var(--accentblue);
    box-shadow: 0 0 10px 0px var(--accentblue);
    transition: .75s ease;
}

.cardbottom {
    object-fit: cover;
    width: 100%;
    margin: 0;
    float: inline-end;
}

.logo,
.profilepicture {
    display: block;
    width: 200px;
    height: 200px;
    margin: auto;
    padding-top: 15px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
}

.wideblock {
    background-color: var(--glass-med);
    backdrop-filter: blur(var(--bluramount));
    border: var(--borderthickness) solid var(--lightest);
    width: 80%;
    margin: auto;
    border-radius: 25px;
}

.wideblock h2 {
    margin: 15px 0;
}

.wideblock p {
    color: var(--lightest);
    padding: 0 15px 15px;
}

details::details-content {
    overflow: hidden;
    block-size: 0;
    opacity: 0;
    transition:
        block-size .75s ease,
        opacity .75s ease,
        content-visibility .75s ease allow-discrete;
}

details[open]::details-content {
    block-size: auto;
    opacity: 1;
}