@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all ease-in-out .6s;
}

:root {
    --bg-color1: #000000;
    --bg-color2: #868383;
    --secondary-color1: #121212;
    --secondary-color2: rgb(0, 6, 20);
    --h1-color: #9c9999;
    --p-color: #9c9999;
    --icon-color: rgb(11, 2, 63);
    --icon-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(323deg) brightness(102%) contrast(101%);
    --icon-hover: invert(26%) sepia(65%) saturate(4375%) hue-rotate(219deg) brightness(98%) contrast(93%);
    --h1-hover: #2c7dfa;
    --a-color: #646262;
}

.light-theme {
    --bg-color1: #c8f3f3;
    --bg-color2: #0d5ef5;
    --secondary-color1: #2c7dfa;
    --secondary-color2: #1e5ef3;
    --h1-color: #fff;
    --p-color: #fff;
    --icon-filter: invert(0%) sepia(100%) saturate(7500%) hue-rotate(193deg) brightness(82%) contrast(112%);
    --icon-hover: invert(12%) sepia(9%) saturate(7192%) hue-rotate(230deg) brightness(92%) contrast(112%);
    --h1-hover: #000000;
    --a-color: #2c7dfa;
}

body {
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    background: linear-gradient(0deg, var(--bg-color1) 0%, var(--bg-color2) 100%);
    text-align: center;
    padding: 0 16px;
    font-size: 0.9rem;
}

.container {
    background: linear-gradient(0deg, var(--secondary-color2) 0%, var(--secondary-color1) 30%);
    padding: 1rem;
    max-width: 320px;
    border-radius: 15px;
}

.container:hover {
    filter: saturate(1.3);
    box-shadow: 8px 8px 20px 8px #03121f1e;
    transition: all ease-in-out .4s;
}

#qrcode {
    width: 288px;
    border-radius: 15px;
    border: 1px solid #b4b4b4;
}

#qrcode:hover {
    transform: rotate(-90deg) scale(112%);
    transition: ease-in-out .6s;
}

h1 {
    color: var(--h1-color);
    margin-top: 10px;
    padding: 15px;
    font-size: 1.4rem;
}

h1:hover {
    color: var(--h1-hover);
    transition: all ease-in-out .6s;
}

p {
    padding: 15px;
    color: var(--p-color);
}

#iconTheme {
    border-radius: 50%;
    cursor: pointer;
    filter: var(--icon-filter);
    transform: scale(1.03);
    opacity: .7;
    transition: all ease-in-out 2s;
    border: none;
    outline: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

#iconTheme:hover {
    filter: var(--icon-hover);
}

#icon {
    width: 35px;
    padding-right: 10px;
    transition: ease-in-out .7s;
}

#icon:hover {
    color: var(--icon-hover);
}

#themeDesc {
    font-weight: 700;
    color: var(--p-color);
}

@media (max-width:25rem) {
    .container {
        width: 100%;
    }

    #qrcode {
        width: 100%;
    }
}

footer {
    position: absolute;
    bottom: 10px;
}

.attribution a {
    color: var(--a-color);
    text-decoration: none;
}

.attribution a:hover {
    color: #1f1972;
}