style.css

@font-face {
    font-family: Netflix;
    src: url('Fonts/Netflix.otf') format("opentype");
}
@font-face {
    font-family: Twitch;
    src: url('Fonts/Twitch.ttf')
}
@font-face {
    font-family: Prime;
    src: url('Fonts/Prime.ttf')
}
@font-face {
    font-family: Youtube;
    src: url('Fonts/Youtube.ttf')
}
@font-face {
    font-family: Spotify;
    src: url('Fonts/Spotify.ttf')
}
@font-face {
    font-family: Disney;
    src: url('Fonts/Disney+.otf') format("opentype");
}
@font-face {
    font-family: Azonix;
    src: url('Fonts/Azonix.otf') format("opentype");
}
@font-face {
    font-family: Reddit;
    src: url('Fonts/Reddit.ttf')
}
@font-face {
    font-family: Roboto;
    src: url('Fonts/Date.ttf')
}
@font-face {
    font-family: Chrome;
    src: url('Fonts/Chrome.ttf')
}
@font-face {
    font-family: DMAX;
    src: url('Fonts/DMAX.ttf')
}
@font-face {
    font-family: Joyn;
    src: url('Fonts/Joyn.ttf')
}
body{
    background-image: url(background.jpg);
    margin: 0;
/* No scroll for Internet Explorer, Edge */
-ms-overflow-style: none;
scrollbar-width: none;
overflow-y: scroll;
}
/*Noscroll for Chrome, Safari, and Opera */
body::-webkit-scrollbar {
  display: none;
}

.container{
  width: 100vw;
  height: 100vh;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 200px 1fr 1fr 1fr 1fr;
  grid-gap: 8px;

  font-family: Roboto;
  color: floralwhite;
  font-size: 30px;
  align-items: center;
  text-align: center;
}
.Banner{
  grid-row: 1;
  grid-column-start: 1;
  grid-column-end: 6;
}
.Netflix{
  height: 100%;
  width: 100%;
  font-family: Netflix;
  font-size: 70px;
  background-color: rgba(229 9 20);
display: grid;
justify-content: center;
align-content: center;
}
.Netflix:hover{
  height: 100%;
  width: 100%;
  font-family: Netflix;
  font-size: 70px;
  background-color: rgba(229 9 20);
  border-style: solid;
  border-color: floralwhite;
  cursor: pointer;
  display: grid;
  justify-content: center;
  align-content: center;
  transition: all 120ms ease-out;
  border-radius: 13px;
  box-shadow: inset 0 0 15px white, 0 0 10px white;
}

.Twitch{
  height: 100%;
  width: 100%;
  font-family: Roboto; /* Replace Roboto with Twitch to use Twitch font (Disabled because of Github Pages) */
  font-size: 65px;
  background-color: rgba(100 65 165);
  display: grid;
  justify-content: center;
  align-content: center;
}
.Twitch:hover{
  height: 100%;
  width: 100%;
  font-family: Roboto; /* Replace Roboto with Twitch to use Twitch font (Disabled because of Github Pages) */
  font-size: 65px;
  background-color: rgba(100 65 165);
  border-style: solid;
  border-color: floralwhite;
  cursor: pointer;
  display: grid;
  justify-content: center;
  align-content: center;
  transition: all 120ms ease-out;
  border-radius: 13px;
  box-shadow: inset 0 0 15px white, 0 0 10px white;
}

.Prime{
  height: 100%;
  width: 100%;
  font-family: prime;
  font-size: 45px;
  background-color: rgba(35,47,62);
  color: rgb(0,168,225);
  display: grid;
  justify-content: center;
  align-content: center;
}
.Prime:hover{
  height: 100%;
  width: 100%;
  font-family: Prime;
  font-size: 45px;
  background-color: rgba(35,47,62);
  border-style: solid;
  border-color: floralwhite;
  cursor: pointer;
  color: rgb(0,168,225);
  display: grid;
  justify-content: center;
  align-content: center;
  transition: all 120ms ease-out;
  border-radius: 13px;
  box-shadow: inset 0 0 15px white, 0 0 10px white;
}
.Youtube{
  height: 100%;
  width: 100%;
  font-family: Youtube;
  font-size: 60px;
  background-color: rgba(255 0 0);
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
}
.Youtube:hover{
  height: 100%;
  width: 100%;
  font-family: Youtube;
  font-size: 60px;
  background-color: rgba(255 0 0);
  border-style: solid;
  border-color: floralwhite;
  cursor: pointer;
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
  transition: all 120ms ease-out;
  border-radius: 13px;
  box-shadow: inset 0 0 15px white, 0 0 10px white;
}
.Spotify{
  height: 100%;
  width: 100%;
  font-family: Youtube;
  font-size: 60px;
  background-color: rgba(30 215 96);
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
}
.Spotify:hover{
  height: 100%;
  width: 100%;
  font-family: Youtube;
  font-size: 60px;
  background-color: rgba(30 215 96);
  border-style: solid;
  border-color: floralwhite;
  cursor: pointer;
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
  transition: all 120ms ease-out;
  border-radius: 13px;
  box-shadow: inset 0 0 15px white, 0 0 10px white;
}
.Disney{
  height: 100%;
  width: 100%;
  font-family: Disney;
  font-size: 80px;
  background-color: rgba(0, 55, 148);
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-row: 3;
  grid-column: 1;
}
.Disney:hover{
  height: 100%;
  width: 100%;
  font-family: Disney;
  font-size: 80px;
  background-color: rgba(0, 55, 148);
  border-style: solid;
  border-color: floralwhite;
  cursor: pointer;
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-row: 3;
  grid-column: 1;
  transition: all 120ms ease-out;
  border-radius: 13px;
  box-shadow: inset 0 0 15px white, 0 0 10px white;
}
.Reddit{
  height: 100%;
  width: 100%;
  font-family: Reddit;
  font-size: 80px;
  background-color: rgba(255, 86, 0, 1);
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-row: 3;
  grid-column: 2;
}
.Reddit:hover{
  height: 100%;
  width: 100%;
  font-family: Reddit;
  font-size: 80px;
  background-color: rgba(255, 86, 0, 1);
  border-style: solid;
  border-color: floralwhite;
  cursor: pointer;
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-row: 3;
  grid-column: 2;
  transition: all 120ms ease-out;
  border-radius: 13px;
  box-shadow: inset 0 0 15px white, 0 0 10px white;
}
.DMAX{
  height: 100%;
  width: 100%;
  font-family: DMAX;
  font-size: 60px;
  color: white;
  background-color: rgb(239, 75, 38);
  display: grid;
  justify-content: center;
  align-content: center;
  grid-row: 3;
  grid-column: 3;
}
.DMAX:hover{
  height: 100%;
  width: 100%;
  font-family: DMAX;
  font-size: 60px;
  background-color: rgb(239, 75, 38);
  border-style: solid;
  border-color: floralwhite;
  cursor: pointer;
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-row: 3;
  grid-column: 3;
  transition: all 120ms ease-out;
  border-radius: 13px;
  box-shadow: inset 0 0 15px white, 0 0 10px white;
}
.Joyn{
  height: 100%;
  width: 100%;
  font-family: Joyn;
  font-size: 70px;
  color: white;
  background-color: rgb(3, 3, 3);
  display: grid;
  justify-content: center;
  align-content: center;
  grid-row: 3;
  grid-column: 4;
}
.Joyn:hover{
  height: 100%;
  width: 100%;
  font-family: Joyn;
  font-size: 70px;
  background-color: rgb(3, 3, 3);
  border-style: solid;
  border-color: floralwhite;
  cursor: pointer;
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-row: 3;
  grid-column: 4;
  transition: all 120ms ease-out;
  border-radius: 13px;
  box-shadow: inset 0 0 15px white, 0 0 10px white;
}
.Browser{
  height: 100%;
  width: 100%;
  font-family: Chrome;
  font-size: 70px;
  color: white;
  background-color: rgb(64, 147, 255);
  display: grid;
  justify-content: center;
  align-content: center;
  grid-row: 3;
  grid-column: 5;
}
.Browser:hover{
  height: 100%;
  width: 100%;
  font-family: Chrome;
  font-size: 70px;
  border-style: solid;
  background-color: rgb(64, 147, 255);
  border-color: floralwhite;
  cursor: pointer;
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-row: 3;
  grid-column: 5;
  transition: all 120ms ease-out;
  border-radius: 13px;
  box-shadow: inset 0 0 15px white, 0 0 10px white;
}
.clock{
  grid-row: 1;
  grid-column: 5;
  display: grid;
  font-family: Roboto;
  font-size: 60px;
  border-radius: 40px;
  background-color: rgb(46, 46, 46);
  height: 40%;
  width: 100%;
  justify-content: center;
  align-content: center;
}
.clock:hover{
  grid-row: 1;
  grid-column: 5;
  display: grid;
  font-family: Roboto;
  font-size: 60px;
  border-radius: 40px;
  background-color: rgb(46, 46, 46);
  height: 40%;
  width: 100%;
  justify-content: center;
  align-content: center;
  transition: all 120ms ease-out;
  transition: box-shadow 500ms;
  box-shadow: inset 0 0 25px rgb(93, 23, 255), 0 0 25px rgb(93, 23, 255);
  border-color: white;
  border-style: solid;
  border-width: 1px;
}
.Datum{
  grid-row: 5;
  grid-column-start: 2;
  grid-column-end: 5;
  background-color: rgb(20, 20, 20);
  height: 40%;
  font-family: Roboto;
  width: 100%;
  font-size: 40px;
  border-radius: 40px;
  display: grid;
  justify-content: center;
  align-content: center;

}
.Datum:hover{
  grid-row: 5;
  grid-column-start: 2;
  grid-column-end: 5;
  background-color: rgb(20, 20, 20);
  height: 40%;
  font-family: Roboto;
  width: 100%;
  font-size: 40px;
  border-radius: 40px;
  display: grid;
  justify-content: center;
  align-content: center;
  transition: all 120ms ease-out;
  transition: box-shadow 200ms;
  box-shadow: inset 0 0 10px white, 0 0 10px white;
  border-color: floralwhite;
  border-style: solid;
  border-width: 2px;
}
.Datum:hover + .hovermessage{
  visibility: visible;
  grid-column: 3;
  grid-row: 4;
  background-color: rgb(20, 20, 20);
  height: 40%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
  font-size: 35px;
  transition: all 120ms ease-out;
  transition: box-shadow 500ms;
  box-shadow: inset 0 0 20px rgb(93, 23, 255), 0 0 20px rgb(93, 23, 255);
  border-color: rgb(93, 23, 255);
  border-style: solid;
  border-width: 1px;
  border-radius: 40px;

}
.hovermessage{
  visibility: hidden;
}