/*
/ Ben Grosser
/
/ Platform Sweet Talk
/ website / installation
/ 2021
/
/ commissioned by arebyte Gallery
/ as part of the solo exhibition: 
/
/ Software For Less
/ arebyte Gallery, London, UK
/ Aug-Oct 2021
/
/ updated 2024 for ZKM
*/

* {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
        none;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("fonts/SF-Pro-Display-Bold.woff2") format("woff2"),
         url("fonts/SF-Pro-Display-Bold.otf") format("opentype");
    font-weight: 700;
    font-display: block;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("fonts/SF-Pro-Display-Regular.woff2") format("woff2"),
         url("fonts/SF-Pro-Display-Regular.otf") format("opentype");
    font-weight: normal;
    font-display: block;
}

body {
  margin:0;
  display: grid;
  height: 100vh;
  place-items: center center;
  color:#ccc;
  line-height:1.2em;
  font-family:"SF Pro Display", "Comic Sans MS" !important;
  font-weight:700 !important;
  text-shadow:none;
  background-blend-mode:luminosity;
  background-blend-mode:color;
  font-size:13.00vmin;  /* print */
  font-size:12.5vmin;  /* 12.5 screen */
  line-height:1.025;
}

section.main {
  margin-left:auto;
  margin-right:auto;
  width:70vw;
  text-align:center;
  margin-top:-0.2em;

  /* GIFs ONLY */
  /*
  font-size:70px;
  line-height:1em;
  */
}

#modal-background {
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}


#modal {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  padding:10px 26px;
  border-radius:8px;
  display:flex; 
  flex-direction:column;
  align-items:center;
  width:70vw;
  max-width:350px;
  background: #444;
  display:block;
  color:#bbb;
  font-size:16px;
  font-size:15px;
  font-weight:normal;
  text-shadow: none;
  z-index:1000;
}

#modal a:hover, #modal a.link:hover, #modal a.visited:hover {
  color:#a72f63;
  color:#e574d1;
}

#modal a, #modal a.link, #modal a.visited {
  color:#74b6e5;
}

#modal h1 {
  font-size:1.6rem;
  color:#eee;
  line-height:1.7rem;
  margin-bottom:33px;
}

#modal p {
  line-height:1.2rem;
  color:#ccc;
}

#modal p.meta {
  margin-top:28px;
  font-style:italic;
  font-size:0.9rem;
  line-height:1.1rem;
  color:#a72f63;
  color:#c73b78;
}

#modal img.logo {
  position:absolute;
  top:20px;
  right:18px;
  width:100px;
}

@media screen and (min-width: 320px) {
  body {
  }

  section.main {
    width:80vw;
  }
}

@media screen and (min-width: 640px) {
    /*
  body {
    font-size:13.5vmin;
    line-height:1.025;
  }
  */
  section.main {
    width:82vw;
  }

}

@media screen and (min-width: 700px) and (max-height: 500px) {
  #modal {
    max-width:600px;
  }
}

@media screen and (min-width: 1000px) {
  body {
  }
  section.main {
    width:74vw;
  }
}

@media screen and (min-width: 4400px) {
  body {
  }

  section.main {
    width:70vw;
    /*
     * use for print
    width:80vw;
    */
  }

  #modal {
    max-width:500px;
    font-size:24px;
  }

  #modal h1 {
    font-size:28px;
    line-height:32px;
    margin-bottom:45px;
  }

  #modal p {
    font-size:20px;
    line-height:28px;
  }

  #modal p.meta {
    margin-top:30px;
    font-size:22px;
    line-height:24px;
  }
}


.fade-in-text {
  animation: fadeIn             linear 0.3s;
  -webkit-animation: fadeIn     linear 0.3s;
  -moz-animation: fadeIn        linear 0.3s;
  -o-animation: fadeIn          linear 0.3s;
  -ms-animation: fadeIn         linear 0.3s;
  animation-fill-mode:forwards;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

.fade-out-text {
  animation: fadeOut             linear 0.3s;
  -webkit-animation: fadeOut     linear 0.3s;
  -moz-animation: fadeOut        linear 0.3s;
  -o-animation: fadeOut          linear 0.3s;
  -ms-animation: fadeOut         linear 0.3s;
animation-fill-mode:forwards;
}

@keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-moz-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-webkit-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-o-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-ms-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}