/* CSS files add styling rules to your content */

/* FONTS: Thin - Light - Regular - Medium - Bold */
@font-face {
  font-family: "WorkSans-Thin";
  src: url("https://cdn.glitch.com/7e4ba97d-f66b-44b0-b1bb-c15b9bff9c34%2FWorkSans-Thin.ttf?v=1614933649112");
}
@font-face {
  font-family: "WorkSans-Light";
  src: url("https://cdn.glitch.com/7e4ba97d-f66b-44b0-b1bb-c15b9bff9c34%2FWorkSans-Light.ttf?v=1614933591398");
}
@font-face {
  font-family: "WorkSans-Regular";
  src: url("https://cdn.glitch.com/7e4ba97d-f66b-44b0-b1bb-c15b9bff9c34%2FWorkSans-Regular.ttf?v=1614933604719");
}
@font-face {
  font-family: "WorkSans-Medium";
  src: url("https://cdn.glitch.com/7e4ba97d-f66b-44b0-b1bb-c15b9bff9c34%2FWorkSans-Medium.ttf?v=1614933625761");
}
@font-face {
  font-family: "WorkSans-Bold";
  src: url("https://cdn.glitch.com/7e4ba97d-f66b-44b0-b1bb-c15b9bff9c34%2FWorkSans-Bold.ttf?v=1614933674590");
}

body {
  background: linear-gradient(to left, #bdc3c7, white, grey);
  font-family: "WorkSans-Light", sans-serif;
  margin: 2em;
  letter-spacing: 1px;
}

h3 {
  display: flex;
  text-align: justify;
  color: white;
  font-family: "WorkSans-Regular", sans-serif;
  font-size: 1.4rem;
  line-height: 42px;
  text-shadow: black 0 0 10px, black 0 0 10px, black 0 0 2rem;
  padding: 24%;
}

p {
  display: flex;
  text-align: justify;
  font-family: "WorkSans-Medium", sans-serif;
  font-size: 1.2rem;
  line-height: 28px;
  text-shadow: white 0 0 5px, white 0 0 10px, white 0 0 0.2rem;
  padding: 24%;
}

a {
  color: inheret;
}
a:link {
  text-decoration: none;
  color: black;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
  color: black;
}

#title {
  display: block;
  position: fixed;
  top: 10px;
  color: black;
  font-family: "WorkSans-Bold", sans-serif;
  text-shadow: white 0 0 5px, white 0 0 10px, white 0 0 0.2rem;
}

.question {
  display: inline-block;
  justify-content: center;
  text-align: center;
  color: black;
  font-family: "WorkSans-Light", sans-serif;
  font-size: 5rem;
  text-shadow: black 0 0 10px, black 0 0 5px, black 0 0 5px;
  padding: 5rem;
  border: 0;
  margin: 10rem 5rem 10rem 5rem;
}

#subtitle {
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
  color: black;
  font-family: "WorkSans-Regular", sans-serif;
  font-size: 15px;
  text-shadow: grey 0 0 5px, white 0 0 10px, white 0 0 0.2rem;
  margin: 300px 0 300px 300px;
}

#app {
  width: 100%;
  height: 33rem;
  opacity: 0.8;
  padding: 24% 0 24% 0;
  border: 0;
  margin: 0;
}

.list {
  width: 40%;
  height: 111px;
  background-color: white;
  display: block;
  padding: 0;
  border: 0;
  margin: 1px;
}

.profile {
  float: left;
  overflow: hidden;
  width: 90px;
  height: 90px;
  background-color: #e6e9ef;
  border-radius: 100%;
  margin: 10px;
  margin: 10px;
}

.text {
  position: relative;
  display: block;
  text-align: left;
  font-family: "WorkSans-Regular", sans-serif;
  font-size: 1.8vw;
  padding: 5% 10% 0 30%;
}

button:hover {
  background-color: #bdc3c7;
  cursor: pointer;
}

button:hover > .textHidden {
  display: block;
}

button:hover > .text {
  text-decoration: line-through;
  text-decoration-color: red;
}

button:active,
.textHidden {
  display: block;
}

button:active > .text {
  text-decoration: line-through;
  text-decoration-color: red;
}

.textHidden {
  position: relative;
  display: none;
  text-align: left;
  font-family: "WorkSans-Regular", sans-serif;
  font-size: 1.66vw;
  padding: 1% 10% 5% 30%;
}

.chatroom {
  width: 60%;
  height: 560px;
  background-color: #e6e9ef;
  display: block;
  position: relative;
  bottom: 560px;
  left: 40%;
}

.bubble {
  display: block;
  position: relative;
  fill: #778899;
  opacity: 0.66;
  rx: 5px;
  margin: 2px;
}

.A {
  width: 50%;
  height: 20%;
  x: 10px;
  y: 10px;
}

.B {
  width: 40%;
  height: 15%;
  x: 125px;
  y: 35px;
}

.C {
  width: 60%;
  height: 40%;
  x: 10px;
  y: 60px;
}

.c: hover > .content {
  display: block;
}

button: active > .bubble {
  display: none;
}

button: active > .content {
  display: block;
}

.bibliography {
  margin-top: 1000px;
  border: 20px;
}

img {
  width: 100%;
}

#screen_msg {
  display: none;
}

@media screen and (max-width: 1000px) {
  #everything {
    display: none;
  }
  #screen_msg {
    display: block;
  }
}