:root {
  /* BLUE */
  --federal-blue: #03045eff;
  --marian-blue: #023e8aff;
  --honolulu-blue: #0077b6ff;
  --blue-green: #0096c7ff;
  --pacific-cyan: #00b4d8ff;
  --vivid-sky-blue: #48cae4ff;
  --non-photo-blue: #90e0efff;
  --non-photo-blue-2: #ade8f4ff;
  --light-cyan: #caf0f8ff;

  /* PINK VARIANTS */
  --misty-rose: #ffe5ecff;
  --pink: #ffc2d1ff;
  --cherry-blossom-pink: #ffb3c6ff;
  --bakermiller-pink: #ff8fabff;
  --rose-pompadour: #fb6f92ff;

  /* ORANGE VARIANTS */
  --rich-black: #03071eff;
  --chocolate-cosmos: #370617ff;
  --rosewood: #6a040fff;
  --penn-red: #9d0208ff;
  --engineering-orange: #d00000ff;
  --sinopia: #dc2f02ff;
  --persimmon: #e85d04ff;
  --princeton-orange: #f48c06ff;
  --orange-web: #faa307ff;
  --selective-yellow: #ffba08ff;

  /* Black VARIANTS */
  --seasalt: #f8f9faff;
  --antiflash-white: #e9ecefff;
  --platinum: #dee2e6ff;
  --french-gray: #ced4daff;
  --french-gray-2: #adb5bdff;
  --slate-gray: #6c757dff;
  --outer-space: #495057ff;
  --onyx: #343a40ff;
  --eerie-black: #212529ff;

  --black: #000000ff;
  --oxford-blue: #14213dff;
  --orange-web: #fca311ff;
  --platinum: #e5e5e5ff;
  --white: #ffffffff;
}

html,
body {
  margin: 0;
  padding: 0;
  color: black;
}

body {
  background: white;
  font-family: 'Montserrat', sans-serif;
  /* font-family: 'Press Start 2P', sans-serif; */
  font-weight: 700;
}

header a {
  text-decoration: none;
  color: black;
}

header a:hover {
  background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-color text 2s;
  /* font-family: 'Press Start 2P', sans-serif; */
}

h1.title {
  color: black;
  display: flex;
  justify-content: center;
  margin: 15px auto;
}

.navbar {
  top: 0;
  position: sticky;
  background-color: var(--marian-blue);
}

/* NAVBAR */
ul {
  overflow: hidden;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: var(--marian-blue);
}

li a {
  text-decoration: none;
  color: white;
  padding: 20px;
  float: left;
}

li.right a {
  float: right;
}

li a:hover {
  transition: background-color 1s;
  background-color: var(--oxford-blue);
}

li a:active {
  background-color: var(--princeton-orange);
  color: white;
}

/* BODY */
.content {
  margin: 0;
  margin-top: 10px;
  padding: 10px;
}

a {
  color: var(--bakermiller-pink);
}

/* NEWS ON MAIN PAGE */
.news {
  display: flex;
  justify-content: space-around;
  padding: 40px;
}

.news>a>div {
  padding: 20px;
  background-color: lightblue;
  border-radius: 10px;
}

.news>a>div:hover p {
  transition: color 0.5s;
  /* transition: transform 0.5s; */
  color: var(--blue-green);
  /* transform: scale(2); */
}

.news img {
  width: 400px;
  height: 300px;
}

.news img:hover {
  transition: transform 0.5s;
  transform: scale(2) translateY(30px);
}

.news p {
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
  color: black;
}

.placeholder {
  height: 1000px;
}

img.logo {
  width: 80%;
  height: auto;
  image-rendering: auto;
  display: block;
  margin: auto;
}

/* FOOTER */
footer {
  width: 100%;
  bottom: 0;
}

div.more-infos {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 300px;
  background-color: #333;
}

p {
  flex-direction: column;
  color: white;
}

p.footer-title {
  margin: 0;
  padding: 10px;
  font-size: 20px;
  font-weight: 300;
  flex-shrink: 1;
  flex-grow: 1;
}

p.footer-content {
  margin: 0;
  padding: 10px;
  flex-shrink: 1;
  flex-grow: 16;
}

p.footer-end {
  position: relative;
  align-self: self-end;
  margin: 0;
  padding: 10px;
  flex-shrink: 100;
  flex-grow: 1;
}

/* RESPONSIVE */
@media screen and (max-width: 650px) {

  /* NAVBAR */
  .navbar {
    display: block;
    position: sticky;
    top: 0;
    background-color: var(--marian-blue);
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--marian-blue);
    text-align: center;
  }

  li {
    margin: 0;
    padding: 0;
  }

  li a {
    display: block;
    text-decoration: none;
    text-align: center;
    color: white;
    float: none;
  }

  li.right a {
    float: none;
  }

  li:hover {
    background-color: var(--oxford-blue);
  }

  li a:active {
    background-color: var(--princeton-orange);
    color: white;
  }

  /* CONTENT */
  .content {
    display: block;
  }

  .news {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .news>a>div {
    /* padding: 20px; */
    margin-bottom: 20px;
    background-color: lightblue;
    border-radius: 10px;
  }

  .news img {
    width: 400px;
    height: 300px;
  }

  .news p {
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
    color: black;
  }

}