@font-face {
    font-family: 'heart-password';
    src:  url('../fonts/heart-password.eot?cc66c2');
    src:  url('../fonts/heart-password.eot?cc66c2#iefix') format('embedded-opentype'),
      url('../fonts/heart-password.ttf?cc66c2') format('truetype'),
      url('../fonts/heart-password.woff?cc66c2') format('woff'),
      url('../fonts/heart-password.svg?cc66c2#heart-password') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

  :root {
      --fontColor: #535353;
  }

html {
    font-size: 16px;
    color: var(--fontColor);
    font-family: Ubuntu, sans-serif;
}

body {
    background-color: #222222;
    background-image: url("../img/ocean-3605547_1920.jpg");
    background-position: top center;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 100%;
}

.answerBlock {
    height: 14rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.answer {
    background-color: white;
    border-radius: 999px;
    box-shadow: 0 0 5px 5px white;
    padding: 0rem 0rem;
    font-weight: 700;
    overflow: hidden;
    transform: scale(0,0);
    transition: 1s;
}

.answer_active {
    padding: 0rem 0rem;
    background-color: white;
    border-radius: 999px;
    box-shadow: 0 0 5px 5px white;
    padding: 1rem 2rem;
    font-weight: 700;
    overflow: hidden;
    transform: scale(0,0);
    transition: 1s;
    transform: scale(1,1);
}
.answer:focus {
    background-color: blue;
}

#view {
    width:3rem;
    height:3rem;
    background-image: url("../img/noun_see_587862.png");
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

.questionBlock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.introTitle {
    color: white;
    font-weight: 700;
    margin-bottom: 1rem;
}

.questionGroup {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 999px;
    box-shadow: 0 0 5px 1px white;
    padding: 0 0 0 1rem;
    width: 90vw;
    max-width: 800px;
}

.questionInput {
    font-size: 1rem;
    font-family: 'Ubuntu';
    border:0;
    color: var(--fontColor);
    background-color: #00000000;
    width: 100%;
    height: auto;
    resize: none;
    word-wrap: break-word;
    word-break: break-all;
}

.questionInput:hover, .questionInput:focus {
    /*transform: scale(1.03);*/
    outline:none;
}

.questionInput:disabled {
    color:var(--fontColor);
    background-color: white;
}


.radioGroup {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 1rem 0;
    
}

.radioBox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: white;
    box-shadow: 0 0 5px 1px white;
    border-radius: 999px;
    width:3rem;
    height: 3rem;
    margin: 0.5rem;
    transition: 200ms;
    cursor: pointer;
}

.radioBox:hover {
    background-color: #FFC000 !important;
}


.radioOption {
    font-weight: 700;
    text-align: center;
}

.submit {
    background-color: #FFC000;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 5px 1px white, inset 0 0 5px 2px grey;
    border:1px solid white;
    border-radius: 999px;
    font-weight: 700;
    color: var(--fontColor);
    outline:none;
    transition: 200ms;
    cursor: pointer;

}

.submit:hover {
    transform: scale(1.04, 1.04);
    color: white;
    background-color: var(--fontColor);
}

.submit:focus {
    outline:none;
}

footer{
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.footerText {
    color: white;
}

sup {
    vertical-align: super; 
    font-size: 70%
}