*,
*:before,
*:after {
   box-sizing: border-box;
}


* {
   outline: 0;
}

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


html {
   font-size: 62.5%;
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: transparent;
   scroll-behavior: smooth;
}


body {
   font-size: 1.6rem;
   color: black;
   /* background-color: #c8c8c8; */
   background-color: #ffffff;
   font-family: "Arial", sans-serif;
   line-height: 1.5;
   padding: 0 3rem 7rem 3rem;
   background-image: url('../img/bg.jpg')
}

body h1 {
   position: relative;
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 2rem;
   line-height: 1.2;
   font-size: 2rem;
}

h1:before {
   content: "";
   display: block;
   width: 5rem;
   min-width: 5rem;
   height: 5rem;
   margin-right: 1rem;
   background-position: center;
   background-size: cover;
   background-image: url('./images/escape-logo-small.png');
}

h1.congrats {
   margin-top: 8rem;
}

h1.congrats:before {
   background-image: url('./images/success.svg');
}

.toolslink {
   display: flex;
   margin-top: 0;
   margin-bottom: 2rem;
}

.toolslink a,
.buttonlink a {
   padding: .6rem 1.5rem;
   border-radius: .5rem;
   text-decoration: none;
   font-weight: 500;
   text-transform: uppercase;
   background-color: #24bd29;
   font-size: 1.4rem;
   color: #ffffff;
   transition: background-color .3s ease;
   white-space: nowrap;
}

.toolslink a {
   font-size: 1.3rem;
   padding: .3rem .8rem;
}

.toolslink a:hover,
.buttonlink a:hover {
   background-color: rgba(36, 189, 41, .7);
}

input {
   padding: .8rem 1rem;
   font-size: 1.6rem;
   border: solid .1rem gray;
   border-radius: .5rem;
   margin-right: 1rem;
   width: 100%;
   margin-bottom: 1rem;
}

.solutionlabel {
   width: 100%;
   display: block;
   margin-bottom: 1rem;
}

button {
   padding: 1rem 1.3rem;
   border-radius: .5rem;
   text-decoration: none;
   font-weight: 500;
   text-transform: uppercase;
   background-color: rgb(56, 69, 237);
   font-size: 1.4rem;
   color: #ffffff;
   border: 0;
   outline: none;
   transition: background-color .3s ease;
   cursor: pointer;
   white-space: nowrap;
   width: 100%;
}

button:hover {
   background-color: rgba(56, 69, 237, .6);
}

h2 {
   color: #0012ff;
   position: relative;
   padding-bottom: .5rem;
   display: inline-block;
   font-size: 2.2rem;
   margin-top: 0;
   width: 100%;
}

h2:after {
   display: block;
   content: "";
   width: 100%;
   max-width: 20rem;
   height: .3rem;
   position: absolute;
   bottom: 0;
   left: 0;
   background-color: #0012ff;;
}

[id^='helpslot'] {
   margin-top: 1rem;
   display: block;
}

[id^='helpslot'] a {
   padding: .8rem 1.5rem;
   border-radius: .5rem;
   text-decoration: none;
   font-weight: 500;
   text-transform: uppercase;
   background-color: #24bd29;
   font-size: 1.4rem;
   color: #ffffff;
   border: 0;
   outline: none;
   transition: background-color .3s ease;
   cursor: pointer;
   display: inline-block;
   text-align: center;
}

[id^='helpslot'] a:before {
   display: inline-block;
   width: .4rem;
   height: .4rem;
   content: "";
   background-image: url('./images/question-mark.png');
   background-position: center;
   background-size: cover;
}

hr {
   border: solid 1px #b1b1b1;
   margin: 2rem 0;
}

p {
   margin-bottom: 3rem;
}

table td {
   padding: .7rem .4rem;
}

ul {
   padding-left: 2rem;
}

ul li {
   margin-bottom: 2rem;
}

.tools {
   width: 100%;
}

/* Responze */

@media (min-width: 400px) {
   input {
      width: auto;
      margin-bottom: 0;
   }

   button {
      width: auto;
   }

   [id^='helpslot'] a {
      white-space: nowrap;
   }

   [id^='helpslot'] {
      margin-left: 2rem;
      margin-top: 0;
      display: inline-block;
   }
}

@media (min-width: 768px) {
   .toolslink {
      display: inline-flex;
      vertical-align: top;
      height: 8rem;
      align-items: center;
      float: right;
      margin-top: 2rem;
      margin-bottom: 4rem;
   }

   table td {
      padding: .7rem 1rem;
   }

   .toolslink a {
      font-size: 1.4rem;
      padding: .6rem 1.5rem;
   }

   body {
      padding: 0 calc((100% - 800px) / 2) 7rem;
   }

   body h1 {
      margin-bottom: 5rem;
      font-size: 2.5rem;
   }

   body h1:before {
      height: 7rem;
      width: 7rem;
      min-width: 7rem;
      margin-right: 1rem;
   }

   h2 {
      margin-top: 1.8rem;
   }

   h3 {
      margin-bottom: .5rem;
   }

   hr {
      margin: 4rem 0;
   }

   p {
      margin-bottom: 4rem;
      margin-top: .5rem;
   }
}