@import url("assets/fonts.css");
@import url("assets/colors.css");

* {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--stormy-mauve-800) var(--stormy-mauve-300);
}

button {
    cursor: pointer;
}

body {
    background-color: var(--stormy-mauve-200);
    color: var(--neon-blue-1500);
}

a, a:visited {
    text-decoration: none;
    color: unset;
}

.add-a-retard-form {
    background-color: var(--stormy-mauve-200-05);
    backdrop-filter: blur(10px);
}

.info-message {
    color: rgba(255, 105, 105, 1);
    font-family: 'raleway-b';
    text-align: center;
    font-size: 15px;
}

.form-wrapper {
    border: var(--stormy-mauve-300) solid 1px;
    border-radius: 10px;

    outline: var(--stormy-mauve-100) solid 1px;
    outline-offset: 0px;

    box-shadow: var(--stormy-mauve-100) 0px 0px 10px;
    background-color: var(--stormy-mauve-200);
}

.content-to-replace span span {
    font-size: 11px;
    font-family: 'raleway-b';
}

.content-to-replace p {
    font-family: 'raleway-b';
    font-size: 30px;
}

.content-to-replace span label {
    font-size: 15px;
    font-family: 'raleway-r';
}

.content-to-replace span input {
    border: var(--stormy-mauve-400) solid 1px;
    border-radius: 10px;

    outline: var(--stormy-mauve-200) solid 1px;
    outline-offset: 0px;
    background-color: var(--stormy-mauve-300);
    color: var(--neon-blue-1500);
}

.content-to-replace span input {
    font-family: 'raleway-r';
}

.submit-button button {
    border: none;
    border-radius: 20px;
    color: var(--neon-blue-1500);
    background-color: var(--neon-blue-1000);

    font-family: 'raleway-b';
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.submit-button button:hover { 
    background-color: var(--neon-blue-1300);
    color: black;
}

#close-button {
    border: none;
    border-radius: 20px;
    font-family: 'raleway-b';
    background-color: rgb(255, 88, 88);
    color: rgb(255, 176, 176);
}


.container {
    background-color: var(--stormy-mauve-200);
    overflow: hidden;
    
    border: var(--stormy-mauve-300) solid 1px;

    outline: var(--stormy-mauve-100) solid 1px;
    outline-offset: 0px;

    box-shadow: var(--stormy-mauve-100) 0px 0px 10px;
}

.navbar {
    background-color: var(--stormy-mauve-200);
    font-family: "raleway-r";

    border: var(--stormy-mauve-300) solid 1px;
    border-radius: 10px;

    outline: var(--stormy-mauve-100) solid 1px;
    outline-offset: 0px;

    box-shadow: var(--stormy-mauve-100) 0px 0px 10px;
}

.navbar-logo img {
    border-radius: 5px;
    box-shadow: var(--stormy-mauve-100) 0px 0px 10px;
}

.navbar-logo li img {
    transition: transform 0.4s ease-out;
}

.navbar-list {
    list-style: none;
    font-family: 'raleway-r';
}  

.navbar-list-element, .navbar-toggle {
    border-left: var(--stormy-mauve-300) solid 1px;

    font-size: 13px;
    background-color: var(--stormy-mauve-225);

    transition: background-color 0.3s ease-out,
    color 0.3s ease-out,
    padding 0.3s ease-out;

    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.navbar-list-element:hover, .navbar-toggle:hover {
    background-color: var(--stormy-mauve-300);
    color: var(--stormy-mauve-1500);
}

.clip-background {
    opacity: 0.1;
    filter: grayscale(1);
    animation: opacity-background-animation 15s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

.content-left-items {
    font-size: 25px;
}

.content-left-items h2 {
    font-family: 'raleway-l';
}

.content-left-items p {
    font-family: 'raleway-r';
    font-size: 13px;
}

.content-left-items h2 mark {
    background-color: var(--neon-blue-1000);
    border-radius: 5px;
    box-shadow: var(--neon-blue-900) 0px 0px 10px;
    font-family: 'raleway-b';
}

.content-left-items a button {
    z-index: 0;
    padding: 20px;
    border: none;
    border-radius: 20px;
    
    color: var(--neon-blue-1500);

    background-color: var(--neon-blue-1000);
    font-family: 'raleway-b';
    font-size: 18px;
    transition: color 0.3s ease-out, background-color 0.3s ease-out, padding 0.13s ease-out;
}

.content-left-items button:hover {
    color: black;
    background-color: var(--neon-blue-1200);
    padding: 25px;
}

.spotify-playlist {
    opacity: 0;
    font-family: 'raleway-b';
}

.spotify-playlist iframe {
    box-shadow: var(--stormy-mauve-100) 0px 0px 30px;

    border: var(--stormy-mauve-300) solid 1px;
    border-radius: 10px;

    outline: var(--stormy-mauve-100) solid 1px;
    outline-offset: 0px;
    
    background-color: var(--stormy-mauve-300);
}

.spotify-playlist.opacity {
    animation: opacity-animation 2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

.hs-description {
    background-color: var(--neon-blue-1000);
}

.hs-description h4 {
    font-family: 'raleway-b';
    font-size: 40px;
}

.hs-description p {
    font-family: 'raleway-r';
    font-size: 15px;
}

.retard-list-wrapper {
    background-color: var(--stormy-mauve-225);
}

.retard-list-wrapper p {
    font-size: 40px;
    font-family: 'raleway-b';
}

.search-bar, .retard-list-controls button {
    box-shadow: var(--stormy-mauve-100) 0px 0px 20px;

    border: var(--stormy-mauve-500) solid 1px;
    border-radius: 10px;

    outline: var(--stormy-mauve-100) solid 1px;
    outline-offset: 0px;
    background-color: var(--stormy-mauve-300);

    font-family: 'raleway-b';
    font-size: 18px;
}

.retard-list-controls button {
    color: var(--neon-blue-1500);
    transition: background-color 0.3s ease-out;
}

.retard-list-controls button:hover {
    background-color: var(--stormy-mauve-400);
}

.retard-list {
    border-radius: 20px;
    /* box-shadow: 0px 0px 40px var(--stormy-mauve-100); */

    scrollbar-color: var(--stormy-mauve-800) var(--stormy-mauve-300);
    scrollbar-width: thin;

    border: var(--stormy-mauve-300) solid 1px;
    border-radius: 10px;

    outline: var(--stormy-mauve-100) solid 1px;
    outline-offset: 0px;
}

.retard-list table {
    border-collapse: collapse;
    font-family: 'raleway-r';
    font-size: clamp(5px, min(1.2dvw, 16px), min(1.2dvw, 16px));

    overflow: hidden;
    background-color: var(--stormy-mauve-300);
}

.retard-list th, .retard-list td {
    border: var(--stormy-mauve-200) solid 1px;
}

.retard-list th {
    font-size: 16px;
    background-color: var(--stormy-mauve-200);
}

.retard-list tr:nth-child(even) {
    background-color: var(--stormy-mauve-400);
}

.table-author {
    background-color: var(--stormy-mauve-225);
}

.table-userName {
    font-family: 'raleway-b';
}

.table-userDesc {
    text-align: justify;
    text-justify: inter-word;
    text-wrap-mode: wrap;
}

.features-content h2 {
    grid-column: span 2;

    text-align: center;
    font-size: 40px;
    font-family: 'raleway-b';
}

.feature {
    background-color: var(--stormy-mauve-225);
    
    border: var(--stormy-mauve-300) solid 1px;
    border-radius: 10px;

    outline: var(--stormy-mauve-100) solid 1px;
    outline-offset: 0px;

    box-shadow: var(--stormy-mauve-100) 0px 0px 20px;
}

.title {
    font-family: 'raleway-b';
    font-size: 25px;
}

.feature video, .feature img {
    border: var(--stormy-mauve-300) solid 1px;
    border-radius: 10px;

    outline: var(--stormy-mauve-100) solid 1px;
    outline-offset: 0px;
}

.feature-description {
    font-family: 'raleway-r';
    font-size: 15px;
    
    padding: 10px;
    border: var(--stormy-mauve-400) solid 1px;
    border-radius: 10px;
    background-color: var(--stormy-mauve-300);
}

.footer {
    background-color: var(--stormy-mauve-225);
    
    border-top: var(--stormy-mauve-300) solid 1px;
    outline: var(--stormy-mauve-100) solid 1px;
    
    outline-offset: 0px;
}

.footer p {
    font-family: 'raleway-m';
    font-size: 14px;
}

@keyframes opacity-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes opacity-background-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.1;
    }
}

@media screen and (max-width: 600px) {

    .content-left-items {
        font-size: 4dvw;
    }

    .content-left-items p {
        font-family: 'raleway-r';
        font-size: 3dvw;
    }

}