boredbutton3

style.css (5544B)

---

 *{
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 html, body{
     height: 100%;
     margin: 0;
     padding: 0;
     overflow: hidden;
 }
 
 @font-face {
 	font-family: krublight;
 	src: url('fonts/Krublight.ttf');
 }
 
 canvas{
     background-color: #fcfcfc;
     z-index: 0;
     top: 0;
 }
 
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
         -ms-user-select: none; /* Internet Explorer/Edge */
             user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
 /* Rubrik */
 .headline {
 	color: #3F617C;
 	font-size: 2.3em;
 	letter-spacing: 0.3em;
 	font-family: krublight;
 	margin-top: 2%;
 	position: fixed;
   font-weight: bold;
   top: 0;
 	text-align: center;
 	left: 50%;
 	right: 0;
 	width: fit-content;
   transform: translate(-50%, 0);
 }
 
 /* Fakta */
 #fact_text {
     margin: auto;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: fit-content;
     max-width: 70%;
     height: fit-content;
     text-align: center;
     margin-top: 57vh;
     display: none;
     opacity: 0;
     animation: appear 2s linear;
     font-size: 1.8em;
     font-family: krublight;
     z-index: 10;
     border-radius: 5px;
     transition: background-color 1s, box-shadow 1s;
     overflow: scroll;
     height: fit-content;
     max-height: 30vh;
     overflow-x: hidden;
 }
 
 #fact_text::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 #fact_text::-webkit-scrollbar-track {
   display: none;
 }
 #fact_text::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: rgba(63, 97, 124, 0.75);
 }
 
 #fact_text:hover {
   background-color: rgba(242, 242, 242, 0.7);
   box-shadow: 0 0 20px rgba(242, 242, 242, 0.9);
 }
 
 @keyframes appear {
   0% { opacity: 0; }
   100% { opacity: 1; }
 }
 
 /* Footer */
 footer{
 	color: #3F617C;
 	text-align: center;
 	margin-bottom: 1%;
 	font-size: 1em;
 	position: fixed;
   bottom: 0;
   left: 50%;
   right: 0;
 	width: fit-content;
 	font-family: krublight;
   transform: translate(-50%, 0);
 }
 
 /* Knappen */
 #button {
   width: 15vh;
   height: 15vh;
   border: 2px solid #3F617C;
   background-color: #3F617C;
   opacity: 0.75;
   position: fixed;
   top:0; bottom:0; left:0;right:0;
   margin: auto;
   border-radius: 50%;
   transition: 0.7s;
   z-index: 2;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
 
 #button:before {
   content: '';
   background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
   position: absolute;
   top: -3px;
   left:-3px;
   background-size: 500%;
   z-index: -1;
   filter: blur(7px);
   width: calc(100% + 6px);
   height: calc(100% + 6px);
   animation: glowing 20s linear infinite;
   transition: opacity .3s ease-in-out;
   border-radius: 50%;
   opacity: 0;
 }
 
 #button:focus {
   outline: none;
 }
 
 #button:focus:before {
   opacity: 0.95;
 }
 
 #button:active:after {
   background: #3F617C;
 }
 
 #button:hover {
   opacity: 0.95;
 }
 
 #button:hover:before {
   opacity: 0.95;
 }
 
 #button:after {
   z-index: -1;
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   background: #3F617C;
   left: 0;
   top: 0;
   border-radius: 50%;
   opacity: 1;
 }
 
 @keyframes glowing {
   0% { background-position: 0 0; }
   50% { background-position: 500% 0; }
   100% { background-position: 0 0; }
 }
 
 /*Banner ad*/
 #banner-ad {
   z-index: 9;
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
 }
 
 @media only screen
   and (max-width: 800px) {
     #banner-ad {
       display: none;
     }
 }
 
 /*Scrollbar styling*/
 ::-webkit-scrollbar-thumb {
   background: #888;
 }
 
 /* Contact */
 .popup {
   position: relative;
   display: inline-block;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   opacity: 0.9;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
 
 .popup .popuptext {
   visibility: hidden;
   width: 20vw;
   background-color: #3F617C;
   opacity: 0.9;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 8px 0;
   position: absolute;
   z-index: 1;
   bottom: 125%;
   left: 50%;
   margin-left: -10vw;
 }
 
 .popup .popuptext::after {
   content: "";
   position: absolute;
   opacity: 0.9;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #3F617C transparent transparent transparent;
 }
 
 .popup .show {
   visibility: visible;
   -webkit-animation: fadeIn 1s;
   animation: fadeIn 1s;
   opacity: 0.9;
 }
 
 @-webkit-keyframes fadeIn {
   from {opacity: 0;} 
   to {opacity: 1;}
 }
 
 @keyframes fadeIn {
   from {opacity: 0;}
   to {opacity:1 ;}
 }
 
 /* Ändringar för mobil */
 @media only screen 
   and (max-width: 1300px) { 
     .headline {
       font-size: 1.5em;
       margin-top: 3%;
     }
     #fact_text{
       font-size: 1.4em;
       margin-top: 50vh;
       max-width: 90%;
       max-height: 20vh;
     }
 }
 
 @media only screen 
   and (max-width: 800px) { 
     .popup .popuptext {
       width: 90vw;
       background-color: #3F617C;
       opacity: 1;
       color: #fff;
       text-align: center;
       border-radius: 6px;
       padding: 8px 0;
       z-index: 1;
       bottom: 125%;
       margin-left: -45vw;
     }
     .popup {
       width: 100%;
       display: flex;
       justify-content: center;
       padding: 8px 0;
     }
     .popuptext {
       margin-bottom: 5%;
     }
     .popuptext::after {
       visibility: hidden;
     }
 }