
@font-face {
    font-family:'Blue Screen';
    src: url(BlueScreenPersonalUseRegular-0W1M9.ttf);
}
@media screen and (max-height: 1800px) and (max-width: 2880px) {
    body {
        background-image: url('ch4desktop.png');
        background-size: cover;
  }
  .question1, .question2, .question3, .question4 {
    max-width: 200px;
    font-size: 25px;
    top: 0px !important;
  }
  .portal {
    position: static;
    top: 0px;
    left: 10px;
    width: 100px;
    height: auto;
  }
}

@media screen and (max-height: 2436px) and (max-width: 1125px) {
    body {
        background-image: url('ch4iphoneX.png');
        background-size: cover;
  }
    .question1, .question2, .question3, .question4 {
    max-width: 200px;
    font-size: 25px;
    }
    .portal {
    display: block;
    margin: auto;
    width: 100px;
    height: auto;
  }
}


@media screen and (max-height: 2280px) and (max-width: 1242px) {
    body {
        background-image: url('ch4iphoneplus.png');
        background-size: cover;
  }

    .question1, .question2, .question3, .question4 {
    max-width: 200px;
    font-size: 25px;
    }
    .portal {
    display: relative;
    margin: 50px;
    width: 100px;
    height: auto;
  }
}

@media screen and (max-height: 1334px) and (max-width: 750px) {
    body {
        background-image: url('ch4iphone8.png');
        background-size: cover;
  }
    .question1, .question2, .question3, .question4 {
    max-width: 200px;
    font-size: 25px;
    margin-top: 5px;
    }
    .portal {
    display: block;
    margin: auto;
    margin-bottom: -45px;
    width: 125px;
    height: auto;
  }
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}
}

.question1, .question2, .question3, .question4 {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: 'Blue Screen', sans-serif;
    border: 3px;
    border-style: groove;
    max-width: 300px;
    padding: 5px 5px;
}

.question1 {
    background-color: #154764;
    color: #6fb8a3;
}

.question2 {
    background-color: #d0a7b9;
    color:#ffffff;
}

.question3 {
    background-color: #f49457;
    color: #10140e;
}

.question4 {
    background-color: #10140e;
    color: #f49457;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.submit-box {
    font-family: 'Blue Screen', sans-serif;
    font-size: 15px;
    padding: 5px 10px;
}

.small-gap {
  display: block;
  height: 5px;
}