import styled from '@emotion/styled'
import { keyframes } from '@emotion/react'

export const BreadcrumbsWrapper = styled.div`
  padding: 12px;
`

const reveal = keyframes`
    0% {
        transform: scale(0.85, 0.85);
    }

    100% {
        transform: scale(1);
    }
`

export const StudentList = styled.ul`
  padding-left: 0px;
  height: 600px;
  justify-content: space-evenly;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
`

export const QRCanvas = styled.canvas`
  display: block;
`

export const ErrorSpan = styled.span`
  color: #f9e2e2;
  display: block;
  padding: 16px;
  background-color: #d32f0b;
  border-radius: 11px;
`