/* This file (style.css) contains global design rules */


/* Global colors */
:root {
  --background-primary: linear-gradient(135deg, #202b38 0%, #41537e 100%);
  --background-secondary: rgba(255,255,255,0.08);

  --color-primary: #2953b8;
  --color-secondary: #dd4e9b;
  --color-accent: #ffd43b;   /* yellow accent */
  --color-accent2: #43e37e;  /* green accent */
  --color-accent3: #ff8c3b;  /* orange accent */

  --textcolor-primary: #fff;
  --textcolor-secondary: #b5c6ee;
  --textcolor-accent: #dd4e9b;

  --btn-background: linear-gradient(90deg, #43e37e 0%, #2953b8 100%);
  --btn-hover: linear-gradient(90deg, #ffd43b 0%, #dd4e9b 100%);

  --input-background: rgba(221, 78, 155, 0.10);
  --input-focus: #ffd43b66;
}

/* Standard document layout */
* { 
  box-sizing: border-box;
}
html {
  height: 100%;
}
body { 
  margin: 0; 
  font-family: system-ui, 'Segoe UI', Arial, sans-serif; 
  background: var(--background-primary); 
  min-height: 100vh;
  color: var(--textcolor-primary);
}

/* Standard button design */
:where(button){
  margin-top: 8px;
  padding: 10px 16px;
  background: var(--btn-background);
  color: var(--textcolor-primary);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 4px 12px 0 rgba(67, 227, 126, 0.12);
  transition: background .2s, color .2s, transform .1s;
}
:where(button:hover), :where(button:focus){
  background: var(--btn-hover);
  color: #312043;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px 0 rgba(221, 78, 155, 0.12);
}

/* Avatar-Design */
.avatar {
  border-radius: 50%;
  border: 3px solid var(--color-accent);
  background: linear-gradient(120deg, var(--color-primary) 35%, var(--color-secondary) 70%);
  margin: 10px auto 20px;
  color: var(--textcolor-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;  
  box-shadow: 0 2px 8px 0 rgba(255,212,59,0.10);
}

/* Standard input design */
:where(input){
  width: 100%;
  padding: 8px 12px;
  background: var(--input-background);
  color: var(--textcolor-primary);
  border: 1.5px solid var(--color-secondary);
  border-radius: 6px;
  outline: none;
  transition: border-color .2s, background .2s;
}
:where(input:focus){
  border-color: var(--color-accent2);
  background: var(--input-focus);
  color: #252029;
}
:where(input)::placeholder{
  color: var(--textcolor-secondary);
  opacity: 1;
}

/* Standard Topbar style */
.topbar {
  background: linear-gradient(90deg, var(--color-primary));  /* blue background, old: rgb(99,120,255)*/
  color: var(--textcolor-primary);	 /* text color white */  
  padding: 10px 16px;         					   /* padding around content on all sides */
  display: flex;
}

/* Header links: keep logo/links in the topbar non-underlined and white */
.topbar a {
  color: var(--textcolor-primary);
  text-decoration: none;
}
.topbar a:hover,
.topbar a:focus {
  color: var(--textcolor-accent);
  text-decoration: none;
}
/* Logo on the left side */
.logo {
  display: flex;
  line-height: 1.3;
}

.title{
  font-size: clamp(20px, 3vw, 32px); 
  font-weight: 600;
  background: var(--color-secondary);
  border: 4px solid var(--color-secondary);
  padding-left: 10px;
  padding-right: 4px;
  border-top-left-radius: 10px ;
  border-bottom-left-radius: 10px ;
}

.group{
  font-size: clamp(20px, 3vw, 32px); 
  font-weight: 600;
  border: 4px solid var(--color-secondary);
  padding-left: 8px;
  padding-right: 10px;
  border-top-right-radius: 10px ;
  border-bottom-right-radius: 10px ;
}