@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
body {
    background-color: rgb(34, 34, 34);
    font-family: 'Work Sans', sans-serif;
    margin: 0;
    padding: 0;
    height: fit-content;
    transition: .3s;
    width:100%;
}

header {
    height: fit-content;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    transition: .3s;
    padding-bottom: 5%;
}

header h1 {
    font-size: 500%;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 5%;
}

header nav,
header h1,
header h1 svg g {
    transition: .2s;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav li {
    margin: 4%;
    font-size: x-large;
}

label {
    border-radius: 50%;
    position: fixed;
    top: 100%;
    left: 100%;
    transform: translate(-150%, -150%);
    margin: 0;
    padding: 5px;
    transition: .3s;
}

label svg g {
    transition: .3s;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:not(:checked)+label svg .layer2 {
    opacity: 0;
}

input[type="checkbox"]:not(:checked)+label svg .layer1 {
    opacity: 1;
}

input[type="checkbox"]:checked+label svg .layer1 {
    opacity: 0;
}

input[type="checkbox"]:checked+label svg .layer2 {
    opacity: 1;
}

input[type="checkbox"]:checked~header {
    color: rgb(54, 54, 54);
}

input[type="checkbox"]:not(:checked)~header {
    color: white;
}

input[type="checkbox"]:not(:checked)~header nav {
    border-top: 1px solid white;
}

input[type="checkbox"]:checked~header nav {
    border-top: 1px solid black;
}

nav a {
    margin: auto;
    display: block;
    width: 90%;
    color: inherit;
    text-decoration: none;
    font-size: 250%;
}

input[type="checkbox"]:not(:checked)~header svg .white {
    opacity: 1;
}

input[type="checkbox"]:checked~header svg .white {
    opacity: 0;
}

input[type="checkbox"]:not(:checked)~header svg .black {
    opacity: 0;
}

input[type="checkbox"]:checked~header svg .black {
    opacity: 1;
}

nav a:after,
nav a:before {
    content: '';
    display: block;
    height: 2px;
    width: 0px;
    transition: .5s ease;
    margin: 3%;
    margin-left: 50%;
}

nav a:hover:after,
nav a:hover:before {
    width: 100%;
    margin-left: 3%;
}

input[type="checkbox"]:not(:checked)~header nav ul li a::after,
input[type="checkbox"]:not(:checked)~header nav ul li a::before {
    background: white;
}

input[type="checkbox"]:checked~header nav ul li a::after,
input[type="checkbox"]:checked~header nav ul li a::before {
    background: rgb(54, 54, 54);
}

@media screen and (max-width: 430px) {
    header h1 {
        font-size: 15vw;
    }
    a {
        font-size: 12vw;
    }
}

.user {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1%;
    padding: 0.5%;
    border-radius: 50%;
    border: 2px white solid;
}