@import url("https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@400;500;600;700&display=swap");

:root{
  --cor-azul: #0c52ad;
  --cor-azul-hover: #0261db;
  --cor-verde: #208523;
  --cor-verde-hover: #1c9c20;
  --cor-amarela: #d1bb17;
  --cor-amarela-hover: #e3ca10;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  font-family: Yanone Kaffeesatz, sans-serif;
}

html,
body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1 0 auto;
  font-size: 18px;
}

.footer {
  text-align: center;
}

.raio {
  border-radius: 15px;
  box-shadow: 5px 10px 18px #888888;
}

.img-perfil {
  width: 35px;
  background-color: white;
  border-radius: 50%;
}

.img-foto {
  width: 100px;
  background-color: white;
  border-radius: 50%;
}

div.cartao {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

div.cartao .cartao-topo {
  border-bottom: 1px solid #ccc;
}

div.cartao .cartao-corpo {
  width: 100%;
  height: 0;
  transition: height 0.5s ease-in-out;
}

div.cartao:hover .cartao-corpo {
  height: 100px;
}

div.cartao .cartao-baixo {
  border-top: 1px solid #ccc;
}

div.card-home {
  position: relative;  
  border: none;
  height: 100px; 
  width: 100%; 
}

div.card-home p {
  position: absolute;
  color: white;
  top: 0%;
  left: 0%;
  padding: 10px;
  transition: all 0.5s ease-in-out;
}

div.card-home:hover p {
  top: 50%;
  left: 50%;
  padding: 0;
  transform: translate(-50%, -50%) scale(1.4);
}

.card-blue {
  background-color: var(--cor-azul);
  transition: all 0.5s ease-in-out;
}

.card-blue:hover {
  background-color: var(--cor-azul-hover);
}

.card-green {
  background-color: var(--cor-verde);
  transition: all 0.5s ease-in-out;
}

.card-green:hover {
  background-color: var(--cor-verde-hover);
}

.card-yellow {
  background-color: var(--cor-amarela);
  transition: all 0.5s ease-in-out;
}

.card-yellow:hover {
  background-color: var(--cor-amarela-hover);
}

.card-curso {
color: #000;
  border: 2px solid var(--cor-azul);
  border-radius: 10px;
  transition: all 0.5s ease-in-out;
}

.card-curso:hover {
 color: #fff;
 background-color: var(--cor-azul-hover);
 transform: scale(1.1);
 box-shadow: 0 0 2em black;
}