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

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
  background-color: lightblue;
  height: 90vh;
}

#componente-a {
  width: 100%;
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3E1E68;
}

#logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#temporizador {
  font-size: 3em;
  font-family: Verdana;
  color: red;
}

#componente-b {
  width: 100%;
  height: 20vh;
  display: block;
  align-items: center;
  justify-content: center;
  background-color: #222222;
  text-align: center;
}


.timerBtn{
    width: 10vw;
    height: 6vh;
    border: none;
    border-radius: 5px;
    background-color: #333333;
    color: white;
    cursor: pointer;
    font-family: verdana;
    font-size: 4vh;
}
#timeDisplay{
    font-size: 10vh;
    color: red;
    font-family: 'Inconsolata', monospace;
}



#componente-c {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

#c1,
#c2,
#c3,
#c4 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 10vh;
  font-family: 'Inconsolata', monospace;
  position: relative;
  color: white;
}

#c1 {
  background: blue;
  height: 15vh;
}

#c2 {
  background: red;
  height: 15vh;
}

#c3 {
  background: green;
  height: 15vh;
}

#c4 {
  background: #D8AD01;
  height: 15vh;
}

#nombreEquipo {
  font-family: Verdana;
  position: relative;
  color: white;
  width: 35%;
}

#puntos {
  position: relative;
  color: white;
  width: 5%;
  font-size: 12vh;
}


input[type=button] {
    width: 2vw;
    height: 6vh;
    border: none;
    border-radius: 5px;
    background-color: #333333;
    color: white;
    cursor: pointer;
    font-family: 'Inconsolata', monospace;
    font-size: 4vh;
}

input[type=button]:focus {
    outline: none;
}